Merge pull request #84 from tronsha/feature/scoped-style-deep-support

Add deep support for scoped styles

Author: tronsha

src/Compiler.php

@@ -122,7 +122,7 @@ class Compiler
     protected $attributesWithIf = ['checked', 'selected', 'disabled'];
 
     /**
-     * @var array
+     * @var int[]
      */
     protected $slotFallbackCounter = [];
 

src/Utils/StyleBuilder.php

@@ -93,11 +93,30 @@ 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) {
+                $selectors = explode(',', $match[0]);
+                $selectorsCount = count($selectors);
+                $count = 0;
+                foreach ($selectors as $selector) {
+                    if (++$count < $selectorsCount) {
+                        $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
+                    );
+                }
+            }
         }
 
         return '<style>' . $style . '</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>

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

@@ -0,0 +1,2 @@
+<style>.grow-enter[data-v-de62703e2bdacde95c4bc73d69f14aa5], .grow-leave-to[data-v-de62703e2bdacde95c4bc73d69f14aa5] { width: 0 !important; }.grow-enter-active[data-v-de62703e2bdacde95c4bc73d69f14aa5], .grow-leave-active[data-v-de62703e2bdacde95c4bc73d69f14aa5] { transition: width 0.6s ease; }</style>
+<div class="bar {{ class|default('') }}" data-v-de62703e2bdacde95c4bc73d69f14aa5 {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}"></div>

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

@@ -0,0 +1,23 @@
+<template>
+  <div class="bar">
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator';
+
+@Component
+export default class Progressbar extends Vue {
+}
+</script>
+
+<style lang="scss" scoped>
+  .grow-enter,
+  .grow-leave-to {
+    width: 0 !important;
+  }
+  .grow-enter-active,
+  .grow-leave-active {
+    transition: width 0.6s ease;
+  }
+</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>