Re: [csswg-drafts] [selectors] Declarative custom `:state()` states (#12502)

I don't have much to add to this conversation, other than I would really love something like this to improve the readability and file size of my generated CSS. Some examples of "custom states" from an actual production codebase:

```ts
const openSelector = `:is([data-gds-exposed-open=true], :not([data-gds-exposed-open]):where([open], :popover-open, :open, [aria-expanded=true]))`

// Should use `:blank` instead of `:placeholder-shown`, but no browser supports it
const blankSelector = `:is([data-gds-exposed-blank=true], :not([data-gds-exposed-blank]):where(input:placeholder-shown, textarea:placeholder-shown, :not(input, textarea)[data-placeholder-shown]))`

const getCheckedStateSelector = (checked: boolean | 'indeterminate') =>
  `:is([data-gds-exposed-checked=${checked === 'indeterminate' ? 'indeterminate' : checked}], :not([data-gds-exposed-checked]):where(${checked !== 'indeterminate' ? `${checked ? ':checked' : ':not(:checked)'}:not([aria-checked], [aria-selected]), ` : ''}[aria-checked=${checked === 'indeterminate' ? 'mixed' : checked}]${checked !== 'indeterminate' ? `, [aria-selected=${checked}]` : ''}))`

const getDisabledStateSelector = (disabled: boolean | 'read-only') =>
  `:is([data-gds-exposed-disabled=${disabled === 'read-only' ? 'read-only' : disabled}], :not([data-gds-exposed-disabled]):where(${disabled === true ? ':is' : ':not'}(:disabled, [aria-disabled=true])${disabled !== true ? `${disabled === 'read-only' ? ':is' : ':not'}([aria-readonly=true])` : ''}))`

const getClickableSelector = (selector?: string) =>
  `:is(:is(a[href], [role='link'], button, [role='button'], [role^='menuitem'], [role='option'], [role='tab'])${selector ?? ''}, :where(label:has(:is(input[type='checkbox'], input[type='radio'])${selector ?? ''})))`
```

These are then passed to Tailwind CSS as custom variants, which means they are repeated over and over in the CSS.

-- 
GitHub Notification of comment by benface
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12502#issuecomment-3109811916 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 23 July 2025 19:07:38 UTC