Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 this issue Nov 12, 2024 · 2 comments

Comments

@rhaglennydd
Copy link

🐛 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
Copy link

mikolamin commented Nov 13, 2024

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

@rhaglennydd
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants