JS imported css files are bundled in the wrong order

[fabianmakila]

Hi! I'm importing these two files in my index.js:

import 'normalize.css';
import './styles/main.scss';

Although the normalize.css is imported before main.scss it ends up to the bottom of final bundled .css file and ends up overriding some values inside main.scss.

The final bundled css currently looks something like this:

main.css (compiled)
normalize.css

instead of this:

normalize.css
main.css (compiled)

Is there any way I can change the bundling order of css files so it would look like the latter?

[DeMoorJasper]

This looks like a bug. If this is a Parcel 2 issue, please open up a bug report with all the requested information by the template.

This is probably because we multi-thread compilation... although the bundler should re-order them

[fabianmakila]

This was indeed on Parcel 2, I've now made a new issue about this!

[srconklin]

This is happening to me after upgrading to 2.8.9
Any suggestions on how to fix?

[bennadel]

I'm also seeing this as well, at least I think so. I'm on parcel 2.13.3. I'm not sure if it has to do with the way I've defined my targets in package.json. But, I can say that this .js file:

import "../../common/less/base.less";
import "./member.less";

... ends up creating a .css file with the member.less content first and the base.less content last.

[bennadel]

Some clarity, it looks like—in my case—this is related to Parcel trying to extract common assets. I have several targets that all include the base.less. If I remove all but one of them in the package.json, the import order is correct. But, once I have more than one target, the base.less starts showing up at the end. So, I thin this is maybe part of the scope hoisting / optimization thing. I might just have to create different dist folders for each target to prevent Parcel from optimizing. Oh well.