Handle CSS Nesting Module selectors?

[jmreid]

It's still in draft, and not supported anywhere yet, but I'm wondering if esbuild should handle this code when minifiying:

.link {
    color: red;
    &:hover {
      color: blue;
    }
}
.another-class {
    color: yellow;
}

Right now, this outputs:

.link{color:red;&:hover{color:#00f}}.another-class{color:#ff0}

One day, this will be supported in browsers. But for now, we'd want to output this if our CSS target isn't set to the newest support:

.link{color:red}.link:hover{color:#00f}.another-class{color:#ff0}

Or even:

.link{color:red}.another-class{color:#ff0}

Or maybe minification should fail (similar to JS when your syntax cannot be minified to support your target)?

[evanw]

I agree that it'd be nice if this was lowered. I'll add a warning for now but keep this issue open.

[evanw]

Since this issue was posted, the specification authors have decided to go back and rethink the syntax, so this currently isn't actionable. The final syntax will likely be different than what esbuild implements.

I'm going to close this issue for now since it's not currently something esbuild can move forward with. We can move forward if/when the specification authors figure out what they want this feature to be.

[evanw]

It looks like this is shipping in nightly browser versions: https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/. The syntax could still change, but it is now more certain than it was before.