parcel-bundler / parcel-bundler/lightningcss

media querries not working with lightningcssMinify in Safari 14

Open
#617 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pending triage
Dominant language
Rust
Stars
7.7k
Forks
302
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reported CSS input, the Safari 14 behavior, and the browserslist target configuration used by lightningcss. Trace media-query minification and target handling, then verify that the generated query works in Safari 14 while preserving the existing output for other targets.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, rust
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.