feat: Support for external CSS preprecessors

[LucasUnplugged]

This tiny PR* adds support for external CSS preprocessors. Specifically, it allows devs to define a preprocessor function via their config, which will be called before Stitches walks through a style object.

Basically, this gives devs the power of utils, but everywhere, including when other devs (or consumers of your design system) use native CSS props instead of your custom utils.

Rationale

Utils are awesome, but you can only get that power through use of the util — if a consumer of your design system uses standard CSS properties, you have no way to add value there.

Sample Use Case

I'm creating a design system that is insanely easy to localize, including for RTL languages. If a dev creates a style of borderRadius: 0 $4 $4 0, we can easily understand that this element has rounded top-right and bottom-right corners; that makes it easy to translate this to a RTL layout as borderRadius: $4 0 0 $4.

While this could be done with a custom util, the issue is that if a consumer of my design system uses the standard CSS prop borderRadius, I lose the ability to auto-translate directional styles for them.

Having an interface to the CSS objects before they get processed gives me the ability to translate all LTR directional styles into RTL directional styles, automagically.

Proposed Interface

(styles: Record<string, any>) => Record<string, any>

Simple as can be. This PR includes a passthrough default function, in case a user doesn't define one.

---

*—I'd be happy to add some tests, and even write up some draft documentation, but didn't want to commit that time until I heard that the core team was willing to accept this feature.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 479df3f:

Sandbox	Source
Stitches CI: CRA	Configuration
Stitches CI: Next.js	Configuration

[reid]

Thanks for this contribution! I understand this project supports CSS Logical Properties for RTL support; however, using a preprocessor can help with other needs like autoprefixer or RTL for browsers which are too old to support CSS Logical Properties.

I work on a large React application localized to 77 languages. Beyond what's offered by Logical Properties, we sometimes need to perform more specific RTL transforms for icons and input elements. Using a preprocessor can be helpful to meet these needs.

[LucasUnplugged]

Yup, exactly! There are probably a whole bunch of other use cases as well — I just like that this is a super minimal way to give the community some extra power, with no real surface area for the core team to maintain/support here.

Like, "hey, this pre-processor isn't working for me"... "sorry to hear that; please consult with the creator of that pre-processor".

Most folks likely won't use it, but for those who do, it will be a life-saver, IMO.

[Pearce-Ropion]

@LucasUnplugged Hey, curious why you closed this? I still think it'd be a great addition to Stitches.

[LucasUnplugged]

@LucasUnplugged Hey, curious why you closed this? I still think it'd be a great addition to Stitches.

@Pearce-Ropion only because it's been 2 months and it never even received a review or official comment. The changes are easy for someone to duplicate, as shown here, if they wish. I just didn't want it clogging up my list of open PRs anymore.