Change for style binding

Author: tronsha

src/Compiler.php

@@ -802,7 +802,7 @@ protected function handleObjectBinding(array $items, array &$dynamicValues, bool
             if (preg_match($regexObjectElements, $item, $matchElement)) {
                 $dynamicValues[] = $this->builder->prepareBindingOutput(
                     $isStyle && !$matchElement['isString']
-                        ? '\'' . $matchElement['class'] . ':\' + ' . $matchElement['condition']
+                        ? '\'' . $this->camelCaseToKebabCase($matchElement['class']) . ':\' + ' . $matchElement['condition']
                         : $this->builder->refactorCondition($matchElement['condition']) . ' ? \'' . $matchElement['class'] . '\'',
                     $twigOutput
                 );
@@ -1530,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

@@ -20,4 +20,7 @@
   <span style="{{ 'background-color:' ~ color }};">
     test
   </span>
+  <span style="{{ 'background-color:' ~ color }};">
+    test
+  </span>
 </div>

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

@@ -21,5 +21,8 @@
     <span :style="'background-color:' + color">
       test
     </span>
+    <span :style="{backgroundColor: color}">
+      test
+    </span>
   </div>
 </template>