fix(scope-css): process layer selectors

[wessmeister]

What is the current behavior?

scopeCss does not traverse @layer blocks. Selectors for elements inside a layer are therefore left unscoped.

This also affects shadow components rendered with serializeShadowRoot: 'scoped'. Their server generated CSS omits the original selector annotation inside @layer. During client hydration, convertScopedToShadow cannot restore selectors such as :host, so the shadow stylesheet retains a scoped class that cannot match the host and its styles stop applying.

GitHub Issue Number: #6857

What is the new behavior?

scopeCss now processes @layer alongside its other supported grouping rules. The same predicate is used when scoping selectors and preserving original selector annotations. Annotation also recurses through nested supported grouping rules, so combinations such as @layer containing @media restore correctly during client hydration.

Documentation

N/A

Does this introduce a breaking change?

• Yes
• No

Testing

• Added focused unit coverage for layer scoping and nested original selector annotations.
• Ran the focused scope-css test suite, repository lint, and production build.
• Reproduced the failure with Stencil 4.44.2 and verified the locally packed fix in Chrome 152 using the standalone reproduction.

Other information

Minimal reproduction: https://github.com/wessmeister/stencil-scoped-layer-repro

[Copilot]

🟢 Approval recommended

The change is narrowly scoped, consistent with existing grouping-rule handling, and includes targeted unit tests for both scoping and selector-annotation recursion.

Pull request overview

This PR fixes scopeCss scoping and selector-annotation behavior inside @layer blocks so that scoped CSS is generated consistently and hydration can correctly restore original selectors (e.g., :host) even when rules are nested inside grouping at-rules.

Changes:

• Extend selector scoping to recurse into @layer using the same grouping-rule handling as @media/@supports/@page/@document.
• Make “original selector” annotations recursive through nested supported grouping rules so convertScopedToShadow can restore selectors during hydration.
• Add unit tests covering @layer scoping and nested grouping-rule selector preservation.

File summaries

File	Description
src/utils/shadow-css.ts	Adds @layer to the set of grouping at-rules traversed during scoping and recursively annotates selectors through nested grouping rules.
src/utils/test/scope-css.spec.ts	Adds unit coverage for scoping inside @layer and preserving original selectors through nested grouping rules.

Review details

• Files reviewed: 2/2 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🟢 Approval recommended

The change is narrowly scoped, uses a single shared predicate for grouping rules, and is backed by both unit tests and an SSR hydration fixture update covering the reported failure mode.

Review details

• Files reviewed: 3/3 changed files
• Comments generated: 0 new
• Review effort level: Lite

[Copilot]

🟢 Approval recommended

The change is narrowly scoped, aligns with existing at-rule traversal behavior, and is backed by focused unit tests for the reported failure mode.

Review details

• Files reviewed: 2/2 changed files
• Comments generated: 0 new
• Review effort level: Lite

[github-actions]

Runtime Benchmark

• 9 untouched benchmarks
• 0 improved benchmarks
• 0 regressed benchmarks

[codspeed-hq]

Merging this PR will not alter performance

✅ 2 untouched benchmarks

---

_{Comparing wessmeister:fix/scoped-css-layer-selectors (3da65af) with main (7a8cc6e)}

[johnjenkins]

lgtm - tysm!