Add deep support for scoped styles

Author: tronsha

src/Utils/StyleBuilder.php

@@ -93,11 +93,22 @@ public function compile(?DOMElement $styleElement): ?string
 
         if ($styleElement->hasAttribute('scoped')) {
             $this->hasScoped = true;
-            $style = preg_replace(
-                '/((?:^|\s)\s*[^@\s,][a-z0-9-_]+?)((?::{1,2}[a-z-]+)?\s*[{,])/i',
-                '$1[' . $this->scopedAttribute . ']$2',
-                $style
+            preg_match_all(
+                '/(?:^|\s)\s*[^@\s,][\.a-z0-9-_:\/\s]+?\s*[{,]/i',
+                $style,
+                $matches,
+                PREG_SET_ORDER
             );
+            foreach ($matches as $match) {
+                $regex = strpos($match[0], '/deep/') !== false
+                ? '/((?:^|\s)\s*[^@\s,][a-z0-9-_]+?)((?::{1,2}[a-z-]+)?\s*)(?:\/deep\/)/i'
+                : '/((?:^|\s)\s*[^@\s,][a-z0-9-_]+?)((?::{1,2}[a-z-]+)?\s*[{,])/i';
+                $style = str_replace(
+                    $match[0],
+                    preg_replace($regex, '$1[' . $this->scopedAttribute . ']$2', $match[0]),
+                    $style
+                );
+            }
         }
 
         return '<style>' . $style . '</style>';

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

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

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

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