Fix style block support

Author: tronsha

src/Compiler.php

@@ -190,8 +190,8 @@ public function convert(): string
         }
 
         $html = $this->addVariableBlocks($html);
-        $html = $this->replaceScopedPlaceholders($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);
@@ -367,15 +367,15 @@ private function preparePropertiesForInclude(array $variables): array
             } elseif (strpos($name, 'dataV') === 0 && strlen($name) === 37) {
                 unset($variables[$key]);
                 $variables[] = new Property(
-                    'scoped',
+                    'dataScopedStyleAttribute',
                     '"data-v-' . strtolower(substr($name, 5)) . '"',
                     false
                 );
-            } elseif ($name === '__SCOPED_DEFAULT__') {
+            } elseif ($name === '__DATA_SCOPED_STYLE_ATTRIBUTE__') {
                 unset($variables[$key]);
                 $variables[] = new Property(
-                    'scoped',
-                    'scoped|default(\'\')',
+                    'dataScopedStyleAttribute',
+                    'dataScopedStyleAttribute|default(\'\')',
                     false
                 );
             }
@@ -1252,13 +1252,13 @@ private function addScopedAttribute(DOMElement $node, int $level): void
         }
 
         if ($this->styleBuilder->getOutputType() & StyleBuilder::STYLE_SCOPED) {
-            $node->setAttributeNode(new DOMAttr('__SCOPED_DEFAULT__', ''));
+            $node->setAttributeNode(new DOMAttr('__DATA_SCOPED_STYLE_ATTRIBUTE__', ''));
         }
     }
 
     private function replaceScopedPlaceholders(string $html): string
     {
-        $html = str_replace('__SCOPED_DEFAULT__=""', '{{ scoped|default(\'\') }}', $html);
+        $html = str_replace('__DATA_SCOPED_STYLE_ATTRIBUTE__=""', '{{ dataScopedStyleAttribute|default(\'\') }}', $html);
         $html = preg_replace('/(data-v-[0-9a-f]{32})=""/', '$1', $html);
 
         return $html;

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

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

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

@@ -13,7 +13,7 @@
     text-decoration: underline;
   }
 </style>
-<div class="root {{ class|default('') }}" data-v-6737f06d5bb113335593e128322855f1 {{ scoped|default('') }} style="{{ style|default('') }}">
+<div class="root {{ class|default('') }}" data-v-6737f06d5bb113335593e128322855f1 {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}">
   <div class="foo" data-v-6737f06d5bb113335593e128322855f1>
     foo
   </div>

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

@@ -1,5 +1,5 @@
 <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 {{ scoped|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
+<div data-v-eb50964453fb1d39d2d2f020c6639c00 {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
     <div class="foo__bar" data-v-eb50964453fb1d39d2d2f020c6639c00>
       baz
     </div>

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

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

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

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