pseudo-states addon: CSS syntax error with child combinator followed by pseudo-class

[DmitriiKholodov]

Description

The storybook-addon-pseudo-states addon generates invalid CSS selectors when processing rules where a pseudo-class follows a child combinator (>).

Error

SyntaxError: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '.ck.ck-list .ck-list__item > :focus, .ck.ck-list .ck-list__item > .pseudo-focus, .pseudo-focus-all .ck.ck-list
.ck-list__item > { z-index: var(--ck-z-default); position: relative; }'

Root Cause

In extractPseudoStates function (chunk-HWG5K276.js, line 71), when a selector like .ck.ck-list .ck-list__item > :focus is processed:

1. The :focus pseudo-class is removed, leaving .ck.ck-list .ck-list__item > (trailing space after >)
2. The ancestor selector .pseudo-focus-all is prepended
3. Result: .pseudo-focus-all .ck.ck-list .ck-list__item > - invalid CSS (nothing after child combinator)

Affected Code

// Current code
let states = /* @__PURE__ */ new Set(), withoutPseudoStates = selector.replace(matchAll, (_, state) => (states.add(state), "")).replaceAll(/(?<!is)\(\)/g, "(*)").replace(/(?<=[\s(]),\s+|(,\s+)+(?=\))/g, "") ||
"*";

Proposed Fix

Add .replace(/\s*>\s*$/, " > *") to handle trailing child combinators by adding the universal selector *:

 let states = /* @__PURE__ */ new Set(), withoutPseudoStates = selector.replace(matchAll, (_, state) => (states.add(state), "")).replaceAll(/(?<!is)\(\)/g, "(*)").replace(/(?<=[\s(]),\s+|(,\s+)+(?=\))/g,
  "").replace(/\s*>\s*$/, " > *") || "*";

Environment

• addon version: 10.4.6
• CKEditor 5 CSS is affected (selectors like .ck.ck-list .ck-list__item > :focus)

Reproduction

This occurs when Storybook loads CKEditor 5 CSS which contains selectors with child combinators followed by pseudo-classes.

[dosubot[bot]]

This issue has already been fixed in PR #35060, which was merged on June 5, 2026. The fix is very similar to your proposed solution — it detects combinators (>, +, ~) left without a right-hand selector and appends * to keep the CSS valid:

.replace(/([>+~])\s*(?=$|[,)])/g, '$1 *')

This handles your exact case: .ck.ck-list .ck-list__item > :focus → after removing :focus → .ck.ck-list .ck-list__item > * [1].

Please upgrade to a Storybook version that includes this fix and retest. If you're on storybook-addon-pseudo-states 10.4.6, check for a newer release that incorporates PR #35060.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.