Since updating Parcel from v2.4.0 to 2.10.0, when Parcel compiles my Sass into CSS, the ordering of some of the lines of code is being changed. This is causing some styles to break.
For example - this is a sample of styles from production (compiled using Parcel 2.4.0):
.c-hero .u-wrap:before {
content: "";
height: 18px;
height: var(--gutter);
width: 100vw;
bottom: 0;
right: 18px;
right: var(--gutter);
z-index: 2;
background: #fff;
}
But the same Sass, when compiled on my dev environment (using Parcel 2.10.0), produces this output:
.c-hero .u-wrap:before {
content: "";
height: var(--gutter);
bottom: 0;
right: 18px;
right: var(--gutter);
z-index: 2;
background: #fff;
width: 100vw;
height: 18px;
}
Because one of the height properties has moved, the styles break. There are other examples of this but it seems to occur selectively; i.e. not every line is being moved.
I've also noticed that media queries have changed format - we write our media queries using the older (min-width: 50em) format, and in the production output they're unchanged, but in the broken output they've been reformatted to the modern (width >= 50em) style. This is not a problem in itself, I'm just mentioning it in case it's helpful.
What I've tried so far
I've tried downgrading Parcel, Node, NPM, etc a bunch of times - to the point where I managed to totally break my setup, had to delete node_modules and reinstall from scratch.
I've also tried adding a browserslist entry to the package.json as per this answer.