msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

fix siblings for slots

Browse Source
pull/5427/head
Tan Li Hau 5 years ago
parent 66201c2fd8
commit 1469da4634
11 changed files with 253 additions and 70 deletions
Show Stats Download Patch File Download Diff File

16
src/compiler/compile/css/Selector.ts
Unescape View File

@ -418,8 +418,16 @@ function get_element_parent(node: Element): Element | null {
function get_possible_element_siblings(node: INode, adjacent_only: boolean): ElementAndExist[] { function get_possible_element_siblings(node: INode, adjacent_only: boolean): ElementAndExist[] {
const result: ElementAndExist[] = []; const result: ElementAndExist[] = [];
let prev: INode = node; let prev: INode = node;
while ((prev = prev.prev) && prev.type !== 'Element') { while (prev = prev.prev) {
if (prev.type === 'EachBlock' || prev.type === 'IfBlock' || prev.type === 'AwaitBlock') { if (prev.type === 'Element') {
if (!prev.attributes.find(attr => attr.name.toLowerCase() === 'slot')) {
result.push({ element: prev as Element, exist: NodeExist.Definitely });
}
if (adjacent_only) {
break;
}
} else if (prev.type === 'EachBlock' || prev.type === 'IfBlock' || prev.type === 'AwaitBlock') {
const possible_last_child = get_possible_last_child(prev, adjacent_only); const possible_last_child = get_possible_last_child(prev, adjacent_only);
result.push(...possible_last_child); result.push(...possible_last_child);
if (adjacent_only && possible_last_child.find(child => child.exist === NodeExist.Definitely)) { if (adjacent_only && possible_last_child.find(child => child.exist === NodeExist.Definitely)) {
@ -428,10 +436,6 @@ function get_possible_element_siblings(node: INode, adjacent_only: boolean): Ele
} }
} }
if (prev) {
result.push({ element: prev as Element, exist: NodeExist.Definitely });
}
if (!prev || !adjacent_only) { if (!prev || !adjacent_only) {
let parent: INode = node; let parent: INode = node;
if (node.type === 'ElseBlock') { if (node.type === 'ElseBlock') {

88
test/css/samples/general-siblings-combinator-slot/_config.js
Unescape View File

@ -0,0 +1,88 @@
export default {
warnings: [
{
code: "css-unused-selector",
frame: `
8:
9: /* no match */
10: .a ~ .b { color: green; }
^
11: .b ~ .c { color: green; }
12: .c ~ .f { color: green; }`,
message: 'Unused CSS selector ".a ~ .b"',
pos: 111,
start: { character: 111, column: 1, line: 10 },
end: { character: 118, column: 8, line: 10 },
},
{
code: "css-unused-selector",
frame: `
9: /* no match */
10: .a ~ .b { color: green; }
11: .b ~ .c { color: green; }
^
12: .c ~ .f { color: green; }
13: .f ~ .g { color: green; }`,
message: 'Unused CSS selector ".b ~ .c"',
pos: 138,
start: { character: 138, column: 1, line: 11 },
end: { character: 145, column: 8, line: 11 },
},
{
code: "css-unused-selector",
frame: `
10: .a ~ .b { color: green; }
11: .b ~ .c { color: green; }
12: .c ~ .f { color: green; }
^
13: .f ~ .g { color: green; }
14: .b ~ .f { color: green; }`,
message: 'Unused CSS selector ".c ~ .f"',
pos: 165,
start: { character: 165, column: 1, line: 12 },
end: { character: 172, column: 8, line: 12 },
},
{
code: "css-unused-selector",
frame: `
11: .b ~ .c { color: green; }
12: .c ~ .f { color: green; }
13: .f ~ .g { color: green; }
^
14: .b ~ .f { color: green; }
15: .b ~ .g { color: green; }`,
message: 'Unused CSS selector ".f ~ .g"',
pos: 192,
start: { character: 192, column: 1, line: 13 },
end: { character: 199, column: 8, line: 13 },
},
{
code: "css-unused-selector",
frame: `
12: .c ~ .f { color: green; }
13: .f ~ .g { color: green; }
14: .b ~ .f { color: green; }
^
15: .b ~ .g { color: green; }
16: </style>`,
message: 'Unused CSS selector ".b ~ .f"',
pos: 219,
start: { character: 219, column: 1, line: 14 },
end: { character: 226, column: 8, line: 14 },
},
{
code: "css-unused-selector",
frame: `
13: .f ~ .g { color: green; }
14: .b ~ .f { color: green; }
15: .b ~ .g { color: green; }
^
16: </style>
17:`,
message: 'Unused CSS selector ".b ~ .g"',
pos: 246,
start: { character: 246, column: 1, line: 15 },
end: { character: 253, column: 8, line: 15 },
},
],
};

1
test/css/samples/general-siblings-combinator-slot/expected.css
Unescape View File

@ -0,0 +1 @@
.d.svelte-xyz~.e.svelte-xyz{color:green}.a.svelte-xyz~.g.svelte-xyz{color:green}

30
test/css/samples/general-siblings-combinator-slot/input.svelte
Unescape View File

@ -0,0 +1,30 @@
<script>
let App;
</script>
<style>
.d ~ .e { color: green; }
.a ~ .g { color: green; }
/* no match */
.a ~ .b { color: green; }
.b ~ .c { color: green; }
.c ~ .f { color: green; }
.f ~ .g { color: green; }
.b ~ .f { color: green; }
.b ~ .g { color: green; }
</style>
<div class="a" />
<App>
<div class="b" slot="a" />
<div class="c" slot="b">
<div class="d" />
<div class="e" />
</div>
<div class="f" slot="c" />
</App>
<div class="g" />

68
test/css/samples/general-siblings-combinator/_config.js
Unescape View File

@ -3,58 +3,58 @@ export default {
{ {
code: "css-unused-selector", code: "css-unused-selector",
frame: ` frame: `
17: 10:
18: /* no match */ 11: /* no match */
19: article ~ div { 12: article ~ div { color: green; }
^ ^
20: color: green; 13: span ~ article { color: green; }
21: }`, 14: b ~ article { color: green; }`,
message: 'Unused CSS selector "article ~ div"', message: 'Unused CSS selector "article ~ div"',
pos: 194, pos: 275,
start: { character: 194, column: 1, line: 19 }, start: { character: 275, column: 1, line: 12 },
end: { character: 207, column: 14, line: 19 } end: { character: 288, column: 14, line: 12 },
}, },
{ {
code: "css-unused-selector", code: "css-unused-selector",
frame: ` frame: `
20: color: green; 11: /* no match */
21: } 12: article ~ div { color: green; }
22: span ~ article { 13: span ~ article { color: green; }
^ ^
23: color: green; 14: b ~ article { color: green; }
24: }`, 15: span ~ div { color: green; }`,
message: 'Unused CSS selector "span ~ article"', message: 'Unused CSS selector "span ~ article"',
pos: 230, pos: 308,
start: { character: 230, column: 1, line: 22 }, start: { character: 308, column: 1, line: 13 },
end: { character: 244, column: 15, line: 22 } end: { character: 322, column: 15, line: 13 },
}, },
{ {
code: "css-unused-selector", code: "css-unused-selector",
frame: ` frame: `
23: color: green; 12: article ~ div { color: green; }
24: } 13: span ~ article { color: green; }
25: b ~ article { 14: b ~ article { color: green; }
^ ^
26: color: green; 15: span ~ div { color: green; }
27: }`, 16: </style>`,
message: 'Unused CSS selector "b ~ article"', message: 'Unused CSS selector "b ~ article"',
pos: 267, pos: 342,
start: { character: 267, column: 1, line: 25 }, start: { character: 342, column: 1, line: 14 },
end: { character: 278, column: 12, line: 25 } end: { character: 353, column: 12, line: 14 },
}, },
{ {
code: "css-unused-selector", code: "css-unused-selector",
frame: ` frame: `
26: color: green; 13: span ~ article { color: green; }
27: } 14: b ~ article { color: green; }
28: span ~ div { 15: span ~ div { color: green; }
^ ^
29: color: green; 16: </style>
30: }`, 17:`,
message: 'Unused CSS selector "span ~ div"', message: 'Unused CSS selector "span ~ div"',
pos: 301, pos: 373,
start: { character: 301, column: 1, line: 28 }, start: { character: 373, column: 1, line: 15 },
end: { character: 311, column: 11, line: 28 } end: { character: 383, column: 11, line: 15 },
} },
] ],
}; };

2
test/css/samples/general-siblings-combinator/expected.css
Unescape View File

@ -1 +1 @@
div.svelte-xyz~article.svelte-xyz.svelte-xyz{color:green}span.svelte-xyz~b.svelte-xyz.svelte-xyz{color:green}div.svelte-xyz span.svelte-xyz~b.svelte-xyz{color:green}.a.svelte-xyz~article.svelte-xyz.svelte-xyz{color:green}div.svelte-xyz~.b.svelte-xyz.svelte-xyz{color:green} div.svelte-xyz~article.svelte-xyz.svelte-xyz{color:green}span.svelte-xyz~b.svelte-xyz.svelte-xyz{color:green}div.svelte-xyz span.svelte-xyz~b.svelte-xyz{color:green}.a.svelte-xyz~article.svelte-xyz.svelte-xyz{color:green}div.svelte-xyz~.b.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.c.svelte-xyz.svelte-xyz{color:green}article.svelte-xyz~details.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~details.svelte-xyz.svelte-xyz{color:green}

4
test/css/samples/general-siblings-combinator/expected.html
Unescape View File

@ -2,4 +2,6 @@
<span class="svelte-xyz"></span> <span class="svelte-xyz"></span>
<b class="svelte-xyz"></b> <b class="svelte-xyz"></b>
</div> </div>
<article class="b svelte-xyz"></article> <article class="b svelte-xyz"></article>
<p class="c svelte-xyz"></p>
<details class="d svelte-xyz"></details>

43
test/css/samples/general-siblings-combinator/input.svelte
Unescape View File

@ -1,37 +1,24 @@
<style> <style>
div ~ article { div ~ article { color: green; }
color: green; span ~ b { color: green; }
} div span ~ b { color: green; }
span ~ b { .a ~ article { color: green; }
color: green; div ~ .b { color: green; }
} .a ~ .c { color: green; }
div span ~ b { article ~ details { color: green; }
color: green; .a ~ details { color: green; }
}
.a ~ article {
color: green;
}
div ~ .b {
color: green;
}
/* no match */ /* no match */
article ~ div { article ~ div { color: green; }
color: green; span ~ article { color: green; }
} b ~ article { color: green; }
span ~ article { span ~ div { color: green; }
color: green;
}
b ~ article {
color: green;
}
span ~ div {
color: green;
}
</style> </style>
<div class="a"> <div class="a">
<span /> <span />
<b /> <b />
</div> </div>
<article class="b"></article> <article class="b"></article>
<p class="c"></p>
<details class="d"></details>

46
test/css/samples/siblings-combinator-slot/_config.js
Unescape View File

@ -0,0 +1,46 @@
export default {
warnings: [
{
code: "css-unused-selector",
frame: `
7:
8: /* no match */
9: .a + .b { color: green; }
^
10: .b + .c { color: green; }
11: .c + .f { color: green; }`,
message: 'Unused CSS selector ".a + .b"',
pos: 84,
start: { character: 84, column: 1, line: 9 },
end: { character: 91, column: 8, line: 9 }
},
{
code: "css-unused-selector",
frame: `
8: /* no match */
9: .a + .b { color: green; }
10: .b + .c { color: green; }
^
11: .c + .f { color: green; }
12: </style>`,
message: 'Unused CSS selector ".b + .c"',
pos: 111,
start: { character: 111, column: 1, line: 10 },
end: { character: 118, column: 8, line: 10 }
},
{
code: "css-unused-selector",
frame: `
9: .a + .b { color: green; }
10: .b + .c { color: green; }
11: .c + .f { color: green; }
^
12: </style>
13:`,
message: 'Unused CSS selector ".c + .f"',
pos: 138,
start: { character: 138, column: 1, line: 11 },
end: { character: 145, column: 8, line: 11 }
}
]
};

1
test/css/samples/siblings-combinator-slot/expected.css
Unescape View File

@ -0,0 +1 @@
.d.svelte-xyz+.e.svelte-xyz{color:green}

24
test/css/samples/siblings-combinator-slot/input.svelte
Unescape View File

@ -0,0 +1,24 @@
<script>
let App;
</script>
<style>
.d + .e { color: green; }
/* no match */
.a + .b { color: green; }
.b + .c { color: green; }
.c + .f { color: green; }
</style>
<div class="a" />
<App>
<div class="b" slot="a" />
<div class="c" slot="b">
<div class="d" />
<div class="e" />
</div>
</App>
<div class="f" />
Write Preview
Loading…
Cancel
Save