lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

Don't split unsupported selectors

Open yisibl opened this issue 1 year ago • 1 comments

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>

yisibl avatar Jun 20 '24 10:06 yisibl

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.

devongovett avatar Aug 06 '24 04:08 devongovett