search

johanholmerin / style9

CSS-in-JS compiler inspired by Meta's stylex
MIT License
570 stars 27 forks source link

Official support for CRA #84

Closed shravan2x closed 1 year ago

shravan2x commented 1 year ago

Per your suggestion in https://github.com/johanholmerin/style9/issues/2#issuecomment-688064966 , I tried adding style9 to CRA via CRACO (my craco config is included below). The only changes I made are adding the Style9Plugin.loader and new Style9Plugin().

This works entirely fine in development. However, there's an interesting glitch where the order of CSS rules changes in production leading to glitches like the one below (a minimal button displays as a regular button in light mode, but correctly as a minimal button in dark mode).

https://user-images.githubusercontent.com/4096676/212300889-69665ad8-f608-43cc-82dc-b944a8c7a97e.mp4

This demo app does not use style9 calls anywhere. I've only simply added the config in craco. The issue goes away when I remove new Style9Plugin() from the plugins list. So I assume the Style9Plugin (or perhaps the postcss loader it calls) are modifying CSS incorrectly somehow.

Part of the issue here could well be my very limited understanding of webpack, their plugins, etc. It would be a great help to have a clean CRA plugin supported by the library.

I'm happy to share my repro if it would be helpful.

johanholmerin commented 1 year ago

Yes, the Style9Plugin sorts the generated CSS declarations, as this is required to make the styles deterministic. If you want to avoid this for CSS not generated from style9 you should be able to pass a regex to the plugin: new Style9Plugin({ test: /.../ }). You'll probably also need to look at the splitChunks and virtualFileName options so that you have something to match against.

This doesn't seem to be related to Create React App specifically, it's more about Webpack in general. I don't use CRA or CRACO so it's unlikely that I'll add a specific plugin for that, but the normal Webpack setup should work.

shravan2x commented 1 year ago

@johanholmerin Could you clarify why it's necessary for style9's styles to be deterministic if webpack generally doesn't care?

Could there be an option for the plugin to only sort it's own CSS by default?

johanholmerin commented 1 year ago

It's to make sure that when pseudo classes and at-rules the order which they are generated doesn't affect what styles are applied.

The plugin already tries to only sort the CSS generated by style9, but since it's done after the files are combined it cannot be 100%. The solution is to separate the CSS generated from style9 from other CSS, as explained above.