From fffa023803e5b04a58f0bd0b8667ee8b686aa530 Mon Sep 17 00:00:00 2001 From: JoostK Date: Sat, 19 Mar 2022 15:08:15 +0100 Subject: [PATCH] fix(compiler): scope css rules within `@layer` blocks (#45396) This commit starts scoping CSS rules nested within `@layer` blocks. Fixes #45389 PR Close #45396 --- packages/compiler/src/shadow_css.ts | 2 +- packages/compiler/test/shadow_css_spec.ts | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts index 224c8293d30..9c793c2a358 100644 --- a/packages/compiler/src/shadow_css.ts +++ b/packages/compiler/src/shadow_css.ts @@ -370,7 +370,7 @@ export class ShadowCss { this._scopeSelector(rule.selector, scopeSelector, hostSelector, this.strictStyling); } else if ( rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') || - rule.selector.startsWith('@document')) { + rule.selector.startsWith('@document') || rule.selector.startsWith('@layer')) { content = this._scopeSelectors(rule.content, scopeSelector, hostSelector); } else if (rule.selector.startsWith('@font-face') || rule.selector.startsWith('@page')) { content = this._stripScopingSelectors(rule.content); diff --git a/packages/compiler/test/shadow_css_spec.ts b/packages/compiler/test/shadow_css_spec.ts index 574815ec5c3..90f50d876e3 100644 --- a/packages/compiler/test/shadow_css_spec.ts +++ b/packages/compiler/test/shadow_css_spec.ts @@ -120,6 +120,12 @@ import {normalizeCSS} from '@angular/platform-browser/testing/src/browser_util'; expect(s(css, 'contenta')).toEqual(expected); }); + it('should handle layer rules', () => { + const css = '@layer utilities {section {display: flex;}}'; + const expected = '@layer utilities {section[contenta] {display:flex;}}'; + expect(s(css, 'contenta')).toEqual(expected); + }); + // Check that the browser supports unprefixed CSS animation it('should handle keyframes rules', () => { const css = '@keyframes foo {0% {transform:translate(-50%) scaleX(0);}}';