fix(compiler-sfc): preserve leading universal selector when followed by combinator by babu-ch · Pull Request #14549 · vuejs/core

babu-ch · 2026-03-10T10:15:24Z

Summary by CodeRabbit

Tests
- Added comprehensive tests for leading universal selectors with various combinators, nested rules, pseudo-classes (::v-slotted, :is/:where), and at-rule contexts to verify scoped CSS behavior.
Bug Fixes
- Scoped CSS now correctly handles leading universal selectors depending on combinator and nesting, avoiding incorrect attribute injection and preserving intended selector behavior.

…ombinators

coderabbitai · 2026-03-10T10:15:48Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c453386a-4d08-432f-97b6-49ed01a61522

📥 Commits

Reviewing files that changed from the base of the PR and between 78be4a4 and ecde825.

📒 Files selected for processing (2)

packages/compiler-sfc/__tests__/compileStyle.spec.ts
packages/compiler-sfc/src/style/pluginScoped.ts

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

packages/compiler-sfc/tests/compileStyle.spec.ts

📝 Walkthrough

Walkthrough

Preserve leading universal selectors before combinators and modify scoped-selector rewriting to respect nested rule contexts by propagating an isNested flag into rewriteSelector; add tests covering leading and nested universal-selector cases.

Changes

Cohort / File(s)	Summary
Test Coverage `packages/compiler-sfc/__tests__/compileStyle.spec.ts`	Added tests validating preservation and correct rewriting of leading `*` selectors with combinators (`>`, `+`, `~`), nested contexts, `:is()`/`:where()`, `::v-slotted` cases, and `@media` nested scenarios.
Scoped Selector Rewriting `packages/compiler-sfc/src/style/pluginScoped.ts`	Added `isNested` detection in `processRule`, passed `isNested` into `rewriteSelector`; extended `rewriteSelector` signature and logic to avoid injecting scoped attributes in nested contexts and preserve leading `*` before combinators appropriately.

Sequence Diagram(s)

(omitted — changes are localized selector-rewrite logic and tests)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

test(compiler-sfc): direct descendant wildcard rule selector #13411: Targets selector-scoping behavior and tests for leading universal selectors with combinators.
fix(compiler-sfc): add scoping tag to trailing universal selector #12918: Related edits to rewriteSelector in pluginScoped.ts handling universal selector injection.
Revert "fix(compiler-sfc): add scoping tag to trailing universal selector" #13406: Modifies universal-selector handling in rewriteSelector/processRule for scoped styles.

Suggested labels

:\hammer: p3-minor-bug

Suggested reviewers

edison1105
Doctor-wu

Poem

🐰 I hopped through rules both deep and wide,
Kept the little star right by combinator's side.
Nested paths I checked with care and pace,
Scoped selectors tidy — every star in place. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: preserving leading universal selectors when followed by combinators in scoped CSS.
Linked Issues check	✅ Passed	The code changes implement the objective from issue `#13429` by detecting nested contexts and preserving leading universal selectors when followed by combinators.
Out of Scope Changes check	✅ Passed	All changes in the test file and plugin implementation directly address the scope of issue `#13429` with no unrelated modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📝 Coding Plan

Generate coding plan for human review comments

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 and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/compiler-sfc/src/style/pluginScoped.ts`:
- Around line 202-209: The condition in pluginScoped.ts that checks
rule.parent?.type !== 'rule' should be replaced with an ancestor walk to
determine if any ancestor node is a 'rule' (so selectors inside an at-rule
nested within a rule are recognized as nested). Update the check where next.type
=== 'combinator' and next.value === ' ' to compute something like
"hasRuleAncestor" by walking rule.parent up the parent chain until null and
testing node.type === 'rule', then use !hasRuleAncestor instead of
rule.parent?.type !== 'rule' when deciding to remove the combinator and node.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 09a648c9-a51d-4683-8ce3-39e593d1908a

📥 Commits

Reviewing files that changed from the base of the PR and between fdd863f and fb98d8d.

📒 Files selected for processing (2)

packages/compiler-sfc/__tests__/compileStyle.spec.ts
packages/compiler-sfc/src/style/pluginScoped.ts

packages/compiler-sfc/src/style/pluginScoped.ts

…ing universal selector

github-actions · 2026-03-13T02:44:01Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	105 kB	39.7 kB	35.7 kB
vue.global.prod.js	163 kB	59.7 kB	53.1 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.2 kB	18.7 kB	17.2 kB
createApp	56.3 kB	21.8 kB	19.9 kB
createSSRApp	60.6 kB	23.5 kB	21.5 kB
defineCustomElement	62.5 kB	23.7 kB	21.6 kB
overall	70.7 kB	27.1 kB	24.7 kB

pkg-pr-new · 2026-03-13T02:44:03Z

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14549

npm i https://pkg.pr.new/@vue/compiler-core@14549

yarn add https://pkg.pr.new/@vue/compiler-core@14549.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14549

npm i https://pkg.pr.new/@vue/compiler-dom@14549

yarn add https://pkg.pr.new/@vue/compiler-dom@14549.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14549

npm i https://pkg.pr.new/@vue/compiler-sfc@14549

yarn add https://pkg.pr.new/@vue/compiler-sfc@14549.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14549

npm i https://pkg.pr.new/@vue/compiler-ssr@14549

yarn add https://pkg.pr.new/@vue/compiler-ssr@14549.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14549

npm i https://pkg.pr.new/@vue/reactivity@14549

yarn add https://pkg.pr.new/@vue/reactivity@14549.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14549

npm i https://pkg.pr.new/@vue/runtime-core@14549

yarn add https://pkg.pr.new/@vue/runtime-core@14549.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14549

npm i https://pkg.pr.new/@vue/runtime-dom@14549

yarn add https://pkg.pr.new/@vue/runtime-dom@14549.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14549

npm i https://pkg.pr.new/@vue/server-renderer@14549

yarn add https://pkg.pr.new/@vue/server-renderer@14549.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14549

npm i https://pkg.pr.new/@vue/shared@14549

yarn add https://pkg.pr.new/@vue/shared@14549.tgz

vue

pnpm add https://pkg.pr.new/vue@14549

npm i https://pkg.pr.new/vue@14549

yarn add https://pkg.pr.new/vue@14549.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14549

npm i https://pkg.pr.new/@vue/compat@14549

yarn add https://pkg.pr.new/@vue/compat@14549.tgz

commit: daa1681

edison1105 · 2026-03-13T02:57:41Z

packages/compiler-sfc/__tests__/compileStyle.spec.ts

  })
+
+  test('should keep leading universal selector before non-space combinator', () => {
+    // * > .foo: * removed → invalid CSS ` > .foo`


The comment here is unnecessary.

thanks for review!
removed!
0cf3322

…ests

edison1105 · 2026-03-13T03:20:57Z

Here is a regression

repl (expected behavior)
repl with this PR

…ction

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/compiler-sfc/src/style/pluginScoped.ts`:
- Line 104: The recursive rewriteSelector calls do not propagate the isNested
flag, causing nested pseudo-selector branches (e.g., :slotted, :is, :where) to
incorrectly treat universals as non-nested; update every recursive invocation of
rewriteSelector inside the :slotted handler and inside the :is/:where handler
(and similar branches around lines referenced) to pass the current isNested
value through (i.e., rewriteSelector(child, isNested)) so nested contexts keep
the correct flag instead of defaulting to false.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f7523476-eddd-4481-a791-0e7094eca38e

📥 Commits

Reviewing files that changed from the base of the PR and between 0cf3322 and 78be4a4.

📒 Files selected for processing (2)

packages/compiler-sfc/__tests__/compileStyle.spec.ts
packages/compiler-sfc/src/style/pluginScoped.ts

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

packages/compiler-sfc/tests/compileStyle.spec.ts

packages/compiler-sfc/src/style/pluginScoped.ts

babu-ch · 2026-03-13T04:49:30Z

@edison1105 Thanks for the review.
I've fixed the regression and added a test case.

babu-ch added 3 commits March 10, 2026 18:55

fix(compiler-sfc): keep leading universal selector before non-space c…

506f219

…ombinators

fix(compiler-sfc): keep leading universal selector in nested rules

f22dfc6

refactor(compiler-sfc): simplify leading universal selector condition

fb98d8d

coderabbitai bot reviewed Mar 10, 2026

View reviewed changes

packages/compiler-sfc/src/style/pluginScoped.ts Show resolved Hide resolved

fix(compiler-sfc): walk ancestor chain to detect CSS nesting for lead…

121601d

…ing universal selector

edison1105 added the scope: sfc label Mar 13, 2026

edison1105 reviewed Mar 13, 2026

View reviewed changes

refactor(compiler-sfc): remove unnecessary comments in compileStyle t…

0cf3322

…ests

edison1105 added the wait changes label Mar 13, 2026

fix(compiler-sfc): fully walk ancestor chain for deep and nested dete…

78be4a4

…ction

coderabbitai bot reviewed Mar 13, 2026

View reviewed changes

packages/compiler-sfc/src/style/pluginScoped.ts Show resolved Hide resolved

fix(compiler-sfc): propagate isNested to recursive rewriteSelector calls

ecde825

Uh oh!

Conversation

babu-ch commented Mar 10, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Reviews paused

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Mar 13, 2026

Size Report

Bundles

Usages

Uh oh!

pkg-pr-new bot commented Mar 13, 2026

Uh oh!

edison1105 Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

babu-ch Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

edison1105 commented Mar 13, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

babu-ch commented Mar 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

babu-ch commented Mar 10, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 10, 2026 •

edited

Loading