Change style builder

Author: tronsha

src/Compiler.php

@@ -137,8 +137,7 @@ public function convert(): string
         /** @var DOMElement|null $scriptElement */
         $scriptElement = $this->document->getElementsByTagName('script')->item(0);
 
-        /** @var DOMElement|null $scriptElement */
-        $styleElement = $this->document->getElementsByTagName('style')->item(0);
+        $styleBlocks = $this->document->getElementsByTagName('style');
 
         $twigBlocks = $this->document->getElementsByTagName('twig');
 
@@ -154,8 +153,11 @@ public function convert(): string
             }
         }
 
-        if ($styleElement && !empty($styleElement->textContent)) {
-            $this->rawBlocks[] = $this->styleBuilder->compile($styleElement);
+        if ($styleBlocks->length) {
+            foreach ($styleBlocks as $styleBlock) {
+                /* @var DOMElement $styleBlock */
+                $this->rawBlocks[] = $this->styleBuilder->compile($styleBlock);
+            }
         }
 
         if (!$templateElement) {
@@ -1015,7 +1017,7 @@ private function twigRemove(DOMElement $node): bool
 
     private function addScopedAttribute(DOMElement $node): void
     {
-        if (!$this->styleBuilder->isScoped()) {
+        if (!$this->styleBuilder->hasScoped()) {
             return;
         }
         $scopedAttribute = $this->styleBuilder->getScopedAttribute();

src/Utils/StyleBuilder.php

@@ -5,7 +5,6 @@
 namespace Paneon\VueToTwig\Utils;
 
 use DOMElement;
-use DOMNode;
 use Exception;
 use Ramsey\Uuid\Uuid;
 use ScssPhp\ScssPhp\Compiler as ScssCompiler;
@@ -23,9 +22,9 @@ class StyleBuilder
     private $lang;
 
     /**
-     * @var bool|null
+     * @var bool
      */
-    private $isScoped;
+    private $hasScoped;
 
     /**
      * @var string|null
@@ -40,50 +39,46 @@ class StyleBuilder
     public function __construct()
     {
         $this->scopedAttribute = 'data-v-' . substr(md5(Uuid::uuid4()->toString()), 0, 8);
+        $this->hasScoped = false;
     }
 
     /**
-     * @param DOMNode|DOMElement|null $styleElement
+     * @param DOMElement|null $styleElement
      */
     public function compile($styleElement): ?string
     {
         if (!$styleElement instanceof DOMElement) {
             return null;
         }
 
-        $this->handle($styleElement);
+        if (
+            !$this->scssCompiler instanceof ScssCompiler
+            && $styleElement->hasAttribute('lang')
+            && $styleElement->getAttribute('lang') === 'scss'
+        ) {
+            $this->lang = 'scss';
+            $this->scssCompiler = new ScssCompiler();
+        }
 
         $style = $styleElement->textContent;
         if ($this->lang === 'scss') {
             $style = $this->scssCompiler->compile($style);
         }
-        if ($this->isScoped) {
+        if ($styleElement->hasAttribute('scoped')) {
+            $this->hasScoped = true;
             $style = preg_replace('/((?:^|[^},]*?)\S+)(\s*[{,])/i', '$1[' . $this->scopedAttribute . ']$2', $style);
         }
 
         return '<style>' . $style . '</style>';
     }
 
-    public function isScoped(): ?bool
+    public function hasScoped(): ?bool
     {
-        return $this->isScoped;
+        return $this->hasScoped;
     }
 
     public function getScopedAttribute(): string
     {
         return $this->scopedAttribute;
     }
-
-    private function handle(DOMElement $styleElement): void
-    {
-        $this->isScoped = $styleElement->hasAttribute('scoped');
-        if (
-            !$this->scssCompiler instanceof ScssCompiler
-            && $styleElement->hasAttribute('lang')
-            && $styleElement->getAttribute('lang') === 'scss'
-        ) {
-            $this->lang = 'scss';
-            $this->scssCompiler = new ScssCompiler();
-        }
-    }
 }

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

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

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

@@ -0,0 +1,31 @@
+<template>
+<div>
+  <div class="foo bar baz">
+    42
+  </div>
+</div>
+</template>
+
+<style>
+  .foo {
+    color: red;
+  }
+</style>
+
+<style scoped>
+  .bar {
+    color: blue;
+  }
+</style>
+
+<style lang="scss">
+  $green: #00FF00;
+  .baz {
+    color: $green;
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>