parcel-bundler / parcel-bundler/lightningcss

Unnecessary vendor-prefixed or non-standard name pseudo-classes and values are not removed

Open
#369 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

area: minification
Dominant language
Rust
Stars
7.7k
Forks
302
PR merge metrics
No merged PRs in 30d

Description

Lightning CSS should remove unnecessary vendor-prefixed or non-standard name pseudo-classes and values in the input CSS, but...

  • Leaves them intact even when all target browsers support the unprefixed or standard name version
  • Adds duplicate prefixed or standard name versions when one of the target browsers does not support the unprefixed or standard name version and is a specific mobile browser

Reproduction: https://github.com/chalkygames123/repro-lightningcss-unnecessary-vendor-prefixed-fallbacks

I explicitly specified pinned browser versions, which seem to be the latest version supported by Lightning CSS at the moment, to ensure reproducibility.

input.css, which contains non-standard name pseudo-classes, vendor-prefixed values, and vendor-prefixed properties:

foo:-webkit-full-screen, foo:-moz-full-screen, foo:fullscreen {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

npx lightningcss --targets 'chrome >= 100' input.css produces:

foo:-webkit-full-screen, foo:-moz-full-screen, foo:fullscreen { /* The first selector is unnecessary as Chrome >= 71 supports the standard name version. The second selector is unnecessary as Firefox is not included in the target browsers. */
  width: -webkit-fit-content; /* Unnecessary as Chrome >= 46 supports the unprefixed version. */
  width: -moz-fit-content; /* Unnecessary as Firefox is not included in the target browsers. */
  width: fit-content;
  -webkit-appearance: none; /* Unnecessary as Chrome >= 84 supports the unprefixed version. */
  -moz-appearance: none; /* Unnecessary as Firefox is not included in the target browsers. */
  appearance: none;
}

npx lightningcss --targets 'firefox >= 98' input.css produces:

foo:-webkit-full-screen, foo:-moz-full-screen, foo:fullscreen { /* The first selector is unnecessary as Chrome is not included in the target browsers. The second selector is unnecessary as Firefox >= 64 supports the standard name version. */
  width: -webkit-fit-content; /* Unnecessary as Chrome is not included in the target browsers. */
  width: -moz-fit-content; /* Unnecessary as Firefox >= 94 supports the unprefixed version. */
  width: fit-content;
  -webkit-appearance: none; /* Unnecessary as Chrome is not included in the target browsers. */
  -moz-appearance: none; /* Unnecessary as Firefox >= 80 supports the unprefixed version. */
  appearance: none;
}

npx lightningcss --targets 'chrome < 100' input.css produces:

foo:-webkit-full-screen, foo:-moz-full-screen, foo:fullscreen { /* The second selector is unnecessary as Firefox is not included in the target browsers. */
  width: -webkit-fit-content;
  width: -moz-fit-content; /* Unnecessary as Firefox is not included in the target browsers. */
  width: fit-content;
  -webkit-appearance: none;
  appearance: none;
}

npx lightningcss --targets 'firefox < 98' input.css produces:

foo:-webkit-full-screen, foo:-moz-full-screen, foo:fullscreen { /* The first selector is unnecessary as Chrome is not included in the target browsers. */
  width: -webkit-fit-content; /* Unnecessary as Chrome is not included in the target browsers. */
  width: -moz-fit-content;
  width: fit-content;
  -moz-appearance: none;
  appearance: none;
}

npx lightningcss --targets 'samsung < 15, firefoxandroid < 107' input.css produces:

foo:-webkit-full-screen, foo:-moz-full-screen, foo:fullscreen {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: -webkit-fit-content; /* Duplicate */
  width: -moz-fit-content; /* Duplicate */
  width: fit-content;
  -webkit-appearance: none;
  appearance: none;
}

Sorry if I'm getting something wrong.

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 by running the linked reproduction with the documented lightningcss target commands and compare the output for prefixed pseudo-classes and values. Trace the target-browser handling for these cases, then add regression coverage showing that unnecessary fallbacks are removed without duplicate fallbacks for mobile targets.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, rust
Domain
compilers, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.