Skip to content

Commit 10a85b8

Browse files
tronshatronsha
committed
Merge remote-tracking branch 'origin/master' into feature/data-support
2 parents 651b8c4 + 1fa7200 commit 10a85b8

9 files changed

+85
-33
lines changed

‎src/Compiler.php

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,19 @@ public function convert(): string
182182
}
183183

184184
if ($styleBlocks->length) {
185-
$this->styleBuilder->setScopedAttribute('data-v-' . md5($this->document->textContent));
185+
$scopedStyleContent = null;
186+
foreach ($styleBlocks as $styleBlock) {
187+
/* @var DOMElement $styleBlock */
188+
if ($styleBlock->hasAttribute('scoped')) {
189+
$scopedStyleContent =
190+
$scopedStyleContent === null
191+
? $styleBlock->textContent
192+
: $scopedStyleContent . ' ' . $styleBlock->textContent;
193+
}
194+
}
195+
if ($scopedStyleContent !== null) {
196+
$this->styleBuilder->setScopedAttribute('data-v-' . md5($scopedStyleContent));
197+
}
186198
foreach ($styleBlocks as $styleBlock) {
187199
/* @var DOMElement $styleBlock */
188200
$this->rawBlocks[] = $this->styleBuilder->compile($styleBlock);
@@ -380,6 +392,7 @@ public function convertNode(DOMNode $node, int $level = 0): DOMNode
380392
private function preparePropertiesForInclude(array $variables): array
381393
{
382394
$values = [];
395+
$hasScopedStyleAttribute = false;
383396
foreach ($variables as $key => $variable) {
384397
$name = $variable->getName();
385398
$value = $variable->getValue();
@@ -391,6 +404,7 @@ private function preparePropertiesForInclude(array $variables): array
391404
}
392405
unset($variables[$key]);
393406
} elseif (strpos($name, 'dataV') === 0 && strlen($name) === 37) {
407+
$hasScopedStyleAttribute = true;
394408
unset($variables[$key]);
395409
$variables[] = new Property(
396410
'dataScopedStyleAttribute',
@@ -399,6 +413,9 @@ private function preparePropertiesForInclude(array $variables): array
399413
);
400414
} elseif ($name === '__DATA_SCOPED_STYLE_ATTRIBUTE__') {
401415
unset($variables[$key]);
416+
if ($hasScopedStyleAttribute) {
417+
continue;
418+
}
402419
$variables[] = new Property(
403420
'dataScopedStyleAttribute',
404421
'dataScopedStyleAttribute|default(\'\')',
@@ -581,10 +598,10 @@ private function handleAttributeBinding(DOMElement $node): void
581598

582599
if ($addIfAroundAttribute && $value) {
583600
$value = $name . '|' . base64_encode(
584-
$this->builder->refactorCondition(
585-
$this->replacePlaceholders($value)
586-
)
587-
);
601+
$this->builder->refactorCondition(
602+
$this->replacePlaceholders($value)
603+
)
604+
);
588605
$name = '__ATTRIBUTE_WITH_IF_CONDITION__';
589606
$oldValue = $node->getAttribute($name);
590607
if ($oldValue) {
@@ -1299,17 +1316,15 @@ private function twigRemove(DOMElement $node): bool
12991316

13001317
private function addScopedAttribute(DOMElement $node, int $level): void
13011318
{
1302-
if ($this->styleBuilder->hasScoped()) {
1319+
if ($this->styleBuilder->hasScoped() && $this->styleBuilder->getScopedAttribute()) {
13031320
$scopedAttribute = $this->styleBuilder->getScopedAttribute();
13041321
$node->setAttributeNode(new DOMAttr($scopedAttribute, ''));
1305-
1306-
if ($level !== 1) {
1307-
return;
1308-
}
13091322
}
13101323

1311-
if ($this->styleBuilder->getOutputType() & StyleBuilder::STYLE_SCOPED) {
1312-
$node->setAttributeNode(new DOMAttr('__DATA_SCOPED_STYLE_ATTRIBUTE__', ''));
1324+
if ($level === 1) {
1325+
if ($this->styleBuilder->getOutputType() & StyleBuilder::STYLE_SCOPED) {
1326+
$node->setAttributeNode(new DOMAttr('__DATA_SCOPED_STYLE_ATTRIBUTE__', ''));
1327+
}
13131328
}
13141329
}
13151330

‎src/Utils/StyleBuilder.php

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
use DOMElement;
88
use Exception;
99
use ScssPhp\ScssPhp\Compiler as ScssCompiler;
10+
use ScssPhp\ScssPhp\Exception\CompilerException;
1011

1112
class StyleBuilder
1213
{
@@ -83,7 +84,11 @@ public function compile(?DOMElement $styleElement): ?string
8384
if ($this->scssCompiler === null) {
8485
$this->scssCompiler = new ScssCompiler();
8586
}
86-
$style = $this->scssCompiler->compile($this->scssData . ' ' . $style);
87+
try {
88+
$style = $this->scssCompiler->compile($this->scssData . ' ' . $style);
89+
} catch (CompilerException $e) {
90+
$style = "\n/* Warning: " . $e->getMessage() . " */\n";
91+
}
8792
}
8893

8994
if ($styleElement->hasAttribute('scoped')) {

‎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>

‎tests/fixtures/style-block/style-block-scss-error-handling.twig

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<style>/* Warning: `./file` file not found for @import: line: 2, column: 1 */</style>
2+
<div class="{{ class|default('') }}" style="{{ style|default('') }}">
3+
<div class="foo">
4+
foo
5+
</div>
6+
</div>

‎tests/fixtures/style-block/style-block-scss-error-handling.vue

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div>
3+
<div class="foo">
4+
foo
5+
</div>
6+
</div>
7+
</template>
8+
9+
<style lang="scss">
10+
@import "./file";
11+
12+
.foo {
13+
color: red;
14+
&__bar {
15+
color: blue;
16+
}
17+
&__baz {
18+
color: $color;
19+
}
20+
}
21+
</style>
22+
23+
<script>
24+
export default {
25+
}
26+
</script>

0 commit comments

Comments
 (0)