Merge pull request #87 from tronsha/bugfix/class-for-component-on-root

Fix scoped styles for component as root node

Author: tronsha

src/Compiler.php

@@ -437,13 +437,20 @@ private function preparePropertiesForInclude(array $variables, bool $isRootNode
             } elseif ($name === '__DATA_SCOPED_STYLE_ATTRIBUTE__') {
                 unset($variables[$key]);
                 if ($hasScopedStyleAttribute) {
-                    continue;
+                    foreach ($variables as $variable) {
+                        if ($variable->getName() === 'dataScopedStyleAttribute') {
+                            $variable->setValue(
+                                $variable->getValue() . ' ~ " " ~ dataScopedStyleAttribute|default(\'\')'
+                            );
+                        }
+                    }
+                } else {
+                    $variables[] = new Property(
+                        'dataScopedStyleAttribute',
+                        'dataScopedStyleAttribute|default(\'\')',
+                        false
+                    );
                 }
-                $variables[] = new Property(
-                    'dataScopedStyleAttribute',
-                    'dataScopedStyleAttribute|default(\'\')',
-                    false
-                );
             } elseif ($name === 'vBind') {
                 $this->vBind = $value;
                 unset($variables[$key]);
@@ -455,10 +462,10 @@ private function preparePropertiesForInclude(array $variables, bool $isRootNode
             if ($attribute === 'style') {
                 $glue = ' ~ "; " ~ ';
             }
-            $value = $values[$attribute] ?? null ? implode($glue, $values[$attribute]) : '""';
             if ($isRootNode) {
-                $value = $value . $glue . $attribute . '|default(\'\')';
+                $values[$attribute][] = $attribute . '|default(\'\')';
             }
+            $value = $values[$attribute] ?? null ? implode($glue, $values[$attribute]) : '""';
             $variables[] = new Property($attribute, $value, false);
         }
 

src/Models/Property.php

@@ -58,6 +58,12 @@ public function getValue(): string
         return $this->value;
     }
 
+    public function setValue(string $value): Property
+    {
+        $this->value = $value;
+        return $this;
+    }
+
     public function isBinding(): bool
     {
         return $this->isBinding;

tests/fixtures/style-block-scoped/include-child-component-with-component-on-root-and-style-block-scoped.twig

@@ -0,0 +1,2 @@
+<style> .foo[data-v-858c11a91dcdf48f12d9b6c5ca636873] { color: purple; }</style>
+{% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'dataScopedStyleAttribute': "data-v-858c11a91dcdf48f12d9b6c5ca636873" ~ " " ~ dataScopedStyleAttribute|default(''), 'class': "foo" ~ " " ~ class|default(''), 'style': "color: black" ~ "; " ~ style|default('') } %}

tests/fixtures/style-block-scoped/include-child-component-with-component-on-root-and-style-block-scoped.vue

@@ -0,0 +1,18 @@
+<template>
+  <ChildComponent class="foo" style="color: black" />
+</template>
+
+<script>
+    export default {
+        name: 'ComponentWithComponentOnRoot',
+        component: {
+          ChildComponent,
+        }
+    };
+</script>
+
+<style scoped>
+  .foo {
+    color: purple;
+  }
+</style>

tests/fixtures/style-block-scoped/include-child-component-with-component-on-root.twig

@@ -0,0 +1 @@
+{% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'dataScopedStyleAttribute': dataScopedStyleAttribute|default(''), 'class': "foo" ~ " " ~ class|default(''), 'style': "color: black" ~ "; " ~ style|default('') } %}

tests/fixtures/vue-slot/include-child-component-with-component-on-root.vue renamed to tests/fixtures/style-block-scoped/include-child-component-with-component-on-root.vue

@@ -0,0 +1,2 @@
+<style> .foo[data-v-858c11a91dcdf48f12d9b6c5ca636873] { color: purple; }</style>
+<div data-v-858c11a91dcdf48f12d9b6c5ca636873 {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">{% include "/templates/ChildComponent.twig" with { 'slot_default': "", 'dataScopedStyleAttribute': "data-v-858c11a91dcdf48f12d9b6c5ca636873", 'class': "foo", 'style': "color: black" } %}</div>

tests/fixtures/style-block-scoped/include-child-component-with-style-block-scoped.twig

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <ChildComponent class="foo" style="color: black" />
+  </div>
+</template>
+
+<script>
+    export default {
+        name: 'ComponentWithComponentOnRoot',
+        component: {
+          ChildComponent,
+        }
+    };
+</script>
+
+<style scoped>
+  .foo {
+    color: purple;
+  }
+</style>

tests/fixtures/style-block-scoped/include-child-component-with-style-block-scoped.vue

@@ -1,4 +1,4 @@
 {% set text = text|default('foo') %}
 {% set slot_default_fallback %}{{ text }}{% endset %}
 {% set slot_default_value %}{{ slot_default|default(slot_default_fallback) }}{% endset %}
-{% include "/templates/ChildComponent.twig" with { 'slot_default': slot_default_value, 'class': "" ~ " " ~ class|default(''), 'style': "" ~ "; " ~ style|default('') } %}
+{% include "/templates/ChildComponent.twig" with { 'slot_default': slot_default_value, 'class': class|default(''), 'style': style|default('') } %}