Fixed CSS custom properties escaping @layer in StyleX
Custom properties were breaking out of @layer boundaries when useCSSLayers was enabled, allowing external styles to incorrectly override layered rules.
What
The layer-wrap decision was made once per rule group based on the first sorted rule. When a priority-0 at-rule sorted first, it forced the entire group outside the layer. I changed the logic to decide per-rule instead of per-group, so each rule respects its own layer status.
Why
The old approach treated all rules in a group as a unit for layering. This meant one unlayered at-rule could pull the whole group out, breaking cascade precedence. Per-rule decisions let custom properties stay layered when they should be, letting @layer overrides work correctly.
Takeaway
Grouping optimization can hide per-item requirements. Testing cascade behavior across different rule types caught this.
Building an AI agent?
I'm packaging how I ship them into one kit. Early access:
AI Agent Starter Kit →