Incorrect order of CSS in build version

[d07RiV]

Is this a bug report?

Yes

Environment

npx create-react-app --info prints empty result for some reason.

Steps to Reproduce

Using CRA 3.0.1.

1. create-react-app style_test
2. npm i bootstrap@3.3.7 --save
3. In index.js import two CSS files - first, a reset CSS, second, the bootstrap CSS.
4. Run dev server and production builds and compare results.

Expected Behavior

Both dev server and production builds should display text using bootstrap CSS.

Actual Behavior

Dev server works as expected, but production build contains two CSS chunks, one with bootstrap code and another with reset CSS, loaded in wrong order (bootstrap first). As a result, in production version text is not styled.

Bootstrap (and only bootstrap) appears in 2.*.chunk.css, while reset CSS and all my sass styles end up in main.*.chunk.css. What is the benefit of using two chunks, anyway? Just faster load times due to parallel loading of both scripts?

Reproducible Demo

https://github.com/d07RiV/style_test

[heyimalex]

I didn't have too much time to dig in, but definitely able to repro that the output of build and dev look different.

[Nasicus]

Did you find any solution / workaround for this?
We have the same problem (microsoft/fluentui#9786) - though I'm not really sure if it's the same situation as this.
And the only solution I found so far is by "bumping" the priority of classes which are loaded in the wrong order...
However since it only happens on production build it's very annoying, because you never know in advance WHEN you have to do this ...

[d07RiV]

Not really, I just made a small script to merge the generated CSS files in the correct order as a post build step. (This is very project specific since it has no way of knowing what the correct order is in the general case)

[jamespedid]

I am also having this issue. It appears that the order of CSS is not guaranteed here. I use code-splitting, so this may be a factor.

I do not have this issue on development, just in a production build.

More information:

If I load page A, and then goto page B, the style appears one way:

If pages are loaded in the reverse order, it appears another way:

For a workaround, I'm going to use !important on the css for the green button (the correct way) and hope for the best.

[sliptype]

I was able to resolve this by importing my css files from within my sass entrypoint file.

main.scss

@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/react-bootstrap-typeahead/css/Typeahead';

It seems like this will preserve the order correctly

[jagretz]

Not really, I just made a small script to merge the generated CSS files in the correct order as a post build step. (This is very project specific since it has no way of knowing what the correct order is in the general case)

@d07RiV would it be possible to share your script in a gist? It may be helpful to others.

[partynikko]

If you code-split the CSS files you need to control the order of you'll get them as separate chunks and in the specified order.

(async function() {
 await import('...')
 await import('...')
 await import('...')
})()

However I wish there was a way to control the order and not have to code split them.

[zrromano]

Not really, I just made a small script to merge the generated CSS files in the correct order as a post build step. (This is very project specific since it has no way of knowing what the correct order is in the general case)

Hey, I'm having this same issue right now and I have no idea how I would write a script like this. If you're still around, I would really appreciate sharing the script you used so I could have a starting point.

[d07RiV]

Not really, I just made a small script to merge the generated CSS files in the correct order as a post build step. (This is very project specific since it has no way of knowing what the correct order is in the general case)

Hey, I'm having this same issue right now and I have no idea how I would write a script like this. If you're still around, I would really appreciate sharing the script you used so I could have a starting point.

const fs = require('fs');

const dir = 'build/static/css/';
const delim = 'table{border-collapse:collapse;border-spacing:0}';

const names = fs.readdirSync(dir);

const chunk = names.find(n => n.match(/^\d\..*\.chunk\.css$/i));
const main = names.find(n => n.match(/^main\..*\.chunk\.css$/i));

if (!chunk || !main) {
  console.error('Chunk or main not found!');
  process.exit(0);
}

const chdata = fs.readFileSync(dir + chunk, {encoding: "utf-8"});
let mdata = fs.readFileSync(dir + main, {encoding: "utf-8"});
let pos = mdata.indexOf(delim);
if (pos < 0) {
  console.error('Delimiter not found!');
  process.exit(0);
}

pos += delim.length;
mdata = mdata.substr(0, pos) + '\n' + chdata.replace(/\/\*.*?\*\//g, "") + mdata.substr(pos).replace(/\/\*.*?\*\//g, "");

fs.writeFileSync(dir + chunk, '', {encoding: "utf-8"});
fs.writeFileSync(dir + main, mdata, {encoding: "utf-8"});

[GaboFDC]

This is still an issue and using an extra script to fix the built is not ideal at all

[m-nathani]

Wow.. I faced this issue in create-react-app 4 ..

The Dev server css order changed to in production build,

For me css of a node_module is taking preceding over my css.

Is there any possible solution that cra provides ?

[m-nathani]

Wow.. I faced this issue in create-react-app 4 ..

The Dev server css order changed to in production build,

For me css of a node_module is taking preceding over my css.

Is there any possible solution that cra provides ?

Found the solution.. it appears using the correct precedence of css with overrides of node_modules would change the order..

There are several rules ( applied in this order ) :

1. inline css ( html style attribute ) overrides css rules in style tag and css file
2. a more specific selector takes precedence over a less specific one
3. rules that appear later in the code override earlier rules if both have the same specificity.
4. A css rule with !important always takes precedence.

for more details check

[bishnudev01]

+1