Support for external CSS preprocessors #993
LucasUnplugged
started this conversation in
RFC
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I've created a PR for this already, but wanted to start a discussion about it. In terms of surface area on this codebase itself, this is actually a tiny change (3 lines + a few lines of types). You the PR here: #991
(Content copied from the PR)
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 asborderRadius: $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
Simple as can be. This PR includes a passthrough default function, in case a user doesn't define one.
Possible Benefits
The ability to have the community add powerful custom functionality, without having to constantly decide what's worth expanding the Stitches API for, and what's not. E.g., "Oh hey, @LucasUnplugged already created a CSS preprocessor that does what you're asking for (
some-npm-package
)!"Beta Was this translation helpful? Give feedback.
All reactions