🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!
Not all adapters support RTL, either in their core or via a plugin, so why not solve this at the Aesthetic layer? That's exactly what this PR does.
Requirements
Default direction should be customizable in the global scope, most likely when instantiating the Aesthetic instance.
Direction should be enforced for certain parts of the DOM treee, most likely through React context and a provider.
Direction should be automatically inferred based on specific criteria. For example, when a user inputs text in Hebrew, the textarea/search bar, and it's child content, should switch modes.
Some CSS properties should not flip when explicitly configured not to.
Tasks
[x] Add rtl option to Aesthetic.
[x] Add DirectionContext and DirectionProvider.
[x] Automatically set dir="rtl" on html tag.
[x] Update Aesthetic#withStyles and Aesthetic#useStyles to read from context.
[x] Update Sheet and Ruleset to run rtl-css-js on the defined properties.
[x] Generated CSS class names should be different between ltr and rtl to avoid collisions.
Not all adapters support RTL, either in their core or via a plugin, so why not solve this at the Aesthetic layer? That's exactly what this PR does.
Requirements
Aestheticinstance.Tasks
rtloption toAesthetic.DirectionContextandDirectionProvider.dir="rtl"onhtmltag.Aesthetic#withStylesandAesthetic#useStylesto read from context.SheetandRulesetto runrtl-css-json the defined properties.ltrandrtlto avoid collisions.