Fix scoped styles

Author: tronsha

src/Utils/StyleBuilder.php

@@ -94,20 +94,23 @@ public function compile(?DOMElement $styleElement): ?string
         if ($styleElement->hasAttribute('scoped')) {
             $this->hasScoped = true;
             preg_match_all(
-                '/(?:^|\s)\s*[^@\s,][\.a-z0-9-_:\/\s]+?\s*[{,]/i',
+                '/(?:^|\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
-                );
+                $selectors = explode(',', $match[0]);
+                foreach ($selectors as $selector) {
+                    $regex = strpos($selector, '/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(
+                        $selector,
+                        preg_replace($regex, '$1[' . $this->scopedAttribute . ']$2', $selector),
+                        $style
+                    );
+                }
             }
         }
 

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

@@ -0,0 +1,4 @@
+<style>
+    .foo[data-v-9a0d9603def78653cb6bac3e7905721b] { transition: all 400ms ease; overflow: hidden; will-change: height, margin, padding, opacity; }
+</style>
+<div class="foo {{ class|default('') }}" data-v-9a0d9603def78653cb6bac3e7905721b {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}"></div>

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

@@ -0,0 +1,16 @@
+<template>
+  <div class="foo"></div>
+</template>
+
+<style scoped>
+  .foo {
+      transition: all 400ms ease;
+      overflow: hidden;
+      will-change: height, margin, padding, opacity;
+  }
+</style>
+
+<script>
+    export default {
+    }
+</script>