parcel-bundler / parcel

The zero configuration build tool for the web. šŸ“¦šŸš€
https://parceljs.org
MIT License
43.52k stars 2.26k forks source link

Parcel converts "min-width" media queries in Sass to "width >=" queries, even though one browser in my browserslist does not support such queries #10008

Open rhaglennydd opened 2 weeks ago

rhaglennydd commented 2 weeks ago

šŸ› bug report

šŸŽ› Configuration (.babelrc, package.json, cli command)

My package.json looks like this:

{
    "name": "my-project",
    "version": "1.0.0",
    "browserslist": [
        "> 1%",
        "last 1 Android versions",
        "last 1 ChromeAndroid versions",
        "last 2 Chrome versions",
        "last 2 Firefox versions",
        "last 2 Safari versions",
        "last 2 iOS versions",
        "last 2 Edge versions",
        "last 2 Opera versions"
    ],
    "dependencies": {
        "bootstrap": "^5.3"
    },
    "devDependencies": {
        "@parcel/transformer-sass": "^2.12",
        "browserslist": "^4.24.2",
        "parcel": "latest"
    },
    "source": "./src/scss/app.scss",
    "scripts": {
        "clean:output": "rimraf dist",
        "build": "npm run clean:output && parcel build",
        "watch": "parcel watch"
    },
    "license": "ISC",
    "description": ""
}

## šŸ¤” Expected Behavior

If I run browserslist from the command line, this appears in the output:

and_uc 15.5

caniuse.com says that UC Browser for Android does not support these kinds of media queries as of version 15.5: https://caniuse.com/?search=css%20media%20range

šŸ˜Æ Current Behavior

A media query like @media (min-width: 1000px) gets converted to @media (width >= 1000px). I ran update-browserslist-db, but that made no difference.

šŸ’ Possible Solution

šŸ”¦ Context

šŸ’» Code Sample

šŸŒ Your Environment

Software Version(s)
Parcel 2.12.0
Node 18.17.1
npm 10.9.0
Operating System Windows 10
mikolamin commented 2 weeks ago

Have the same issue! A solution can be: https://stackoverflow.com/a/76240184

rhaglennydd commented 2 weeks ago

Have the same issue! A solution can be: https://stackoverflow.com/a/76240184

If you look at the caniuse.com link, it shows that globally that syntax is only supported by 91.9% of browsers, so the fact that I included "> 1%" in browserslist should be enough to prevent it from being applied. I shouldn't have to modify browserslist.