Bug 290584 – Invalid nested selectors cause subsequent property-value pair to be ignored

• Component: CSS
• Status: RESOLVED DUPLICATE

Suppose you have the following nested selector:

```
div {
  font-weight: bold;
  
  &::-foo-bar {
    font-size: 50px;
  }
  
  color: blue;
  text-transform: uppercase;
}
```

The nested `&::-foo-bar` rule is invalid and ignored (which is expected), but so is `color: blue`. The `text-transform: uppercase` seems to be processed just fine though. It's as if there's some logic invalidating everything up to the next `;` after an invalid selector.

This bug also invalidates any immediately subsequent nested rule as well, which is particularly annoying because one use case for nested rules is to handle Mozilla-specific `-moz-` selectors:

```
input[type="range"] {
    &::-moz-range-thumb { /* some styling */ }
    &::-webkit-slider-thumb { /* some styling */ }
}
``` 

In this case, the invalid (from WebKit's perspective) `-moz-range-thumb` also invalidates the `-webkit-slider-thumb` (and any nested rule or property-value after that until a `;` is encountered).

Repro at https://codepen.io/andrewfong/pen/RNwYqLr

This bug does not seem to happen with Mozilla and Chrome.

[Luke Warlow]

From a quick search it seems to be https://searchfox.org/wubkat/source/Source/WebCore/css/parser/CSSParserImpl.cpp#1453 which needs changing.

[Matthieu Dubet]

Hi,

Thank you for the bug report. It seems to be a duplicate of 285114

Safari Technology Preview and Chrome Dev are displaying the same result in the codepen.

*** This bug has been marked as a duplicate of bug 285114 ***