Bug 285114 – Subsequent nested styles ignored after incorrect nested selector

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Alvaro Montoro]

In CSS Nesting, if an "erroneous" selector is included, the following rules will be ignored and not applied. This behavior happens on Safari, but it is not the same on Chrome or Firefox.

For example (you can find a running demo on this CodePen https://codepen.io/alvaromontoro/pen/emORgey): if we have the following code:

```html
<div>
  Hello <span>World</span>!
</div>

<style>
div {
  color: blue;
  
  span {
    color: red;
  }
  
  /* this is an incorrect selector because the brackets are empty */
  error[] {
    color: yellow;
  }
  
  span {
    color: green;
  }
}
</style>
```

The word "World" will be green on Chrome and Firefox, but red on Safari. That happens because the styles after the incorrect selector are not processed by Safari, providing a different experience to other browsers.

-----

I ran into this issue while styling a custom input range. There is no fully standard way of doing this, so I had to use special vendor-prefixed pseudo-classes. My code was organized by feature, first the styles for the track, then the styles for the thumb:

```css
.range {
  /* track styles */
  &::-webkit-slider-runnable-track { ... }
  &::-moz-range-track { ... }
  /* thumb styles */
  &::-webkit-slider-thumb { ... }
  &::-moz-range-thumb { ... }
}
```

When I did that, the thumb styles were not applied correctly on Safari (while they worked just fine on other browsers). I solved it by rearranging the code by vendor prefixes instead of by feature:

```css
.range {
  /* Chrome + Safari */
  &::-webkit-slider-runnable-track { ... }
  &::-webkit-slider-thumb { ... }
  /* Firefox */
  &::-moz-range-track { ... }
  &::-moz-range-thumb { ... }
}
```

Another option that worked was removing the nesting. But, ideally, it should not matter which order these styles were nested in as they are mutually exclusive. It would be better if WebKit/Safari ignored the incorrect nested selector, then kept processing the remaining ones.

[Karl Dubost]

Confirmed.
I tried also with `err/or {color: yellow;}` to make sure it was not an artefact of `error[]`

```
FAIL Safari Technology Preview  209           20621.1.6
PASS Firefox Nightly            135.0a1       13524.12.18
PASS Google Chrome Canary       133.0.6914.0  6914.0
```

[Radar WebKit Bug Importer]

<rdar://problem/142187930>

[Matthieu Dubet]

Pull request: https://github.com/WebKit/WebKit/pull/39356

[Matthieu Dubet]

*** Bug 284746 has been marked as a duplicate of this bug. ***

[EWS]

Committed 289429@main (ae311f82a32c): <https://commits.webkit.org/289429@main>

Reviewed commits have been landed. Closing PR #39356 and removing active labels.