Don't split unsupported selectors
Version
1.25.1
input
.foo, .bar:baz {
color: green;
}
output
.foo {
color: green;
}
.bar:baz {
color: green;
}
Browsers ignore the entire rule when it encounters the unsupported selector .bar:baz, but Lightning CSS parses it and changes it so that .foo is in effect, which is incorrect.
expected
Prints the warning and then outputs the original CSS as is.
.foo, .bar:baz {
color: green;
}
Test in Browser
data:text/html;charset=UTF-8,<!doctype html> <style> .foo, .bar:baz { color: green; } </style> <div class="foo"> foo </div>
This is intentional. It is needed to handle the opposite case, like these ones: #774 #311. Say CSS adds a new selector to the standard. The goal of a tool like Lightning CSS is to allow authors to write their CSS as if all browsers already support future syntax. Lightning CSS splits rules when some targets don't support a selector yet so that the supported selectors continue to work in older browsers. For example, when :focus-visible was added, someone might write a single rule for :hover, :focus-visible and expect :hover to continue working even in browsers that don't support :focus-visible yet.