Parcel incorrectly rewrites media queries

Question

I'm currently using Parcel 2.8.3 and @parcel/transformer-sass 2.8.3, but I'm having some issues with the way I'm rewriting media queries. In my previous projects using Parcel, I had no such issues and everything was as it should be.

This is the SASS file:

h1 {
  color: red;
}

@media only screen and (max-width: 40em) {
  h1 {
    color: blue;
  }
}

This is the CSS output:

h1 {
  color: red;
}

@media only screen and (width <= 40em) {
  h1 {
    color: #00f;
  }
}

As you can see, the media query in the CSS file has been changed from max-width to width <= 40em, which does not work when viewed on an actual mobile phone.

If I use package-lock.json and package.json copied from a 1 month old project, the media queries are rewritten as they should be. As shown above, when running npm i Parcel & npm i @parcel/transformer-sass for my new project, when I launch the project, all the media queries change as in the second code block shown. Any suggestions would be great.

Answer 1

I found a solution to extend the browser list. Add the following to your package.json:

"browserslist": "> 0.5%, last 3 versions, not dead"

This will extend supported browsers and should ensure it is not overwritten and older Safari can handle it.