Some styles not being applied with prod build because they are all put in a @layer with diferent priority

DarkAng3L commented 2 months ago

All the styles working in dev are not being applied in prod build because they are all put in a @layer with diferent priority: Example: stylex css file:

Steps to repro:

import a global css file to reset some styles (either from a CDN, or a local index.css file in main.tsx with some global styles or @import from external source)
apply StyleX styles to a component that has styles applied from such a (global) source
npm run build -> npm run preview

Expected result: The (global) css styles should not come into conflict with more specific component level css styles from StyleX. This does not happen in dev mode because the styles are not applied in an @layer with different priority and this is dangerous because I expect in prod to have same behaviour like in dev.

Disclaimer: I know StyleX does not care much about global configuration (https://stylexjs.com/docs/learn/thinking-in-stylex/#avoid-global-configuration), but "because CSS reasons" for my current project (and most projects) a global CSS file in which at the very least it has some css resets is useful (https://www.youtube.com/watch?v=2lyDv0wOQuQ).

Note: With vite-plugin-stylex-dev I don't have this issue.

HorusGoul commented 2 months ago

Right now this plugin doesn't offer a way to disable Layers, I recommend you to put the reset stylesheet inside its own layer that precedes the StyleX layers, this way StyleX layers will have higher priority.

DarkAng3L commented 2 months ago

Yes, that workaround might fix the problem, but unfortunately, this is still just a workaround, would be nice for this to not be needed in the future. And if you do not have access to the external stylesheet, (for anybody interested) the only way I know to do that is something like this with @import: @import url("external/stylesheet/file.css") layer(base-reset);

dan-betmate commented 2 months ago

Hey @DarkAng3L,

I don't know if you've fixed this yet (or if this will be helpful), but I ran into the same issue as you.

Going to the StyleX playground: https://stackblitz.com/edit/stylex-next?file=app%2Fglobals.css

And found their css reset:

Simple enough, worked for me in production.

HorusGoul / vite-plugin-stylex

Some styles not being applied with prod build because they are all put in a @layer with diferent priority #71