🐛 Media queries issue with older browsers

[Edgaras98]

I have a problem with older browsers, especially on Safari.

I write CSS syntax like this:

@media (width <= 768px) {
      width: 100%;
}

I get compiled output as:

@media (width <= 768px) {
      width: 100%;
}

I would expect that to be compiled into:

@media (max-width: 768px) {
      width: 100%;
}

This is my configuration in package.json:

"browserslist": [
        "last 5 Chrome versions",
        "iOS >= 15.5",
        "last 2 Firefox versions",
        "last 1 ChromeAndroid versions",
        "Safari >= 15.5",
        "not dead"
],

I would expect that autoprefixer would compile into older syntax on versions that do not support newer ones.

you can even see this issue on: https://autoprefixer.github.io/

[ai]

You need a polyfill (postcss-preset-env) not a Autoprefixer for that.

More details https://github.com/postcss/autoprefixer#does-it-add-polyfills