Add support for modern CSS at-rules @layer, @scope, and @starting-style

CHANGELOG.md

@@ -10,6 +10,8 @@ Please also have a look at our
 
 ### Added
 
+- Add support for modern CSS at-rules: `@layer`, `@scope`, and `@starting-style` (#1549)
+
 ### Changed
 
 ### Deprecated

src/Property/AtRule.php

@@ -15,10 +15,12 @@ interface AtRule extends CSSListItem
     /**
      * Since there are more set rules than block rules,
      * we’re whitelisting the block rules and have anything else be treated as a set rule.
+     * NOTE: The new line when assigning the value is added to avoid the line length limit of codesniffer.
      *
      * @internal since 8.5.2
      */
-    public const BLOCK_RULES = 'media/document/supports/region-style/font-feature-values/container';
+    public const BLOCK_RULES =
+        'media/document/supports/region-style/font-feature-values/container/layer/scope/starting-style';
 
     /**
      * @return non-empty-string

tests/CSSList/AtRuleBlockListTest.php

@@ -51,6 +51,21 @@ public static function provideSyntacticallyCorrectAtRule(): array
             'container' => [
                 '@container (min-width: 60rem) { .items { background: blue; } }',
             ],
+            'layer named' => [
+                '@layer theme { .button { color: blue; } }',
+            ],
+            'layer anonymous' => [
+                '@layer { .card { padding: 1rem; } }',
+            ],
+            'scope with selector' => [
+                '@scope (.card) { .title { font-size: 2rem; } }',
+            ],
+            'scope root only' => [
+                '@scope { .content { margin: 0; } }',
+            ],
+            'starting-style' => [
+                '@starting-style { .dialog { opacity: 0; transform: translateY(-10px); } }',
+            ],
         ];
     }
 
@@ -94,4 +109,131 @@ public function parsesSyntacticallyCorrectAtRuleInStrictMode(string $css): void
 
         self::assertNotEmpty($contents, 'Failing CSS: `' . $css . '`');
     }
+
+    /**
+     * @test
+     */
+    public function parsesLayerWithNamedArgument(): void
+    {
+        $css = '@layer theme { .button { color: blue; } }';
+        $contents = (new Parser($css))->parse()->getContents();
+        $atRuleBlockList = $contents[0];
+
+        self::assertInstanceOf(AtRuleBlockList::class, $atRuleBlockList);
+        self::assertSame('layer', $atRuleBlockList->atRuleName());
+        self::assertSame('theme', $atRuleBlockList->atRuleArgs());
+
+        $nestedContents = $atRuleBlockList->getContents();
+        self::assertCount(1, $nestedContents, 'Layer should contain one declaration block');
+    }
+
+    /**
+     * @test
+     */
+    public function parsesLayerWithoutArguments(): void
+    {
+        $css = '@layer { .card { padding: 1rem; } }';
+        $contents = (new Parser($css))->parse()->getContents();
+        $atRuleBlockList = $contents[0];
+
+        self::assertInstanceOf(AtRuleBlockList::class, $atRuleBlockList);
+        self::assertSame('layer', $atRuleBlockList->atRuleName());
+        self::assertSame('', $atRuleBlockList->atRuleArgs());
+
+        $nestedContents = $atRuleBlockList->getContents();
+        self::assertCount(1, $nestedContents, 'Layer should contain one declaration block');
+    }
+
+    /**
+     * @test
+     */
+    public function parsesScopeWithSelector(): void
+    {
+        $css = '@scope (.card) { .title { font-size: 2rem; } }';
+        $contents = (new Parser($css))->parse()->getContents();
+        $atRuleBlockList = $contents[0];
+
+        self::assertInstanceOf(AtRuleBlockList::class, $atRuleBlockList);
+        self::assertSame('scope', $atRuleBlockList->atRuleName());
+        self::assertSame('(.card)', $atRuleBlockList->atRuleArgs());
+
+        $nestedContents = $atRuleBlockList->getContents();
+        self::assertCount(1, $nestedContents, 'Scope should contain one declaration block');
+    }
+
+    /**
+     * @test
+     */
+    public function parsesScopeWithoutSelector(): void
+    {
+        $css = '@scope { .content { margin: 0; } }';
+        $contents = (new Parser($css))->parse()->getContents();
+        $atRuleBlockList = $contents[0];
+
+        self::assertInstanceOf(AtRuleBlockList::class, $atRuleBlockList);
+        self::assertSame('scope', $atRuleBlockList->atRuleName());
+        self::assertSame('', $atRuleBlockList->atRuleArgs());
+
+        $nestedContents = $atRuleBlockList->getContents();
+        self::assertCount(1, $nestedContents, 'Scope should contain one declaration block');
+    }
+
+    /**
+     * @test
+     */
+    public function parsesStartingStyle(): void
+    {
+        $css = '@starting-style { .dialog { opacity: 0; transform: translateY(-10px); } }';
+        $contents = (new Parser($css))->parse()->getContents();
+        $atRuleBlockList = $contents[0];
+
+        self::assertInstanceOf(AtRuleBlockList::class, $atRuleBlockList);
+        self::assertSame('starting-style', $atRuleBlockList->atRuleName());
+        self::assertSame('', $atRuleBlockList->atRuleArgs());
+
+        $nestedContents = $atRuleBlockList->getContents();
+        self::assertCount(1, $nestedContents, 'Starting-style should contain one declaration block');
+    }
+
+    /**
+     * @test
+     */
+    public function rendersLayerCorrectly(): void
+    {
+        $css = '@layer theme { .button { color: blue; } }';
+        $document = (new Parser($css))->parse();
+        $rendered = $document->render();
+
+        self::assertStringContainsString('@layer theme', $rendered);
+        self::assertStringContainsString('.button', $rendered);
+        self::assertStringContainsString('color: blue', $rendered);
+    }
+
+    /**
+     * @test
+     */
+    public function rendersScopeCorrectly(): void
+    {
+        $css = '@scope (.card) { .title { font-size: 2rem; } }';
+        $document = (new Parser($css))->parse();
+        $rendered = $document->render();
+
+        self::assertStringContainsString('@scope (.card)', $rendered);
+        self::assertStringContainsString('.title', $rendered);
+        self::assertStringContainsString('font-size: 2rem', $rendered);
+    }
+
+    /**
+     * @test
+     */
+    public function rendersStartingStyleCorrectly(): void
+    {
+        $css = '@starting-style { .dialog { opacity: 0; } }';
+        $document = (new Parser($css))->parse();
+        $rendered = $document->render();
+
+        self::assertStringContainsString('@starting-style', $rendered);
+        self::assertStringContainsString('.dialog', $rendered);
+        self::assertStringContainsString('opacity: 0', $rendered);
+    }
 }

tests/Unit/Property/AtRuleTest.php

@@ -18,7 +18,17 @@ final class AtRuleTest extends TestCase
     public function blockRulesConstantIsCorrect(): void
     {
         self::assertEqualsCanonicalizing(
-            ['media', 'document', 'supports', 'region-style', 'font-feature-values', 'container'],
+            [
+                'media',
+                'document',
+                'supports',
+                'region-style',
+                'font-feature-values',
+                'container',
+                'layer',
+                'scope',
+                'starting-style',
+            ],
             explode('/', AtRule::BLOCK_RULES)
         );
     }