-
Notifications
You must be signed in to change notification settings - Fork 975
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS import order differs between dev and prod #549
Comments
@chris-hailstorm do you have a repo that exhibits this problem with Redwood? I was digging through Mini CSS Extract Plugin and it does not appear that there is any intention by those maintainers to resolve the problem as they feel it is a non issue and should be controlled in different ways. It seems like it would potentially be better to have CSS that is not optimized and consistent than to have it be optimized and inconsistent (your first use case). If you have a working repo that consistently reproduces this problem, I wanted to look into using the optimize-css-assets-webpack-plugin instead and see if we get similar optimization of styles. Maybe using a different plugin to optimize will get us where we want to go. |
ENVIRONMENT
0.6.0
OBSERVATION
CSS styles change between dev and prod.
In
index.js
, I have something like this:When I run my app in dev mode, later CSS imports override earlier ones, as expected.
In production mode, the ordering is different and different styles (lack of override) result.
Devs expect there would be no difference in final styles just due to dev vs. prod mode.
ANALYSIS
Redwood uses different webpack loaders based on mode, using
MiniCssExtractPlugin
in prod but not in dev. The resulting ordering-of-imports issue is a known problem for webpack:WORKAROUNDS
I used two different workarounds to solve this issue (poorly):
web/config/webpack.config.js
to drop theMiniCssExtractPlugin
loader, which makes prod mode the same as dev mode for CSS files -- delivers the expected styles, but without the performance boost provided by that loader (why it was used in the first place):node_modules
subfolder and updated my import to use that file sitting next to scaffold.css -- works but I have to manually update if that package is updated:RECOMMENDATION
CSS files should be processed in the order they're imported, regardless of which loader(s) are used. That means a later import will reliably override a style defined in an earlier import. This is a common way to tune styles without changing an original
.css
or.scss
file.We should either research a different recommended way to use the existing webpack plugins (which looks to be difficult) or possibly write a custom plugin to ensure the right ordering.
The text was updated successfully, but these errors were encountered: