NUglify icon indicating copy to clipboard operation
NUglify copied to clipboard

Minifying nested CSS is broken

Open PoseidonEnergy opened this issue 1 year ago • 1 comments

✅ This CSS minifies correctly:

var css = """
.someClass > * {
    width:calc(50% - (10px / 2));
}
""";
var minified = NUglify.Uglify.Css(css).Code;
Console.WriteLine(minified);

Output: .someClass>*{width:calc(50% - (10px/2))}


❌ The same CSS does not minify correctly if nesting is involved:

var css = """
:nth-child(n){
    .someClass > * {
        width:calc(50% - (10px / 2));
    }
}
""";
var minified = NUglify.Uglify.Css(css).Code;
Console.WriteLine(minified);

Output: :nth-child(n){.someClass> * {width:calc(50% -(10px / 2));}}

In the output, notice the white space around the asterisk was not removed, and the calc() statement was broken (the space after the minus sign should not have been removed).

CSS nesting is relatively new so it's understandable that it's not supported yet. To learn more about CSS nesting click here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting

PoseidonEnergy avatar Nov 29 '23 03:11 PoseidonEnergy

Yeah nesting is completely unsupported

PRs welcome

trullock avatar Nov 29 '23 09:11 trullock