Merge pull request #105 from tronsha/fix/deep

Fix deep

Author: tronsha

src/Utils/StyleBuilder.php

@@ -94,7 +94,7 @@ public function compile(?DOMElement $styleElement, ?string $path = null): ?strin
         if ($styleElement->hasAttribute('scoped')) {
             $this->hasScoped = true;
             preg_match_all(
-                '/(?:^|\s)\s*[^@\s][\.a-z0-9-_:,\(\)\/\s]+?\s*[{]/i',
+                '/(?:^|\s)\s*[^@\s][^{}]+?\s*[{]/i',
                 $style,
                 $matches,
                 PREG_SET_ORDER
@@ -107,14 +107,22 @@ public function compile(?DOMElement $styleElement, ?string $path = null): ?strin
                     if (++$count < $selectorsCount) {
                         $selector .= ',';
                     }
-                    $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,
-                        preg_replace($regex, '$1[' . $this->scopedAttribute . ']$2', $selector),
-                        $style
-                    );
+                    if (preg_match('/^[\s}]*::v-deep/', $selector)) {
+                        $style = str_replace(
+                            $selector,
+                            str_replace('::v-deep', '[' . $this->scopedAttribute . ']', $selector),
+                            $style
+                        );
+                    } else {
+                        $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,
+                            preg_replace($regex, '$1[' . $this->scopedAttribute . ']$2', $selector),
+                            $style
+                        );
+                    }
                 }
             }
         }

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

@@ -0,0 +1,12 @@
+<style>
+    .foo[data-v-7e66383ada15fdfce08f163adad1e7b2] ul > li { color: purple; }
+    .foo[data-v-7e66383ada15fdfce08f163adad1e7b2] ul #first { color: red; }
+    .foo[data-v-7e66383ada15fdfce08f163adad1e7b2] [target=_blank] { color: blue; }
+</style>
+<div class="foo {{ class|default('') }}" data-v-7e66383ada15fdfce08f163adad1e7b2 {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}">
+    <ul data-v-7e66383ada15fdfce08f163adad1e7b2>
+        <li id="first" data-v-7e66383ada15fdfce08f163adad1e7b2>foo</li>
+        <li data-v-7e66383ada15fdfce08f163adad1e7b2>foo</li>
+    </ul>
+    <a href="#" target="_blank" data-v-7e66383ada15fdfce08f163adad1e7b2>foo</a>
+</div>

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

@@ -0,0 +1,26 @@
+<template>
+<div class="foo">
+  <ul>
+    <li id="first">foo</li>
+    <li>foo</li>
+  </ul>
+  <a href="#" target="_blank">foo</a>
+</div>
+</template>
+
+<style scoped>
+  .foo::v-deep ul > li {
+   color: purple;
+  }
+  .foo::v-deep ul #first {
+    color: red;
+  }
+  .foo::v-deep [target=_blank] {
+    color: blue;
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>

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

@@ -0,0 +1,6 @@
+<style>.foo[data-v-a75773abe77e60d5eec0d774b5e2deab] { color: black;}[data-v-a75773abe77e60d5eec0d774b5e2deab] .foo__bar { color: purple;}</style>
+<div class="foo {{ class|default('') }}" data-v-a75773abe77e60d5eec0d774b5e2deab {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}">
+    <span class="foo__bar" data-v-a75773abe77e60d5eec0d774b5e2deab>
+        test
+    </span>
+</div>

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

@@ -0,0 +1,22 @@
+<template>
+<div class="foo">
+  <span class="foo__bar">
+    test
+  </span>
+</div>
+</template>
+
+<style lang="scss" scoped>
+  .foo {
+    color: black;
+
+    /deep/ &__bar {
+      color: purple;
+    }
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>