CSS variable

src/Languages/Css/CssLanguage.php

@@ -9,6 +9,7 @@
 use Tempest\Highlight\Languages\Css\Patterns\CssCommentPattern;
 use Tempest\Highlight\Languages\Css\Patterns\CssFunctionPattern;
 use Tempest\Highlight\Languages\Css\Patterns\CssSelectorPattern;
+use Tempest\Highlight\Languages\Css\Patterns\CssVariablePattern;
 
 class CssLanguage extends BaseLanguage
 {
@@ -27,6 +28,7 @@ public function getPatterns(): array
             new CssSelectorPattern(),
             new CssAttributePattern(),
             new CssFunctionPattern(),
+            new CssVariablePattern(),
         ];
     }
 }

src/Languages/Css/Patterns/CssVariablePattern.php

@@ -0,0 +1,27 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Languages\Css\Patterns;
+
+use Tempest\Highlight\IsPattern;
+use Tempest\Highlight\Pattern;
+use Tempest\Highlight\PatternTest;
+use Tempest\Highlight\Tokens\TokenType;
+
+#[PatternTest(input: '--var-name: foo', output: '--var-name')]
+#[PatternTest(input: 'var(--var-name)', output: '--var-name')]
+final readonly class CssVariablePattern implements Pattern
+{
+    use IsPattern;
+
+    public function getPattern(): string
+    {
+        return '(?<match>\-\-[\w\-]+)';
+    }
+
+    public function getTokenType(): TokenType
+    {
+        return TokenType::PROPERTY;
+    }
+}

tests/Languages/Css/CssLanguageTest.php

@@ -0,0 +1,43 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Tempest\Highlight\Tests\Languages\Css;
+
+use PHPUnit\Framework\Attributes\DataProvider;
+use PHPUnit\Framework\TestCase;
+use Tempest\Highlight\Highlighter;
+
+class CssLanguageTest extends TestCase
+{
+    #[DataProvider('data')]
+    public function test_highlight(string $content, string $expected): void
+    {
+        $highlighter = new Highlighter();
+
+        $this->assertSame(
+            $expected,
+            $highlighter->parse($content, 'css'),
+        );
+    }
+
+    public static function data(): array
+    {
+        return [
+            [
+                <<<TXT
+.foo {
+    --var: bar;
+    color: var(--var);
+}
+TXT,
+                <<<TXT
+<span class="hl-keyword">.foo </span>{
+    <span class="hl-property">--var</span>: bar;
+    <span class="hl-property">color</span>: <span class="hl-keyword">var</span>(<span class="hl-property">--var</span>);
+}
+TXT,
+            ],
+        ];
+    }
+}

tests/test.md

@@ -1,3 +1,6 @@
-```php
-$this->extends('View/base.view.php');
+```css
+.foo {
+    --var: bar;
+    color: var(--var);
+}
 ```