Merge pull request #104 from tronsha/feature/v-deep

Add v-deep support

Author: tronsha

composer.json

@@ -13,7 +13,7 @@
     "php": "^7.3|^8.0",
     "ext-dom": "*",
     "ext-libxml": "*",
-    "scssphp/scssphp": "1.9",
+    "scssphp/scssphp": "^1.9",
     "squizlabs/php_codesniffer": "^3.3",
     "ramsey/uuid": "^3.8"
   },

composer.lock

@@ -78,16 +78,14 @@ public function compile(?DOMElement $styleElement, ?string $path = null): ?strin
             return null;
         }
 
-        $style = $styleElement->textContent;
+        $style = preg_replace('/ *(?:\/deep\/|>>>)/', '::v-deep', $styleElement->textContent);
 
         if ($styleElement->hasAttribute('lang') && $styleElement->getAttribute('lang') === 'scss') {
             if ($this->scssCompiler === null) {
                 $this->scssCompiler = new ScssCompiler();
             }
             try {
-                $style = str_replace('/deep/', '__vue_to_twig_deep_placeholder__', $style);
-                $style = $this->scssCompiler->compile($this->scssData . ' ' . $style, $path);
-                $style = str_replace('__vue_to_twig_deep_placeholder__', '/deep/', $style);
+                $style = $this->scssCompiler->compileString($this->scssData . ' ' . $style, $path)->getCss();
             } catch (SassException $e) {
                 $style = "\n/* Warning: " . $e->getMessage() . " */\n";
             }
@@ -109,8 +107,8 @@ public function compile(?DOMElement $styleElement, ?string $path = null): ?strin
                     if (++$count < $selectorsCount) {
                         $selector .= ',';
                     }
-                    $regex = strpos($selector, '/deep/') !== false
-                        ? '/((?:^|\s)\s*[^@\s][a-z0-9-_]+?)((?::{1,2}[a-z-]+)?\s*)(?:\/deep\/)/i'
+                    $regex = strpos($selector, '::v-deep') !== false
+                        ? '/((?:^|\s)\s*[^@\s][a-z0-9-_]+?)((?::{1,2}[a-z-]+)?\s*)(?:::v-deep)/i'
                         : '/((?:^|\s)\s*[^@\s][a-z0-9-_]+?)((?::{1,2}[a-z-]+)?\s*(?:[,{]|$))/i';
                     $style = str_replace(
                         $selector,

src/Utils/StyleBuilder.php

@@ -0,0 +1,8 @@
+<style>
+    .foo[data-v-a7086bdfdd04b85fedbd31210be0ce0d] li { color: purple; }
+</style>
+<div data-v-a7086bdfdd04b85fedbd31210be0ce0d {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <ul class="foo" data-v-a7086bdfdd04b85fedbd31210be0ce0d>
+        <li data-v-a7086bdfdd04b85fedbd31210be0ce0d>foo</li>
+    </ul>
+</div>

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

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

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

@@ -0,0 +1,6 @@
+<style>.foo[data-v-380077bd8cc6cda5c4990f3e4ac075fd] { color: red;}.foo[data-v-380077bd8cc6cda5c4990f3e4ac075fd] .bar { color: blue;}</style>
+<div data-v-380077bd8cc6cda5c4990f3e4ac075fd {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
+    <div class="foo" data-v-380077bd8cc6cda5c4990f3e4ac075fd>
+        foo
+    </div>
+</div>

tests/fixtures/style-block-scoped/style-block-scoped-v-deep-with-scss.twig

@@ -0,0 +1,21 @@
+<template>
+<div>
+  <div class="foo">
+    foo
+  </div>
+</div>
+</template>
+
+<style lang="scss" scoped>
+  .foo {
+    color: red;
+    &::v-deep .bar {
+      color: blue;
+    }
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>

tests/fixtures/style-block-scoped/style-block-scoped-v-deep-with-scss.vue

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

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

@@ -0,0 +1,21 @@
+<template>
+<div>
+  <div class="foo">
+    foo
+  </div>
+</div>
+</template>
+
+<style scoped>
+  .foo {
+    color: red;
+  }
+  .foo::v-deep .bar {
+   color: blue;
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>