feat(compiler): scope selectors in @starting-style (#53943)

make sure selectors inside @starting-style queries are correctly scoped

PR Close #53943

packages/compiler/src/shadow_css.ts

@@ -26,6 +26,12 @@ const animationKeywords = new Set([
   'end', 'jump-both', 'jump-end', 'jump-none', 'jump-start', 'start'
 ]);
 
+/**
+ * The following array contains all of the CSS at-rule identifiers which are scoped.
+ */
+const scopedAtRuleIdentifiers =
+    ['@media', '@supports', '@document', '@layer', '@container', '@scope', '@starting-style'];
+
 /**
  * The following class has its origin from a port of shadowCSS from webcomponents.js to TypeScript.
  * It has since diverge in many ways to tailor Angular's needs.
@@ -557,10 +563,7 @@ export class ShadowCss {
       let content = rule.content;
       if (rule.selector[0] !== '@') {
         selector = this._scopeSelector(rule.selector, scopeSelector, hostSelector);
-      } else if (
-          rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
-          rule.selector.startsWith('@document') || rule.selector.startsWith('@layer') ||
-          rule.selector.startsWith('@container') || rule.selector.startsWith('@scope')) {
+      } else if (scopedAtRuleIdentifiers.some(atRule => rule.selector.startsWith(atRule))) {
         content = this._scopeSelectors(rule.content, scopeSelector, hostSelector);
       } else if (rule.selector.startsWith('@font-face') || rule.selector.startsWith('@page')) {
         content = this._stripScopingSelectors(rule.content);

packages/compiler/test/shadow_css/at_rules_spec.ts

@@ -216,4 +216,20 @@ describe('ShadowCss, at-rules', () => {
       expect(shim(css, 'contenta')).toEqualCss(expected);
     });
   });
+
+  describe('@starting-style', () => {
+    it('should scope normal selectors inside a starting-style rule', () => {
+      const css = `
+          @starting-style {
+              img { border-radius: 50%; }
+              .content { padding: 1em; }
+          }`;
+      const result = shim(css, 'host-a');
+      expect(result).toEqualCss(`
+        @starting-style {
+          img[host-a] { border-radius: 50%; }
+          .content[host-a] { padding: 1em; }
+        }`);
+    });
+  });
 });