lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

media querries not working with lightningcssMinify in Safari 14

Open krutoo opened this issue 2 years ago • 1 comments

Hi, i use lightningcss in webpack like this:

module.exports = {
  // ...
  optimization: {
    minimizer: [
      '...',
      new CSSMinimizerWebpackPlugin({
        minify: CSSMinimizerWebpackPlugin.lightningCssMinify,
        minimizerOptions: {
          targets: lightningcss.browserslistToTargets(browserslist(browserslistQuery)),
        },
      }),
    ],
  },
};

in my case i have source of styles:

@media (min-width: 0) {
  .some-element {
    width: 1000px;
  }
}

Previously i used postcss with autoprefixer and output was:

@media (width>=0) {
  .some-element {
    width: 1000px;
  }
}

This output working fine in Safari 14.1 on macos and iOS

Now with lightningcss output is:

@media (min-width: 0) {
  .some-element {
    width: 1000px;
  }
}

This output not working in safari, only @media (min-width: 0px) or @media (width>=0) works fine

Is it possible to make output like in postcss? Looks like its more shorter and can helps to solve problems with safari compatibility

When i set safari >= 14 in browserslist query it not helps to solve issue

krutoo avatar Nov 01 '23 04:11 krutoo

That's my fault?

krutoo avatar Jan 19 '24 08:01 krutoo