Merge pull request #99 from tronsha/fix/style-attribute

Fix for style binding

Author: tronsha

src/Compiler.php

@@ -310,7 +310,7 @@ public function convertNode(DOMNode $node, int $level = 0): DOMNode
             $this->handleHtml($node);
             $this->handleText($node);
             $this->stripEventHandlers($node);
-            $this->handleSlots($node);
+            $this->handleSlots($node, $level);
             $this->cleanupAttributes($node);
             $this->addScopedAttribute($node, $level);
         }
@@ -762,15 +762,15 @@ public function handleBinding(string $value, string $name, ?DOMElement $node = n
                 if (preg_match('/^`(.*)`$/', $element, $match)) {
                     $dynamicValues[] = $this->handleTemplateStringBinding($match[1], $twigOutput);
                 } elseif (preg_match('/^\{(.*)\}$/', $element, $match)) {
-                    $this->handleObjectBinding([$match[1]], $dynamicValues, $twigOutput);
+                    $this->handleObjectBinding([$match[1]], $dynamicValues, $twigOutput, $name === 'style');
                 } else {
                     $dynamicValues[] = $element;
                 }
             }
         } elseif (preg_match($regexObjectBinding, $value, $matches)) {
             $this->logger->debug('- object binding ', ['value' => $value]);
             $items = explode(',', $matches['elements']);
-            $this->handleObjectBinding($items, $dynamicValues, $twigOutput);
+            $this->handleObjectBinding($items, $dynamicValues, $twigOutput, $name === 'style');
         } elseif (preg_match($regexTemplateString, $value, $matches)) {
             // <div :class="`abc ${someDynamicClass}`">
             $this->logger->debug('- template string binding ', ['value' => $value]);
@@ -795,13 +795,15 @@ public function handleBinding(string $value, string $name, ?DOMElement $node = n
      * @param string[] $dynamicValues
      * @throws ReflectionException
      */
-    protected function handleObjectBinding(array $items, array &$dynamicValues, bool $twigOutput): void
+    protected function handleObjectBinding(array $items, array &$dynamicValues, bool $twigOutput, bool $isStyle): void
     {
-        $regexObjectElements = '/["\']?(?<class>[^"\']+)["\']?\s*:\s*(?<condition>[^,]+)/x';
+        $regexObjectElements = '/(?<isString>["\']?)(?<class>[^"\']+)["\']?\s*:\s*(?<condition>[^,]+)/x';
         foreach ($items as $item) {
             if (preg_match($regexObjectElements, $item, $matchElement)) {
                 $dynamicValues[] = $this->builder->prepareBindingOutput(
-                    $this->builder->refactorCondition($matchElement['condition']) . ' ? \'' . $matchElement['class'] . '\'',
+                    $isStyle && !$matchElement['isString']
+                        ? '\'' . $this->camelCaseToKebabCase($matchElement['class']) . ':\' + ' . $matchElement['condition']
+                        : $this->builder->refactorCondition($matchElement['condition']) . ' ? \'' . $matchElement['class'] . '\'',
                     $twigOutput
                 );
             }
@@ -1345,15 +1347,15 @@ protected function createVariableBlock(): string
     /**
      * @throws Exception
      */
-    protected function handleSlots(DOMElement $node): void
+    protected function handleSlots(DOMElement $node, int $level): void
     {
         if ($node->nodeName !== 'slot') {
             return;
         }
 
         if ($node->hasChildNodes()) {
             foreach ($node->childNodes as $childNode) {
-                $this->convertNode($childNode);
+                $this->convertNode($childNode, $level + 1);
             }
         }
 
@@ -1528,4 +1530,9 @@ private function replaceAttributeWithIfConditionPlaceholders(string $html): stri
 
         return $html;
     }
+
+    private function camelCaseToKebabCase(string $text): string
+    {
+        return strtolower(preg_replace('/([a-z])([A-Z])/', '\1-\2', $text));
+    }
 }

tests/fixtures/vue-bind/bindings-style.twig

@@ -0,0 +1,26 @@
+<div class="{{ class|default('') }}" style="{{ style|default('') }}">
+  <span style="color: #ff0000">
+    test
+  </span>
+  <span style="{{ 'color: #ff0000' }};">
+    test
+  </span>
+  <span style="{{ 'color:' ~ '#ff0000' }};">
+    test
+  </span>
+  <span style="{{ 'width:' ~ w ~ 'px' }}; {{ ' height:' ~ h ~ 'px' }};">
+    test
+  </span>
+  <span style="{{ isSomething ? 'color: red' }}; {{ not isSomething ? 'color: blue' }};">
+    test
+  </span>
+  <span style="{{ isSomething ? 'display: block;' : 'display: inline;' }};">
+    test
+  </span>
+  <span style="{{ 'background-color:' ~ color }};">
+    test
+  </span>
+  <span style="{{ 'background-color:' ~ color }};">
+    test
+  </span>
+</div>

tests/fixtures/vue-bind/bindings-style.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <span style="color: #ff0000">
+      test
+    </span>
+    <span :style="'color: #ff0000'">
+      test
+    </span>
+    <span :style="{color: '#ff0000'}">
+      test
+    </span>
+    <span :style="{width: w + 'px', height: h + 'px'}">
+      test
+    </span>
+    <span :style="{'color: red': isSomething, 'color: blue': !isSomething}">
+      test
+    </span>
+    <span :style="isSomething ? 'display: block;' : 'display: inline;'">
+      test
+    </span>
+    <span :style="'background-color:' + color">
+      test
+    </span>
+    <span :style="{backgroundColor: color}">
+      test
+    </span>
+  </div>
+</template>