Enabled: Style Directive

soysudhanshu · Jul 18, 2024 · 7a02557 · 7a02557
1 parent 2e754ed
commit 7a02557
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 # Katana
+
 [![Tests](https://github.com/soysudhanshu/katana/actions/workflows/tests.yml/badge.svg)](https://github.com/soysudhanshu/katana/actions/workflows/tests.yml)
 
 Allows you to library provides functionality to render Laravel Blade templates in any PHP project, without requiring the full Laravel framework.
@@ -88,7 +89,6 @@ Template inheritance allows you to create layouts by defining a master template
 | `@hasSection`     | Determines if section content has been defined | ✅     |
 | `@sectionMissing` | Determines if section content is missing       | ✅     |
 
-
 ## Feature List
 
 ### Blade Directives
@@ -131,7 +131,7 @@ Template inheritance allows you to create layouts by defining a master template
 | Directive | Description       | Status |
 | --------- | ----------------- | ------ |
 | `@class`  | Conditional class | ✅     |
-| `@style`  | Conditional style | ❌     |
+| `@style`  | Conditional style | ✅     |
 
 ### Components
 
@@ -168,26 +168,26 @@ Template inheritance allows you to create layouts by defining a master template
 
 ### Directives
 
-| Directive         | Description | Status |
-| ----------------- | ----------- | ------ |
-| `@auth`           |             | ❌     |
-| `@guest`          |             | ❌     |
-| `@production`     |             | ❌     |
-| `@env`            |             | ❌     |
-| `@include`        |             | ❌     |
-| `@session`        |             | ❌     |
-| `@checked`        |             | ❌     |
-| `@disabled`       |             | ❌     |
-| `@readonly`       |             | ❌     |
-| `@required`       |             | ❌     |
-| `@includeIf`      |             | ❌     |
-| `@includeWhen`    |             | ❌     |
-| `@includeUnless`  |             | ❌     |
-| `@includeFirst`   |             | ❌     |
-| `@each`           |             | ❌     |
-| `@once`           |             | ❌     |
-| `@push`           |             | ❌     |
-| `@pushOnce`       |             | ❌     |
-| `@prependOnce`    |             | ❌     |
-| `@php`            |             | ✅     |
-| `@use`            |             | ❌     |
+| Directive        | Description | Status |
+| ---------------- | ----------- | ------ |
+| `@auth`          |             | ❌     |
+| `@guest`         |             | ❌     |
+| `@production`    |             | ❌     |
+| `@env`           |             | ❌     |
+| `@include`       |             | ❌     |
+| `@session`       |             | ❌     |
+| `@checked`       |             | ❌     |
+| `@disabled`      |             | ❌     |
+| `@readonly`      |             | ❌     |
+| `@required`      |             | ❌     |
+| `@includeIf`     |             | ❌     |
+| `@includeWhen`   |             | ❌     |
+| `@includeUnless` |             | ❌     |
+| `@includeFirst`  |             | ❌     |
+| `@each`          |             | ❌     |
+| `@once`          |             | ❌     |
+| `@push`          |             | ❌     |
+| `@pushOnce`      |             | ❌     |
+| `@prependOnce`   |             | ❌     |
+| `@php`           |             | ✅     |
+| `@use`           |             | ❌     |
diff --git a/src/Blade.php b/src/Blade.php
@@ -72,27 +72,27 @@ private function saveCache(string $identifier, string $compiled): void
     }
 
     /**
-     * Filters conditional classes and
-     * returns only the applicable classes.
+     * Filters conditional values.
      *
-     * @param array $classes
-     * @return array
+     * @param string[] $values
+     * @return string[]
      */
-    public static function getApplicableClasses(array $classes): array
+    public static function filterConditionalValues(array $values): array
     {
         $applicable = [];
 
-        foreach ($classes as $key => $value) {
+        foreach ($values as $key => $value) {
             if (is_int($key)) {
                 $applicable[] = $value;
-            } else {
-                if ($value) {
-                    $applicable[] = $key;
-                }
+                continue;
+            }
+
+            if ($value) {
+                $applicable[] = $key;
             }
         }
 
-        return  $applicable;
+        return $applicable;
     }
 
     /**
@@ -105,7 +105,21 @@ public static function classAttribute(array $classes): string
     {
         return sprintf(
             'class="%s"',
-            implode(' ', static::getApplicableClasses($classes))
+            implode(' ', static::filterConditionalValues($classes))
+        );
+    }
+
+    public static function styleAttribute(array $styles): string
+    {
+        $styles = static::filterConditionalValues($styles);
+
+        $styles = array_map(function ($style) {
+            return rtrim($style, ';') . ';';
+        }, $styles);
+
+        return sprintf(
+            'style="%s"',
+            implode(' ', static::filterConditionalValues($styles))
         );
     }
 }
diff --git a/src/CompileAtRules.php b/src/CompileAtRules.php
@@ -174,6 +174,11 @@ protected function compileClass(string $expression): string
         return "<?php echo \Blade\Blade::classAttribute({$expression}); ?>";
     }
 
+    protected function compileStyle(string $expression): string
+    {
+        return "<?php echo \Blade\Blade::styleAttribute({$expression}); ?>";
+    }
+
     protected function compileContinue(string $expression): string
     {
         return "<?php continue; ?>";

diff --git a/tests/StyleDirectiveTest.php b/tests/StyleDirectiveTest.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace Tests;
+
+use PHPUnit\Framework\TestCase;
+
+class StyleDirectiveTest extends TestCase
+{
+    use VerifiesOutputTrait;
+
+    public function testSimpleClassDirective()
+    {
+        $this->assertSame(
+            'style="display:none; color:red;"',
+            $this->renderBlade('@style(["display:none", "color:red;",])')
+        );
+    }
+
+    public function testConditionalStyles()
+    {
+        $this->assertSame(
+            'style="display:none;"',
+            $this->renderBlade(
+                '@style(["display:none" => $isMobile, "color: red" => !$isMobile])',
+                ['isMobile' => true]
+            )
+        );
+
+        $this->assertSame(
+            'style="color: red;"',
+            $this->renderBlade(
+                '@style(["display:none" => $isMobile, "color: red" => !$isMobile])',
+                ['isMobile' => false]
+            )
+        );
+    }
+}