parcel-bundler / parcel-bundler/lightningcss
Nested Selectors Break Minification
Nobody has claimed this yet.
- Dominant language
- Rust
- Stars
- 7.7k
- Forks
- 302
- PR merge metrics
- No merged PRs in 30d
Description
I've noticed that nested selectors are interfering with Lightning CSS's minification process
Minification works correctly for non-nested selectors, but it fails to combine rules when nesting is involved:
Non-nested (works correctly):
.bar.foo {
color: red;
}
.bar.foo {
color: green;
}
This correctly minifies to: .bar.foo{color:green}
Nested (doesn't minify as expected):
.bar { .foo { color: red; } }
.bar { .foo { color: green; } }
This produces: .bar .foo{color:red}.bar .foo{color:green}
Nested with nesting feature disabled:
.bar { .foo { color: red; } }
.bar { .foo { color: green; } }
This produces: .bar{& .foo{color:red}}.bar{& .foo{color:green}}
Expected Behavior
The nested selectors should be minified and combined similarly to the non-nested version, resulting in:
.bar .foo{color:green}
Actual Behavior
The nested selectors are not being combined, resulting in duplicate rules that could be further optimized
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 with the linked Lightning CSS playground and compare the non-nested, nested, and nesting-disabled examples. Trace the minification path for nested selectors and add coverage for the reported input; done means the nested rules combine to produce .bar .foo{color:green} without changing behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, rust
- Domain
- compilers
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100