Parcel incorrectly rewrites media queries

[MrWalt]

 "devDependencies": {
    "@parcel/transformer-sass": "^2.8.3",
    "parcel": "^2.8.3"
  }

Those are all of the dependencies I have in my current test file. Upon writing a media query with sass, parcel rewrites the output and messes up the query.

Sass file:

h1 {
  color: red;
}

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

CSS output:

h1 {
  color: red;
}

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

/*# sourceMappingURL=index.b1276d39.css.map */

As you can see in the CSS output file, the media query is different and this completely ruins said media query. Any enlightenment is greatly appreciated.

[devongovett]

This is equivalent syntax in modern browsers. You need to set a browserslist if you want the output to target older browsers.

[devongovett]

One question: what browser version are you developing in? As mentioned above, the default targets for development are the latest version of each browser, all of which support this. Are you on an older version intentionally?

[leebert]

For me, the max-width: media queries that were transpiled to width <= were working correctly in Brave (Chromium 113). However, on Safari 16.3 in Responsive Design Mode they were not. Additionally, when connecting my phone (iOS 16.3.1) to my localhost server to test on-device none of the mobile browsers (Brave, Firefox, or Safari) were recognizing the media queries either. If I then used Web Inspector to change the media queries back to their original format everything started working as expected.

[devongovett]

I guess because 16.4 is the latest, not 16.3. Maybe we should change the default to last major version?

[leebert]

That is a good question. Might that change lead to unintended side effects with existing projects that use Parcel, or subvert the expectations of experienced developers in terms of intended behavior for bundlers? Even though it was an initially frustrating experience for me when my code suddenly stopped working the end result was that I deepened my understanding of how bundlers work and gained additional web development experience points, which is a good thing.

[MrWalt]

I am using the latest version of Chrome and they work just fine there, however as leebert said width <= does not work for Safari 16.3 which is the reason I need max-width:. Its not a good practice to completely drop support for a browser that is so little behind from its latest.