Fix style glue

Author: tronsha

src/Compiler.php

@@ -302,25 +302,26 @@ private function preparePropertiesForInclude(array $variables): array
     {
         $values = [];
         foreach ($variables as $key => $variable) {
-            if (in_array($variable->getName(), $this->includeAttributes)) {
+            $name = $variable->getName();
+            $value = $variable->getValue();
+            if (in_array($name, $this->includeAttributes)) {
                 if ($variable->isBinding()) {
-                    $values[$variable->getName()][] = $this->handleBinding(
-                        $variable->getValue(),
-                        $variable->getName(),
-                        null,
-                        false
-                    )[0];
+                    $values[$name][] = $this->handleBinding($value, $name, null, false)[0];
                 } else {
-                    $values[$variable->getName()][] = $variable->getValue();
+                    $values[$name][] = $value;
                 }
                 unset($variables[$key]);
             }
         }
 
         foreach ($this->includeAttributes as $attribute) {
+            $glue = ' ~ " " ~ ';
+            if ($attribute === 'style') {
+                $glue = ' ~ "; " ~ ';
+            }
             $variables[] = new Property(
                 $attribute,
-                $values[$attribute] ?? null ? implode(' ~ " " ~ ', $values[$attribute]) : '""',
+                $values[$attribute] ?? null ? implode($glue, $values[$attribute]) : '""',
                 false
             );
         }
@@ -742,17 +743,20 @@ private function stripEventHandlers(DOMElement $node): void
      */
     protected function implodeAttributeValue(string $attribute, array $values, string $oldValue): string
     {
-        $glue = ' ';
-
         if ($attribute === 'style') {
-            $glue = '; ';
+            if (!empty($oldValue)) {
+                $oldValue = trim($oldValue, ';') . ';';
+            }
+            foreach ($values as &$value) {
+                $value = trim($value, ';') . ';';
+            }
         }
 
         if (!empty($oldValue)) {
             $values = array_merge([$oldValue], $values);
         }
 
-        return implode($glue, $values);
+        return trim(implode(' ', $values));
     }
 
     /**

tests/fixtures/vue-bind/binding-with-template-string-2.twig

@@ -1,5 +1,5 @@
 <div class="block {{ class|default('') }}" style="{{ style|default('') }}">
-  <div class="block block--{{ modifier }}" style="fill: {{ color }}; height: {{ height }}">
+  <div class="block block--{{ modifier }}" style="fill: {{ color }}; height: {{ height }};">
     Hello World
   </div>
 </div>

tests/fixtures/vue-bind/binding-with-template-string.twig

@@ -1,7 +1,7 @@
 <div class="block {{ class|default('') }}" style="{{ style|default('') }}">
-  <div class="block block--{{ modifier }}" style="fill: {{ color }}">
+  <div class="block block--{{ modifier }}" style="fill: {{ color }};">
     Hello World
   </div>
   <div class="{{ isTrue ? 'a' : 'b' }}"></div>
-  <div style="{{ isTrue ? 'display: block;' : 'display: none !important;' }}"></div>
+  <div style="{{ isTrue ? 'display: block' : 'display: none !important' }};"></div>
 </div>

tests/fixtures/vue-bind/binding-with-template-string.vue

@@ -4,7 +4,7 @@
       Hello World
     </div>
     <div :class="`${isTrue ? 'a' : 'b'}`"></div>
-    <div :style="`${isTrue ? 'display: block;' : 'display: none !important;'}`"></div>
+    <div :style="`${isTrue ? 'display: block' : 'display: none !important'}`"></div>
   </div>
 </template>
 

tests/fixtures/vue-bind/bindings.twig

@@ -6,9 +6,9 @@
     <div class="a b c"></div>
     <div title="Title" class="category-filter-list categories {{ isSomething ? 'block ' }} {{ not isSomething ? 'block2 ' }}"></div>
     <div class="{{ getClasses(not hasSomething) }}"></div>
-    <div style="{{ 'display: none !important' }}">Hidden</div>
-    <div style="color: red; {{ 'display: none !important' }}">Hidden</div>
-    <div style="border: 1px solid #000000; {{ isSomething ? 'color: red ' }}; {{ not isSomething ? 'color: blue ' }}">Hidden</div>
+    <div style="{{ 'display: none !important' }};">Hidden</div>
+    <div style="color: red; {{ 'display: none !important' }};">Hidden</div>
+    <div style="border: 1px solid #000000; {{ isSomething ? 'color: red ' }}; {{ not isSomething ? 'color: blue ' }};">Hidden</div>
     <div class="{{ bar ? 'foo ' }}"></div>
     <div class="{{ bar ? 'foo ' }}"></div>
   </div>

tests/fixtures/vue-component/component-with-child-binding.twig

@@ -1,5 +1,6 @@
 <div class="{{ class|default('') }}" style="{{ style|default('') }}">
   {% include "/templates/ChildComponent.twig" with { 'test': "test", 'class': "", 'style': ( "fill:" ~ ( color ) ~ ";" ) } %}
+  {% include "/templates/ChildComponent.twig" with { 'class': "", 'style': "color: red" ~ "; " ~ ( "fill:" ~ ( color ) ~ ";" ) } %}
   {% include "/templates/ChildComponent.twig" with { 'class': "foo" ~ " " ~ ( "bar" ), 'style': "" } %}
   {% include "/templates/ChildComponent.twig" with { 'class': "foo" ~ " " ~ ( bar ), 'style': "" } %}
   {% include "/templates/ChildComponent.twig" with { 'class': "product-column__tile" ~ " " ~ ( isSingleProductTile ? 'product-column__tile--large ' ), 'style': "" } %}

tests/fixtures/vue-component/component-with-child-binding.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <ChildComponent :style="`fill:${color};`" :key=testkey test="test" />
+    <ChildComponent style="color: red" :style="`fill:${color};`" />
     <ChildComponent class="foo" :class="`bar`" />
     <ChildComponent class="foo" :class="bar" />
     <ChildComponent class="product-column__tile" :class="{'product-column__tile--large': isSingleProductTile }" />