parcel-bundler / parcel-bundler/lightningcss
Unnecessary vendor-prefixed or non-standard name pseudo-classes and values are not removed
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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