Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested Selectors Break Minification #799

Open
jantimon opened this issue Aug 19, 2024 · 0 comments
Open

Nested Selectors Break Minification #799

jantimon opened this issue Aug 19, 2024 · 0 comments

Comments

@jantimon
Copy link

jantimon commented Aug 19, 2024

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):

Playground

.bar { .foo { color: red; } }
.bar { .foo { color: green; } }

This produces: .bar .foo{color:red}.bar .foo{color:green}

Nested with nesting feature disabled:

Playground

.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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant