Skip to content

Commit 3ddb7a7

Browse files
committed
Fix style glue
1 parent 7c6a4bb commit 3ddb7a7

File tree

7 files changed

+26
-20
lines changed

7 files changed

+26
-20
lines changed

src/Compiler.php

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -302,25 +302,26 @@ private function preparePropertiesForInclude(array $variables): array
302302
{
303303
$values = [];
304304
foreach ($variables as $key => $variable) {
305-
if (in_array($variable->getName(), $this->includeAttributes)) {
305+
$name = $variable->getName();
306+
$value = $variable->getValue();
307+
if (in_array($name, $this->includeAttributes)) {
306308
if ($variable->isBinding()) {
307-
$values[$variable->getName()][] = $this->handleBinding(
308-
$variable->getValue(),
309-
$variable->getName(),
310-
null,
311-
false
312-
)[0];
309+
$values[$name][] = $this->handleBinding($value, $name, null, false)[0];
313310
} else {
314-
$values[$variable->getName()][] = $variable->getValue();
311+
$values[$name][] = $value;
315312
}
316313
unset($variables[$key]);
317314
}
318315
}
319316

320317
foreach ($this->includeAttributes as $attribute) {
318+
$glue = ' ~ " " ~ ';
319+
if ($attribute === 'style') {
320+
$glue = ' ~ "; " ~ ';
321+
}
321322
$variables[] = new Property(
322323
$attribute,
323-
$values[$attribute] ?? null ? implode(' ~ " " ~ ', $values[$attribute]) : '""',
324+
$values[$attribute] ?? null ? implode($glue, $values[$attribute]) : '""',
324325
false
325326
);
326327
}
@@ -742,17 +743,20 @@ private function stripEventHandlers(DOMElement $node): void
742743
*/
743744
protected function implodeAttributeValue(string $attribute, array $values, string $oldValue): string
744745
{
745-
$glue = ' ';
746-
747746
if ($attribute === 'style') {
748-
$glue = '; ';
747+
if (!empty($oldValue)) {
748+
$oldValue = trim($oldValue, ';') . ';';
749+
}
750+
foreach ($values as &$value) {
751+
$value = trim($value, ';') . ';';
752+
}
749753
}
750754

751755
if (!empty($oldValue)) {
752756
$values = array_merge([$oldValue], $values);
753757
}
754758

755-
return implode($glue, $values);
759+
return trim(implode(' ', $values));
756760
}
757761

758762
/**
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="block {{ class|default('') }}" style="{{ style|default('') }}">
2-
<div class="block block--{{ modifier }}" style="fill: {{ color }}; height: {{ height }}">
2+
<div class="block block--{{ modifier }}" style="fill: {{ color }}; height: {{ height }};">
33
Hello World
44
</div>
55
</div>
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="block {{ class|default('') }}" style="{{ style|default('') }}">
2-
<div class="block block--{{ modifier }}" style="fill: {{ color }}">
2+
<div class="block block--{{ modifier }}" style="fill: {{ color }};">
33
Hello World
44
</div>
55
<div class="{{ isTrue ? 'a' : 'b' }}"></div>
6-
<div style="{{ isTrue ? 'display: block;' : 'display: none !important;' }}"></div>
6+
<div style="{{ isTrue ? 'display: block' : 'display: none !important' }};"></div>
77
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
Hello World
55
</div>
66
<div :class="`${isTrue ? 'a' : 'b'}`"></div>
7-
<div :style="`${isTrue ? 'display: block;' : 'display: none !important;'}`"></div>
7+
<div :style="`${isTrue ? 'display: block' : 'display: none !important'}`"></div>
88
</div>
99
</template>
1010

tests/fixtures/vue-bind/bindings.twig

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
<div class="a b c"></div>
77
<div title="Title" class="category-filter-list categories {{ isSomething ? 'block ' }} {{ not isSomething ? 'block2 ' }}"></div>
88
<div class="{{ getClasses(not hasSomething) }}"></div>
9-
<div style="{{ 'display: none !important' }}">Hidden</div>
10-
<div style="color: red; {{ 'display: none !important' }}">Hidden</div>
11-
<div style="border: 1px solid #000000; {{ isSomething ? 'color: red ' }}; {{ not isSomething ? 'color: blue ' }}">Hidden</div>
9+
<div style="{{ 'display: none !important' }};">Hidden</div>
10+
<div style="color: red; {{ 'display: none !important' }};">Hidden</div>
11+
<div style="border: 1px solid #000000; {{ isSomething ? 'color: red ' }}; {{ not isSomething ? 'color: blue ' }};">Hidden</div>
1212
<div class="{{ bar ? 'foo ' }}"></div>
1313
<div class="{{ bar ? 'foo ' }}"></div>
1414
</div>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<div class="{{ class|default('') }}" style="{{ style|default('') }}">
22
{% include "/templates/ChildComponent.twig" with { 'test': "test", 'class': "", 'style': ( "fill:" ~ ( color ) ~ ";" ) } %}
3+
{% include "/templates/ChildComponent.twig" with { 'class': "", 'style': "color: red" ~ "; " ~ ( "fill:" ~ ( color ) ~ ";" ) } %}
34
{% include "/templates/ChildComponent.twig" with { 'class': "foo" ~ " " ~ ( "bar" ), 'style': "" } %}
45
{% include "/templates/ChildComponent.twig" with { 'class': "foo" ~ " " ~ ( bar ), 'style': "" } %}
56
{% include "/templates/ChildComponent.twig" with { 'class': "product-column__tile" ~ " " ~ ( isSingleProductTile ? 'product-column__tile--large ' ), 'style': "" } %}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<div>
33
<ChildComponent :style="`fill:${color};`" :key=testkey test="test" />
4+
<ChildComponent style="color: red" :style="`fill:${color};`" />
45
<ChildComponent class="foo" :class="`bar`" />
56
<ChildComponent class="foo" :class="bar" />
67
<ChildComponent class="product-column__tile" :class="{'product-column__tile--large': isSingleProductTile }" />

0 commit comments

Comments
 (0)