Fix style block support

src/Compiler.php

@@ -167,6 +167,7 @@ public function convert(): string
         }
 
         if ($styleBlocks->length) {
+            $this->styleBuilder->setScopedAttribute('data-v-' . md5($this->document->textContent));
             foreach ($styleBlocks as $styleBlock) {
                 /* @var DOMElement $styleBlock */
                 $this->rawBlocks[] = $this->styleBuilder->compile($styleBlock);
@@ -190,6 +191,7 @@ public function convert(): string
 
         $html = $this->addVariableBlocks($html);
         $html = $this->replacePlaceholders($html);
+        $html = $this->replaceScopedPlaceholders($html);
 
         $html = preg_replace('/<template>\s*(.*)\s*<\/template>/ism', '$1', $html);
         $html = preg_replace('/<\/?template[^>]*?>/i', '', $html);
@@ -241,7 +243,7 @@ public function convertNode(DOMNode $node, int $level = 0): DOMNode
             $this->stripEventHandlers($node);
             $this->handleSlots($node);
             $this->cleanupAttributes($node);
-            $this->addScopedAttribute($node);
+            $this->addScopedAttribute($node, $level);
         }
 
         // Registered Component
@@ -362,6 +364,20 @@ private function preparePropertiesForInclude(array $variables): array
                     $values[$name][] = $value;
                 }
                 unset($variables[$key]);
+            } elseif (strpos($name, 'dataV') === 0 && strlen($name) === 37) {
+                unset($variables[$key]);
+                $variables[] = new Property(
+                    'dataScopedStyleAttribute',
+                    '"data-v-' . strtolower(substr($name, 5)) . '"',
+                    false
+                );
+            } elseif ($name === '__DATA_SCOPED_STYLE_ATTRIBUTE__') {
+                unset($variables[$key]);
+                $variables[] = new Property(
+                    'dataScopedStyleAttribute',
+                    'dataScopedStyleAttribute|default(\'\')',
+                    false
+                );
             }
         }
 
@@ -1068,6 +1084,13 @@ public function setStyleBlockOutputType(int $outputType): Compiler
         return $this;
     }
 
+    public function setStyleBlockScssData(string $scssData): Compiler
+    {
+        $this->styleBuilder->setScssData($scssData);
+
+        return $this;
+    }
+
     /**
      * @param mixed $value
      */
@@ -1217,12 +1240,27 @@ private function twigRemove(DOMElement $node): bool
         return false;
     }
 
-    private function addScopedAttribute(DOMElement $node): void
+    private function addScopedAttribute(DOMElement $node, int $level): void
     {
-        if (!$this->styleBuilder->hasScoped()) {
-            return;
+        if ($this->styleBuilder->hasScoped()) {
+            $scopedAttribute = $this->styleBuilder->getScopedAttribute();
+            $node->setAttributeNode(new DOMAttr($scopedAttribute, ''));
+
+            if ($level !== 1) {
+                return;
+            }
         }
-        $scopedAttribute = $this->styleBuilder->getScopedAttribute();
-        $node->setAttributeNode(new DOMAttr($scopedAttribute, ''));
+
+        if ($this->styleBuilder->getOutputType() & StyleBuilder::STYLE_SCOPED) {
+            $node->setAttributeNode(new DOMAttr('__DATA_SCOPED_STYLE_ATTRIBUTE__', ''));
+        }
+    }
+
+    private function replaceScopedPlaceholders(string $html): string
+    {
+        $html = str_replace('__DATA_SCOPED_STYLE_ATTRIBUTE__=""', '{{ dataScopedStyleAttribute|default(\'\') }}', $html);
+        $html = preg_replace('/(data-v-[0-9a-f]{32})=""/', '$1', $html);
+
+        return $html;
     }
 }

src/Utils/StyleBuilder.php

@@ -6,7 +6,6 @@
 
 use DOMElement;
 use Exception;
-use Ramsey\Uuid\Uuid;
 use ScssPhp\ScssPhp\Compiler as ScssCompiler;
 
 class StyleBuilder
@@ -21,6 +20,11 @@ class StyleBuilder
      */
     private $outputType;
 
+    /**
+     * @var string
+     */
+    private $scssData;
+
     /**
      * @var ScssCompiler|null
      */
@@ -44,16 +48,27 @@ class StyleBuilder
     public function __construct()
     {
         $this->outputType = self::STYLE_ALL;
+        $this->scssData = '';
         $this->scssCompiler = null;
         $this->hasScoped = false;
-        $this->scopedAttribute = 'data-v-' . substr(md5(Uuid::uuid4()->toString()), 0, 8);
+        $this->scopedAttribute = '';
     }
 
     public function setOutputType(int $outputType): void
     {
         $this->outputType = $outputType;
     }
 
+    public function getOutputType(): int
+    {
+        return $this->outputType;
+    }
+
+    public function setScssData(string $data): void
+    {
+        $this->scssData = $data;
+    }
+
     public function compile(?DOMElement $styleElement): ?string
     {
         if (!$styleElement instanceof DOMElement
@@ -68,7 +83,7 @@ public function compile(?DOMElement $styleElement): ?string
             if ($this->scssCompiler === null) {
                 $this->scssCompiler = new ScssCompiler();
             }
-            $style = $this->scssCompiler->compile($style);
+            $style = $this->scssCompiler->compile($this->scssData . ' ' . $style);
         }
 
         if ($styleElement->hasAttribute('scoped')) {
@@ -84,6 +99,11 @@ public function hasScoped(): ?bool
         return $this->hasScoped;
     }
 
+    public function setScopedAttribute(string $scopedAttribute): void
+    {
+        $this->scopedAttribute = $scopedAttribute;
+    }
+
     public function getScopedAttribute(): string
     {
         return $this->scopedAttribute;

tests/AbstractTestCase.php

@@ -10,6 +10,7 @@
 use Monolog\Handler\StreamHandler;
 use Monolog\Logger;
 use Paneon\VueToTwig\Compiler;
+use Paneon\VueToTwig\Utils\StyleBuilder;
 use PHPUnit\Framework\TestCase;
 
 abstract class AbstractTestCase extends TestCase
@@ -21,6 +22,7 @@ protected function createCompiler(string $template): Compiler
     {
         $document = $this->createDocumentWithHtml($template);
         $compiler = new Compiler($document, $this->createLogger());
+        $compiler->setStyleBlockOutputType(StyleBuilder::STYLE_NO);
 
         return $compiler;
     }

tests/CompilerStyleBlockScopedTest.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace Paneon\VueToTwig\Tests;
+
+use Exception;
+use Paneon\VueToTwig\Utils\StyleBuilder;
+
+class CompilerStyleBlockScopedTest extends AbstractTestCase
+{
+    /**
+     * @dataProvider dataProvider
+     *
+     * @param mixed $html
+     * @param mixed $expected
+     *
+     * @throws Exception
+     */
+    public function testStyleBlock($html, $expected)
+    {
+        $compiler = $this->createCompiler($html);
+        $compiler->setStyleBlockOutputType(StyleBuilder::STYLE_ALL);
+        $compiler->registerComponent('ChildComponent', '/templates/ChildComponent.twig');
+
+        $actual = $compiler->convert();
+
+        $this->assertEqualHtml($expected, $actual);
+    }
+
+    /**
+     * @return array
+     */
+    public function dataProvider()
+    {
+        return $this->loadFixturesFromDir('style-block-scoped');
+    }
+}

tests/CompilerStyleBlockTest.php

@@ -3,6 +3,7 @@
 namespace Paneon\VueToTwig\Tests;
 
 use Exception;
+use Paneon\VueToTwig\Utils\StyleBuilder;
 
 class CompilerStyleBlockTest extends AbstractTestCase
 {
@@ -17,11 +18,10 @@ class CompilerStyleBlockTest extends AbstractTestCase
     public function testStyleBlock($html, $expected)
     {
         $compiler = $this->createCompiler($html);
+        $compiler->setStyleBlockOutputType(StyleBuilder::STYLE);
 
         $actual = $compiler->convert();
 
-        $actual = preg_replace('/data-v-[0-9a-z]{8}/', 'data-v-12345678', $actual);
-
         $this->assertEqualHtml($expected, $actual);
     }
 

tests/fixtures/style-block-scoped/style-block-scoped-with-child-binding.twig

@@ -0,0 +1,10 @@
+<style>
+  .foo[data-v-a2116698cabca27b45a4db453446b8d2] {
+    color: red;
+  }
+</style>
+<div class="root {{ class|default('') }}" data-v-a2116698cabca27b45a4db453446b8d2 {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}">
+  <div class="foo" data-v-a2116698cabca27b45a4db453446b8d2>
+    {% include "/templates/ChildComponent.twig" with { 'dataScopedStyleAttribute': "data-v-a2116698cabca27b45a4db453446b8d2", 'class': "", 'style': "" } %}
+  </div>
+</div>

tests/fixtures/style-block-scoped/style-block-scoped-with-child-binding.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="root">
+    <div class="foo">
+      <ChildComponent />
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'cstyle-block-scoped-with-child-binding.vue',
+    component: {
+      ChildComponent,
+    }
+  };
+</script>
+
+<style scoped>
+  .foo {
+    color: red;
+  }
+</style>

tests/fixtures/style-block-scoped/style-block-scoped.twig

@@ -0,0 +1,26 @@
+<style>
+  .foo[data-v-6737f06d5bb113335593e128322855f1] {
+    color: red;
+  }
+  .bar[data-v-6737f06d5bb113335593e128322855f1],
+  .baz[data-v-6737f06d5bb113335593e128322855f1] {
+    color: blue;
+  }
+  .foo:after[data-v-6737f06d5bb113335593e128322855f1] {
+    display: none;
+  }
+  .root .bar[data-v-6737f06d5bb113335593e128322855f1] {
+    text-decoration: underline;
+  }
+</style>
+<div class="root {{ class|default('') }}" data-v-6737f06d5bb113335593e128322855f1 {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}">
+  <div class="foo" data-v-6737f06d5bb113335593e128322855f1>
+    foo
+  </div>
+  <div class="bar" data-v-6737f06d5bb113335593e128322855f1>
+    bar
+  </div>
+  <div class="baz" data-v-6737f06d5bb113335593e128322855f1>
+    baz
+  </div>
+</div>

tests/fixtures/style-block-scoped/style-block-scss-scoped.twig

@@ -0,0 +1,6 @@
+<style>.foo[data-v-eb50964453fb1d39d2d2f020c6639c00] { color: red; } .foo__bar[data-v-eb50964453fb1d39d2d2f020c6639c00] { color: blue; } .foo__baz[data-v-eb50964453fb1d39d2d2f020c6639c00] { color: #00FF00; }</style>
+<div data-v-eb50964453fb1d39d2d2f020c6639c00 {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <div class="foo__bar" data-v-eb50964453fb1d39d2d2f020c6639c00>
+      baz
+    </div>
+</div>

tests/fixtures/style-block-scoped/style-block.twig

@@ -0,0 +1,6 @@
+<style> .foo { color: red; }</style>
+<div {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <div class="foo" {{ dataScopedStyleAttribute|default('') }}>
+      foo
+    </div>
+</div>

tests/fixtures/style-block-scoped/style-block.vue

@@ -0,0 +1,18 @@
+<template>
+<div>
+  <div class="foo">
+    foo
+  </div>
+</div>
+</template>
+
+<style>
+  .foo {
+    color: red;
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>

tests/fixtures/style-block-scoped/style-blocks.twig

@@ -0,0 +1,8 @@
+<style> .foo { color: red; }</style>
+<style> .bar[data-v-9d8ac5d70d06b0f0d2a21f893932dffe] { color: blue; }</style>
+<style>.baz { color: #00FF00; }</style>
+<div data-v-9d8ac5d70d06b0f0d2a21f893932dffe {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <div class="foo bar baz" data-v-9d8ac5d70d06b0f0d2a21f893932dffe>
+      42
+    </div>
+</div>