Skip to content

Commit 5beddb9

Browse files
tronshatronsha
authored
Merge pull request #71 from tronsha/feature/change-scoped-css-key
Changed scoped style
2 parents f489443 + 4ba69a0 commit 5beddb9

File tree

6 files changed

+38
-28
lines changed

6 files changed

+38
-28
lines changed

‎src/Compiler.php

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,19 @@ public function convert(): string
181181
}
182182

183183
if ($styleBlocks->length) {
184-
$this->styleBuilder->setScopedAttribute('data-v-' . md5($this->document->textContent));
184+
$scopedStyleContent = null;
185+
foreach ($styleBlocks as $styleBlock) {
186+
/* @var DOMElement $styleBlock */
187+
if ($styleBlock->hasAttribute('scoped')) {
188+
$scopedStyleContent =
189+
$scopedStyleContent === null
190+
? $styleBlock->textContent
191+
: $scopedStyleContent . ' ' . $styleBlock->textContent;
192+
}
193+
}
194+
if ($scopedStyleContent !== null) {
195+
$this->styleBuilder->setScopedAttribute('data-v-' . md5($scopedStyleContent));
196+
}
185197
foreach ($styleBlocks as $styleBlock) {
186198
/* @var DOMElement $styleBlock */
187199
$this->rawBlocks[] = $this->styleBuilder->compile($styleBlock);
@@ -1289,17 +1301,15 @@ private function twigRemove(DOMElement $node): bool
12891301

12901302
private function addScopedAttribute(DOMElement $node, int $level): void
12911303
{
1292-
if ($this->styleBuilder->hasScoped()) {
1304+
if ($this->styleBuilder->hasScoped() && $this->styleBuilder->getScopedAttribute()) {
12931305
$scopedAttribute = $this->styleBuilder->getScopedAttribute();
12941306
$node->setAttributeNode(new DOMAttr($scopedAttribute, ''));
1295-
1296-
if ($level !== 1) {
1297-
return;
1298-
}
12991307
}
13001308

1301-
if ($this->styleBuilder->getOutputType() & StyleBuilder::STYLE_SCOPED) {
1302-
$node->setAttributeNode(new DOMAttr('__DATA_SCOPED_STYLE_ATTRIBUTE__', ''));
1309+
if ($level === 1) {
1310+
if ($this->styleBuilder->getOutputType() & StyleBuilder::STYLE_SCOPED) {
1311+
$node->setAttributeNode(new DOMAttr('__DATA_SCOPED_STYLE_ATTRIBUTE__', ''));
1312+
}
13031313
}
13041314
}
13051315

‎tests/fixtures/style-block-scoped/style-block-scoped-with-child-binding.twig

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<style>
2-
.foo[data-v-a2116698cabca27b45a4db453446b8d2] {
2+
.foo[data-v-7ac31a851ab0c4c52bc569b6f256bfe4] {
33
color: red;
44
}
55
</style>
6-
<div class="root {{ class|default('') }}" data-v-a2116698cabca27b45a4db453446b8d2 {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}">
7-
<div class="foo" data-v-a2116698cabca27b45a4db453446b8d2>
8-
{% include "/templates/ChildComponent.twig" with { 'dataScopedStyleAttribute': "data-v-a2116698cabca27b45a4db453446b8d2", 'class': "", 'style': "" } %}
6+
<div class="root {{ class|default('') }}" data-v-7ac31a851ab0c4c52bc569b6f256bfe4 {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}">
7+
<div class="foo" data-v-7ac31a851ab0c4c52bc569b6f256bfe4>
8+
{% include "/templates/ChildComponent.twig" with { 'dataScopedStyleAttribute': "data-v-7ac31a851ab0c4c52bc569b6f256bfe4", 'class': "", 'style': "" } %}
99
</div>
1010
</div>

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
<style>
2-
.foo[data-v-6737f06d5bb113335593e128322855f1] {
2+
.foo[data-v-298e350ad072842c5a52ec31b90d5edf] {
33
color: red;
44
}
5-
.bar[data-v-6737f06d5bb113335593e128322855f1],
6-
.baz[data-v-6737f06d5bb113335593e128322855f1] {
5+
.bar[data-v-298e350ad072842c5a52ec31b90d5edf],
6+
.baz[data-v-298e350ad072842c5a52ec31b90d5edf] {
77
color: blue;
88
}
9-
.foo:after[data-v-6737f06d5bb113335593e128322855f1] {
9+
.foo:after[data-v-298e350ad072842c5a52ec31b90d5edf] {
1010
display: none;
1111
}
12-
.root .bar[data-v-6737f06d5bb113335593e128322855f1] {
12+
.root .bar[data-v-298e350ad072842c5a52ec31b90d5edf] {
1313
text-decoration: underline;
1414
}
1515
</style>
16-
<div class="root {{ class|default('') }}" data-v-6737f06d5bb113335593e128322855f1 {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}">
17-
<div class="foo" data-v-6737f06d5bb113335593e128322855f1>
16+
<div class="root {{ class|default('') }}" data-v-298e350ad072842c5a52ec31b90d5edf {{ dataScopedStyleAttribute|default('') }} style="{{ style|default('') }}">
17+
<div class="foo" data-v-298e350ad072842c5a52ec31b90d5edf>
1818
foo
1919
</div>
20-
<div class="bar" data-v-6737f06d5bb113335593e128322855f1>
20+
<div class="bar" data-v-298e350ad072842c5a52ec31b90d5edf>
2121
bar
2222
</div>
23-
<div class="baz" data-v-6737f06d5bb113335593e128322855f1>
23+
<div class="baz" data-v-298e350ad072842c5a52ec31b90d5edf>
2424
baz
2525
</div>
2626
</div>

‎tests/fixtures/style-block-scoped/style-block-scss-scoped.twig

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<style>.foo[data-v-eb50964453fb1d39d2d2f020c6639c00] { color: red; } .foo__bar[data-v-eb50964453fb1d39d2d2f020c6639c00] { color: blue; } .foo__baz[data-v-eb50964453fb1d39d2d2f020c6639c00] { color: #00FF00; }</style>
2-
<div data-v-eb50964453fb1d39d2d2f020c6639c00 {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
3-
<div class="foo__bar" data-v-eb50964453fb1d39d2d2f020c6639c00>
1+
<style>.foo[data-v-bc2fd2697c25be635fabb11cba6f24b9] { color: red; } .foo__bar[data-v-bc2fd2697c25be635fabb11cba6f24b9] { color: blue; } .foo__baz[data-v-bc2fd2697c25be635fabb11cba6f24b9] { color: #00FF00; }</style>
2+
<div data-v-bc2fd2697c25be635fabb11cba6f24b9 {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
3+
<div class="foo__bar" data-v-bc2fd2697c25be635fabb11cba6f24b9>
44
baz
55
</div>
66
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<style> .foo { color: red; }</style>
22
<div {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
3-
<div class="foo" {{ dataScopedStyleAttribute|default('') }}>
3+
<div class="foo">
44
foo
55
</div>
66
</div>

‎tests/fixtures/style-block-scoped/style-blocks.twig

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<style> .foo { color: red; }</style>
2-
<style> .bar[data-v-9d8ac5d70d06b0f0d2a21f893932dffe] { color: blue; }</style>
2+
<style> .bar[data-v-d90c32720cdc50ff836bde94d71a2bb5] { color: blue; }</style>
33
<style>.baz { color: #00FF00; }</style>
4-
<div data-v-9d8ac5d70d06b0f0d2a21f893932dffe {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
5-
<div class="foo bar baz" data-v-9d8ac5d70d06b0f0d2a21f893932dffe>
4+
<div data-v-d90c32720cdc50ff836bde94d71a2bb5 {{ dataScopedStyleAttribute|default('') }} class="{{ class|default('') }}" style="{{ style|default('') }}">
5+
<div class="foo bar baz" data-v-d90c32720cdc50ff836bde94d71a2bb5>
66
42
77
</div>
88
</div>

0 commit comments

Comments
 (0)