Skip to content

Commit 2592e34

Browse files
authored
Merge pull request #84 from tronsha/feature/scoped-style-deep-support
Add deep support for scoped styles
2 parents 36c63f4 + ab9e600 commit 2592e34

File tree

8 files changed

+99
-5
lines changed

8 files changed

+99
-5
lines changed

src/Compiler.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ class Compiler
122122
protected $attributesWithIf = ['checked', 'selected', 'disabled'];
123123

124124
/**
125-
* @var array
125+
* @var int[]
126126
*/
127127
protected $slotFallbackCounter = [];
128128

src/Utils/StyleBuilder.php

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,30 @@ public function compile(?DOMElement $styleElement): ?string
9393

9494
if ($styleElement->hasAttribute('scoped')) {
9595
$this->hasScoped = true;
96-
$style = preg_replace(
97-
'/((?:^|\s)\s*[^@\s,][a-z0-9-_]+?)((?::{1,2}[a-z-]+)?\s*[{,])/i',
98-
'$1[' . $this->scopedAttribute . ']$2',
99-
$style
96+
preg_match_all(
97+
'/(?:^|\s)\s*[^@\s][\.a-z0-9-_:,\/\s]+?\s*[{]/i',
98+
$style,
99+
$matches,
100+
PREG_SET_ORDER
100101
);
102+
foreach ($matches as $match) {
103+
$selectors = explode(',', $match[0]);
104+
$selectorsCount = count($selectors);
105+
$count = 0;
106+
foreach ($selectors as $selector) {
107+
if (++$count < $selectorsCount) {
108+
$selector .= ',';
109+
}
110+
$regex = strpos($selector, '/deep/') !== false
111+
? '/((?:^|\s)\s*[^@\s][a-z0-9-_]+?)((?::{1,2}[a-z-]+)?\s*)(?:\/deep\/)/i'
112+
: '/((?:^|\s)\s*[^@\s][a-z0-9-_]+?)((?::{1,2}[a-z-]+)?\s*(?:[,{]|$))/i';
113+
$style = str_replace(
114+
$selector,
115+
preg_replace($regex, '$1[' . $this->scopedAttribute . ']$2', $selector),
116+
$style
117+
);
118+
}
119+
}
101120
}
102121

103122
return '<style>' . $style . '</style>';
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<style>
2+
.foo[data-v-9a0d9603def78653cb6bac3e7905721b] { transition: all 400ms ease; overflow: hidden; will-change: height, margin, padding, opacity; }
3+
</style>
4+
<div class="foo {{ class|default('') }}" data-v-9a0d9603def78653cb6bac3e7905721b {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}"></div>
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<div class="foo"></div>
3+
</template>
4+
5+
<style scoped>
6+
.foo {
7+
transition: all 400ms ease;
8+
overflow: hidden;
9+
will-change: height, margin, padding, opacity;
10+
}
11+
</style>
12+
13+
<script>
14+
export default {
15+
}
16+
</script>
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<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>
2+
<div class="bar {{ class|default('') }}" data-v-de62703e2bdacde95c4bc73d69f14aa5 {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}"></div>
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div class="bar">
3+
</div>
4+
</template>
5+
6+
<script lang="ts">
7+
import { Vue, Component } from 'vue-property-decorator';
8+
9+
@Component
10+
export default class Progressbar extends Vue {
11+
}
12+
</script>
13+
14+
<style lang="scss" scoped>
15+
.grow-enter,
16+
.grow-leave-to {
17+
width: 0 !important;
18+
}
19+
.grow-enter-active,
20+
.grow-leave-active {
21+
transition: width 0.6s ease;
22+
}
23+
</style>
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<style>
2+
.foo[data-v-34e67cc3ec28c53ca40eb2cd78aa6d35] { color: red; }
3+
.foo[data-v-34e67cc3ec28c53ca40eb2cd78aa6d35] .bar { color: blue; }
4+
</style>
5+
<div data-v-34e67cc3ec28c53ca40eb2cd78aa6d35 {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
6+
<div class="foo" data-v-34e67cc3ec28c53ca40eb2cd78aa6d35>
7+
foo
8+
</div>
9+
</div>
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div>
3+
<div class="foo">
4+
foo
5+
</div>
6+
</div>
7+
</template>
8+
9+
<style scoped>
10+
.foo {
11+
color: red;
12+
}
13+
.foo /deep/ .bar {
14+
color: blue;
15+
}
16+
</style>
17+
18+
<script>
19+
export default {
20+
}
21+
</script>

0 commit comments

Comments
 (0)