Add support for modern CSS at-rules @layer, @scope, and @starting-style (#1549)

Author: samuil-banti-wpenigne

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

@@ -18,7 +18,8 @@ interface AtRule extends CSSListItem
      *
      * @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,24 @@ 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; } }',
+            ],
+            'scope with limit' => [
+                '@scope (.article-body) to (figure) { h2 { color: red; } }',
+            ],
+            'starting-style' => [
+                '@starting-style { .dialog { opacity: 0; transform: translateY(-10px); } }',
+            ],
         ];
     }
 
@@ -94,4 +112,110 @@ public function parsesSyntacticallyCorrectAtRuleInStrictMode(string $css): void
 
         self::assertNotEmpty($contents, 'Failing CSS: `' . $css . '`');
     }
+
+    /**
+     * @return array<string, array{0: string, 1: string, 2: string, 3: int}>
+     */
+    public static function provideAtRuleParsingData(): array
+    {
+        return [
+            'layer with named argument' => [
+                '@layer theme { .button { color: blue; } }',
+                'layer',
+                'theme',
+                1,
+            ],
+            'layer without arguments' => [
+                '@layer { .card { padding: 1rem; } }',
+                'layer',
+                '',
+                1,
+            ],
+            'scope with selector' => [
+                '@scope (.card) { .title { font-size: 2rem; } }',
+                'scope',
+                '(.card)',
+                1,
+            ],
+            'scope without selector' => [
+                '@scope { .content { margin: 0; } }',
+                'scope',
+                '',
+                1,
+            ],
+            'scope with limit' => [
+                '@scope (.article-body) to (figure) { h2 { color: red; } }',
+                'scope',
+                '(.article-body) to (figure)',
+                1,
+            ],
+            'starting-style' => [
+                '@starting-style { .dialog { opacity: 0; transform: translateY(-10px); } }',
+                'starting-style',
+                '',
+                1,
+            ],
+        ];
+    }
+
+    /**
+     * @return array<string, array{0: string, 1: list<string>}>
+     */
+    public static function provideAtRuleRenderingData(): array
+    {
+        return [
+            'layer with named argument' => [
+                '@layer theme { .button { color: blue; } }',
+                ['@layer theme', '.button', 'color: blue'],
+            ],
+            'scope with selector' => [
+                '@scope (.card) { .title { font-size: 2rem; } }',
+                ['@scope (.card)', '.title', 'font-size: 2rem'],
+            ],
+            'scope with limit' => [
+                '@scope (.article-body) to (figure) { h2 { color: red; } }',
+                ['@scope (.article-body) to (figure)', 'h2', 'color: red'],
+            ],
+            'starting-style' => [
+                '@starting-style { .dialog { opacity: 0; } }',
+                ['@starting-style', '.dialog', 'opacity: 0'],
+            ],
+        ];
+    }
+
+    /**
+     * @test
+     *
+     * @dataProvider provideAtRuleParsingData
+     */
+    public function parsesAtRuleBlockList(
+        string $css,
+        string $expectedName,
+        string $expectedArgs,
+        int $expectedContentCount
+    ): void {
+        $contents = (new Parser($css))->parse()->getContents();
+        $atRuleBlockList = $contents[0];
+
+        self::assertInstanceOf(AtRuleBlockList::class, $atRuleBlockList);
+        self::assertSame($expectedName, $atRuleBlockList->atRuleName());
+        self::assertSame($expectedArgs, $atRuleBlockList->atRuleArgs());
+        self::assertCount($expectedContentCount, $atRuleBlockList->getContents());
+    }
+
+    /**
+     * @test
+     *
+     * @dataProvider provideAtRuleRenderingData
+     *
+     * @param list<string> $expectedSubstrings
+     */
+    public function rendersAtRuleBlockListCorrectly(string $css, array $expectedSubstrings): void
+    {
+        $rendered = (new Parser($css))->parse()->render();
+
+        foreach ($expectedSubstrings as $expected) {
+            self::assertStringContainsString($expected, $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)
         );
     }