Support `:state(<custom-ident>)` and other pseudo-classes

[skanne]

Please officially support the pseudo-class :state(<custom-ident>)! It is marked as Baseline 2024 and is supported by all major browsers. See https://developer.mozilla.org/en-US/docs/Web/CSS/:state

Currently, lightningcss spits out the following warning:

'state' is not recognized as a valid pseudo-class. Did you mean '::state' (pseudo-element) or is this a typo?

[georgwittberger]

This is also blocking us in our Next.js project from adopting Turbopack because it relies on Lightning CSS.

[zedix]

+1

Here's an example of valid selector with CSS custom state using Web Awesome library.

 wa-checkbox:active:not(:state(disabled))::part(control) {
    border-color: purple;
 }

[jp-knj]

I'll give it a try?

[skanne]

Update: Initially I asked for support of :state(<custom-ident>) only, but there are a number of other pseudo-classes and -elements that are already (or very close to being) baseline, but not recognized by lightningcss.

Example: ::highlight()

[benface]

If any Lightning CSS maintainer sees this: please consider accepting sponsors.