CSS import order differs between dev and prod

[chris-hailstorm]

ENVIRONMENT

0.6.0

OBSERVATION

CSS styles change between dev and prod.

In index.js, I have something like this:

import 'src/styles/scaffold.css'
import 'src/styles/extras.css'
import 'semantic-ui-css/semantic.css'  // lives under node_modules/semantic-ui-css

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:

• see https://github.com/boraturant/MiniCssExtractPlugin_CSSOrderProblem
• see CSS files load order mismatch in prod and dev envs webpack-contrib/mini-css-extract-plugin#188

WORKAROUNDS

I used two different workarounds to solve this issue (poorly):

1. used web/config/webpack.config.js to drop the MiniCssExtractPlugin 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):

  config.module.rules[0].oneOf[5] = {
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader',
    ],
  }

2. copied the CSS file from the 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:

import 'src/styles/scaffold.css'
import 'src/styles/extras.css'
import 'src/styles/semantic.css'  // lives with other RW CSS files

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.

[brianespinosa]

@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.