Automatic RTL Conversion

[LucasUnplugged]

Hey folks 👋🏻

As part of working on my design system, I've added the ability for Stitches to automatically convert styles to "mirrored", RTL-friendly styles (in my fork). My question is, is this something people would want to become a core feature of Stitches?

Details

• Any style rule that has a horizontal direction component gets converted to something like:

// Pre-conversion
const Regular = styled("div", {
  background: "$gray1",
  left: "0px",
  marginRight: "20px",
})

// Post-conversion
const Fancy = styled("div", {
  background: "$gray1",
  "[dir='ltr'] &": { left: "0px", marginRight: "20px" },
  "[dir='rtl'] &": { right: "0px", marginLeft: "20px" },
})

• Any rule with a CSS property that contains the terms left or right get handled by switching CSS properties, but their values.
• Shorthand CSS properties, like margin, background, and many more, get handled by modifying their values, if need be — e.g., padding: "$5 $3 $5 $0" gets changed into padding: "$5 $0 $5 $3" for RLT languages.

⚠️ TO CLARIFY: I already have logic in place to do this; all I'm asking the community (and the core Stitches team) is whether you'd like to a see a PR to get it into Stitches.

---

Suggested Implementation

• We could have a config property for whether this conversion should be used at all — defaults to true.
• We could have config properties for the selectors to be used — defaults to [dir='ltr'] and [dir='rtl'].

Part of my objective was to make this code as clean as possible, so as to make my fork easier to maintain. That objective meant that I put all that logic into helper functions (which should make for a clean port), but also that I setup this conversion in a pre-generation step, that does a recursive search-and-replace on any style object passed into Stitches, which is not the most performant approach.

The Stitches core team might have a suggestion on how to better integrate my logic with the current style-generation process, to reduce overhead.

[LucasUnplugged]

As part of working on my design system, I've added the ability for Stitches to automatically convert styles to "mirrored", RTL-friendly styles (in my fork). My question is, is this something people would want to become a core feature of Stitches?

Just a note that, with my suggested feature of support for pre-processors, this feature here would no longer need to be a core feature.

#993

If that gets approved, I might open source my RTL pre-processor, if anyone wants it.