Addon-Pseudo-States: Fix pseudo-states rewriting for nested functional selectors by filipw01 · Pull Request #34318 · storybookjs/storybook

filipw01 · 2026-03-25T12:53:42Z

What I did

Fixed storybook-addon-pseudo-states rewriting for pseudo states nested inside functional selectors like :has(span + :hover).
Previously it would try to insert :has(span > ) which is an invalid selector

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

Caution

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Manual testing not performed in a Storybook sandbox.

Enable storybook-addon-pseudo-states in a Storybook instance.
Add a component with CSS that includes a selector like :has(span > :hover) and enable hover pseudo state.
Open the story
Confirm no insertRule() error is thrown and the rewritten selector behaves as expected.

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

Bug Fixes
- Improved pseudo-state selector rewriting for cases where combinators appear inside functional pseudo-class parameters (e.g., :has()).
- Prevented selector corruption when pseudo-state conditions are removed or rewritten by repairing the selector structure.
- Preserved the original pseudo-state entry while generating the expected alternative selector rules for both direct matches and ancestor targeting.
Tests
- Added a new test case covering pseudo-state rewriting within complex :has() selectors containing combinators.

coderabbitai · 2026-03-25T12:59:13Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5952762c-8ae3-4d06-83c2-82074f1de5f2

📥 Commits

Reviewing files that changed from the base of the PR and between 9db9a6c and e6f5fc1.

📒 Files selected for processing (1)

code/addons/pseudo-states/src/preview/rewriteStyleSheet.ts

🚧 Files skipped from review as they are similar to previous changes (1)

code/addons/pseudo-states/src/preview/rewriteStyleSheet.ts

📝 Walkthrough

Walkthrough

extractPseudoStates() now inserts universal selectors before removing pseudo-states that follow combinators or opening parentheses. A new test verifies rewriting of :has(span > :hover) into direct and ancestor-targeting alternatives.

Changes

Pseudo-state selector rewriting

Layer / File(s)	Summary
Nested pseudo-state selector rewriting `code/addons/pseudo-states/src/preview/rewriteStyleSheet.ts`, `code/addons/pseudo-states/src/preview/rewriteStyleSheet.test.ts`	Adds `selectorStartPattern`, changes selector repair in `extractPseudoStates()`, and tests nested `:has(...)` selectors containing combinators.

Estimated code review effort: 2 (Simple) | ~10 minutes

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

valentinpalkovic · 2026-03-30T07:26:52Z

Hi @filipw01,

Thank you for your contribution. Due to the high volume of incoming PRs, we are gently requesting that you either link a GitHub issue to the PR or provide a simple reproduction, ideally with a video or image showing the issue and its resolution! Thank you very much!

storybook-app-bot · 2026-03-30T07:46:00Z

Package Benchmarks

^{Commit: 1a48807, ran on 28 August 2026 at 10:19:22 UTC}

The following packages have significant changes to their size or dependencies:

`@storybook/addon-mcp`

	Before	After	Difference
Dependency count	11	13	🚨 +2 🚨
Self size	107 KB	191 KB	🚨 +84 KB 🚨
Dependency size	2.74 MB	2.89 MB	🚨 +146 KB 🚨
Bundle Size Analyzer	Link	Link

`storybook-addon-pseudo-states`

	Before	After	Difference
Dependency count	0	0	0
Self size	24 KB	21 KB	🎉 -3 KB 🎉
Dependency size	686 B	689 B	🚨 +3 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-vitest`

	Before	After	Difference
Dependency count	2	2	0
Self size	466 KB	429 KB	🎉 -36 KB 🎉
Dependency size	350 KB	350 KB	🚨 +3 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/builder-vite`

	Before	After	Difference
Dependency count	1	11	🚨 +10 🚨
Self size	136 KB	136 KB	🎉 -364 B 🎉
Dependency size	28 KB	1.33 MB	🚨 +1.30 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/builder-webpack5`

	Before	After	Difference
Dependency count	182	182	0
Self size	92 KB	79 KB	🎉 -13 KB 🎉
Dependency size	37.43 MB	37.43 MB	🚨 +9 B 🚨
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	73	73	0
Self size	22.04 MB	21.39 MB	🎉 -650 KB 🎉
Dependency size	31.20 MB	30.98 MB	🎉 -218 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/angular`

	Before	After	Difference
Dependency count	185	185	0
Self size	267 KB	160 KB	🎉 -107 KB 🎉
Dependency size	30.29 MB	30.28 MB	🎉 -13 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/angular-vite`

	Before	After	Difference
Dependency count	20	29	🚨 +9 🚨
Self size	23.08 MB	22.83 MB	🎉 -247 KB 🎉
Dependency size	11.49 MB	12.69 MB	🚨 +1.21 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/ember`

	Before	After	Difference
Dependency count	181	181	0
Self size	13 KB	13 KB	🎉 -15 B 🎉
Dependency size	32.79 MB	32.77 MB	🎉 -13 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/html-vite`

	Before	After	Difference
Dependency count	4	14	🚨 +10 🚨
Self size	22 KB	22 KB	🚨 +4 B 🚨
Dependency size	199 KB	1.50 MB	🚨 +1.30 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/nextjs`

	Before	After	Difference
Dependency count	536	527	🎉 -9 🎉
Self size	641 KB	641 KB	🎉 -174 B 🎉
Dependency size	64.69 MB	64.14 MB	🎉 -549 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/nextjs-vite`

	Before	After	Difference
Dependency count	101	94	🎉 -7 🎉
Self size	1.42 MB	1.42 MB	🎉 -922 B 🎉
Dependency size	23.32 MB	23.90 MB	🚨 +580 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/preact-vite`

	Before	After	Difference
Dependency count	4	14	🚨 +10 🚨
Self size	12 KB	12 KB	🚨 +4 B 🚨
Dependency size	217 KB	1.52 MB	🚨 +1.30 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-native-web-vite`

	Before	After	Difference
Dependency count	122	125	🚨 +3 🚨
Self size	29 KB	29 KB	🎉 -13 B 🎉
Dependency size	25.71 MB	25.91 MB	🚨 +204 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-vite`

	Before	After	Difference
Dependency count	79	83	🚨 +4 🚨
Self size	32 KB	32 KB	🎉 -245 B 🎉
Dependency size	20.44 MB	21.21 MB	🚨 +770 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/server-webpack5`

	Before	After	Difference
Dependency count	194	194	0
Self size	15 KB	15 KB	🚨 +17 B 🚨
Dependency size	38.70 MB	38.69 MB	🎉 -13 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/svelte-vite`

	Before	After	Difference
Dependency count	11	20	🚨 +9 🚨
Self size	54 KB	54 KB	🚨 +16 B 🚨
Dependency size	25.47 MB	26.67 MB	🚨 +1.20 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/sveltekit`

	Before	After	Difference
Dependency count	12	21	🚨 +9 🚨
Self size	56 KB	56 KB	🚨 +5 B 🚨
Dependency size	25.52 MB	26.73 MB	🚨 +1.20 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/tanstack-react`

	Before	After	Difference
Dependency count	80	84	🚨 +4 🚨
Self size	132 KB	113 KB	🎉 -19 KB 🎉
Dependency size	20.47 MB	21.24 MB	🚨 +769 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/vue3-vite`

	Before	After	Difference
Dependency count	94	103	🚨 +9 🚨
Self size	32 KB	34 KB	🚨 +3 KB 🚨
Dependency size	18.54 MB	43.15 MB	🚨 +24.62 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/web-components-vite`

	Before	After	Difference
Dependency count	5	15	🚨 +10 🚨
Self size	19 KB	19 KB	🚨 +16 B 🚨
Dependency size	266 KB	1.56 MB	🚨 +1.30 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	205	205	0
Self size	869 KB	829 KB	🎉 -40 KB 🎉
Dependency size	87.61 MB	86.73 MB	🎉 -879 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	198	198	0
Self size	44 KB	32 KB	🎉 -12 KB 🎉
Dependency size	86.08 MB	85.21 MB	🎉 -869 KB 🎉
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	74	74	0
Self size	1.09 MB	1.09 MB	🚨 +1 KB 🚨
Dependency size	53.24 MB	52.38 MB	🎉 -869 KB 🎉
Bundle Size Analyzer	node	node

`@storybook/csf-plugin`

	Before	After	Difference
Dependency count	0	9	🚨 +9 🚨
Self size	0 B	7 KB	🚨 +7 KB 🚨
Dependency size	0 B	1.29 MB	🚨 +1.29 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/mcp`

	Before	After	Difference
Dependency count	11	11	0
Self size	151 KB	107 KB	🎉 -43 KB 🎉
Dependency size	2.74 MB	2.74 MB	🚨 +896 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react`

	Before	After	Difference
Dependency count	59	59	0
Self size	1.46 MB	1.48 MB	🚨 +16 KB 🚨
Dependency size	12.28 MB	12.28 MB	🚨 +13 B 🚨
Bundle Size Analyzer	Link	Link

`@storybook/vue3`

	Before	After	Difference
Dependency count	90	4	🎉 -86 🎉
Self size	184 KB	68 KB	🎉 -116 KB 🎉
Dependency size	18.11 MB	584 KB	🎉 -17.53 MB 🎉
Bundle Size Analyzer	Link	Link

filipw01 · 2026-03-30T08:09:12Z

@valentinpalkovic this is an error I'm getting in storybook, the best reproduction is the test I added in the PR. It's failing without my changes

Sidnioulz · 2026-07-13T09:00:14Z

Sorry for the delay in reviewing this PR, @filipw01! We had a similar one come in and I thought I had merged yours.

Could you please look at the conflicts? The other PR also handles *, with a slightly different approach than yours as it was investigating selector specificity, IIRC.

…as-rewrite # Conflicts: # code/addons/pseudo-states/src/preview/rewriteStyleSheet.ts

filipw01 · 2026-07-18T19:07:07Z

@Sidnioulz Done, I think that should be good

github-actions · 2026-08-17T13:50:56Z

	Fails
🚫	`node` failed.

Log

Details

Error:  Error: Could not find the Dangerfile at scripts/dangerfile.ts - if it is local, perhaps you have a typo? If it's using a remote file, it doesn't have a repo reference.
    at /usr/src/danger/dist/platforms/GitHub.js:161:27
    at step (/usr/src/danger/dist/platforms/GitHub.js:44:23)
    at Object.next (/usr/src/danger/dist/platforms/GitHub.js:25:53)
    at /usr/src/danger/dist/platforms/GitHub.js:19:71
    at new Promise (<anonymous>)
    at __awaiter (/usr/src/danger/dist/platforms/GitHub.js:15:12)
    at Object.executeRuntimeEnvironment (/usr/src/danger/dist/platforms/GitHub.js:144:88)
    at /usr/src/danger/dist/commands/danger-runner.js:101:47
    at step (/usr/src/danger/dist/commands/danger-runner.js:34:23)
    at Object.next (/usr/src/danger/dist/commands/danger-runner.js:15:53)
danger-results://tmp/danger-results-a2b90b43.json

Generated by 🚫 dangerJS against 1a48807

Fix pseudo-states rewriting for :has selectors

ddbccf6

filipw01 changed the title ~~Fix pseudo-states rewriting for :has selectors~~ Fix pseudo-states rewriting for nested functional selectors Mar 26, 2026

valentinpalkovic added this to Core Team Projects Mar 30, 2026

valentinpalkovic moved this to Empathy Queue (prioritized) in Core Team Projects Mar 30, 2026

valentinpalkovic changed the title ~~Fix pseudo-states rewriting for nested functional selectors~~ Addon-Pseudo-States: Fix pseudo-states rewriting for nested functional selectors Mar 30, 2026

valentinpalkovic added the bug label Mar 30, 2026

valentinpalkovic added addon: pseudo-states ci:normal Run our default set of CI jobs (choose this for most PRs). labels Mar 30, 2026

github-actions Bot added the Stale label Apr 10, 2026

Sidnioulz self-requested a review June 18, 2026 09:05

Sidnioulz self-assigned this Jun 18, 2026

github-actions Bot added needs triage and removed Stale labels Jun 20, 2026

Sidnioulz approved these changes Jul 13, 2026

View reviewed changes

Sidnioulz removed the needs triage label Jul 13, 2026

valentinpalkovic added the sev:S3 Medium priority. Fix within months if possible. label Jul 14, 2026

filipw01 requested review from jonniebigodes and kylegach as code owners July 18, 2026 17:39

filipw01 force-pushed the fix/pseudo-states-has-rewrite branch from cab8034 to ddbccf6 Compare July 18, 2026 17:50

filipw01 added 2 commits July 18, 2026 19:52

Merge remote-tracking branch 'upstream/next' into fix/pseudo-states-h…

9db9a6c

…as-rewrite # Conflicts: # code/addons/pseudo-states/src/preview/rewriteStyleSheet.ts

style(pseudo-states): Format stylesheet

e6f5fc1

valentinpalkovic added the qa:needed Pull Requests that will need manual QA prior to release. label Jul 31, 2026

Merge branch 'next' into fix/pseudo-states-has-rewrite

1a48807

valentinpalkovic requested a review from a team July 31, 2026 20:41

Sidnioulz enabled auto-merge August 3, 2026 07:02

Sidnioulz merged commit c67c544 into storybookjs:next Aug 3, 2026
131 checks passed

github-project-automation Bot moved this to Done in Core Team Projects Aug 3, 2026

github-actions Bot mentioned this pull request Aug 3, 2026

Release: Prerelease 10.6.0-alpha.4 #35617

Merged

2 tasks done

This was referenced Aug 7, 2026

Pseudo-States: Make stylesheet rewrites WebKit-safe #35629

Merged

Addon-Pseudostates: Preserve zero specificity of :where() when rewriting selectors #35838

Open

ndelangen added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Aug 17, 2026

github-actions Bot mentioned this pull request Aug 17, 2026

Release: Patch 10.5.9 #35918

Merged

5 tasks done

ndelangen added the patch:done Patch/release PRs already cherry-picked to main/release branch label Aug 18, 2026

This was referenced Aug 19, 2026

chore(deps): bump all-patch-updates dependencies brandhaug/b2b-saas-starter#70

Closed

chore(deps): bump all-patch-updates dependencies brandhaug/b2b-saas-starter#108

Merged

yannbf added qa:success Pull Requests that were successfully QA'ed by the release team. and removed qa:needed Pull Requests that will need manual QA prior to release. labels Aug 28, 2026

Navigation Menu

Uh oh!

Addon-Pseudo-States: Fix pseudo-states rewriting for nested functional selectors - #34318

Addon-Pseudo-States: Fix pseudo-states rewriting for nested functional selectors#34318
Sidnioulz merged 4 commits into
storybookjs:nextfrom
filipw01:fix/pseudo-states-has-rewrite

filipw01 commented Mar 25, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Mar 25, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

valentinpalkovic commented Mar 30, 2026

Uh oh!

storybook-app-bot Bot commented Mar 30, 2026 •

edited

Loading

Uh oh!

filipw01 commented Mar 30, 2026

Uh oh!

Sidnioulz commented Jul 13, 2026

Uh oh!

filipw01 commented Jul 18, 2026

Uh oh!

Uh oh!

github-actions Bot commented Aug 17, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

filipw01 commented Mar 25, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

valentinpalkovic commented Mar 30, 2026

Uh oh!

storybook-app-bot Bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package Benchmarks

@storybook/addon-mcp

storybook-addon-pseudo-states

@storybook/addon-vitest

@storybook/builder-vite

@storybook/builder-webpack5

storybook

@storybook/angular

@storybook/angular-vite

@storybook/ember

@storybook/html-vite

@storybook/nextjs

@storybook/nextjs-vite

@storybook/preact-vite

@storybook/react-native-web-vite

@storybook/react-vite

@storybook/server-webpack5

@storybook/svelte-vite

@storybook/sveltekit

@storybook/tanstack-react

@storybook/vue3-vite

@storybook/web-components-vite

@storybook/cli

@storybook/codemod

create-storybook

@storybook/csf-plugin

@storybook/mcp

@storybook/react

@storybook/vue3

Uh oh!

filipw01 commented Mar 30, 2026

Uh oh!

Sidnioulz commented Jul 13, 2026

Uh oh!

filipw01 commented Jul 18, 2026

Uh oh!

Uh oh!

github-actions Bot commented Aug 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Log

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

filipw01 commented Mar 25, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Mar 25, 2026 •

edited

Loading

storybook-app-bot Bot commented Mar 30, 2026 •

edited

Loading

`@storybook/addon-mcp`

`storybook-addon-pseudo-states`

`@storybook/addon-vitest`

`@storybook/builder-vite`

`@storybook/builder-webpack5`

`storybook`

`@storybook/angular`

`@storybook/angular-vite`

`@storybook/ember`

`@storybook/html-vite`

`@storybook/nextjs`

`@storybook/nextjs-vite`

`@storybook/preact-vite`

`@storybook/react-native-web-vite`

`@storybook/react-vite`

`@storybook/server-webpack5`

`@storybook/svelte-vite`

`@storybook/sveltekit`

`@storybook/tanstack-react`

`@storybook/vue3-vite`

`@storybook/web-components-vite`

`@storybook/cli`

`@storybook/codemod`

`create-storybook`

`@storybook/csf-plugin`

`@storybook/mcp`

`@storybook/react`

`@storybook/vue3`

github-actions Bot commented Aug 17, 2026 •

edited

Loading