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[] {
const result: ElementAndExist[] = [];
let prev: INode = node;
while ((prev = prev.prev) && prev.type !== 'Element') {
if (prev.type === 'EachBlock' || prev.type === 'IfBlock' || prev.type === 'AwaitBlock') {
while (prev = prev.prev) {
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);
result.push(...possible_last_child);
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) {
let parent: INode = node;
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",
frame: `
17:
18: /* no match */
19: article ~ div {
10:
11: /* no match */
12: article ~ div { color: green; }
^
20: color: green;
21: }`,
13: span ~ article { color: green; }
14: b ~ article { color: green; }`,
message: 'Unused CSS selector "article ~ div"',
pos: 194,
start: { character: 194, column: 1, line: 19 },
end: { character: 207, column: 14, line: 19 }
pos: 275,
start: { character: 275, column: 1, line: 12 },
end: { character: 288, column: 14, line: 12 },
},
{
code: "css-unused-selector",
frame: `
20: color: green;
21: }
22: span ~ article {
11: /* no match */
12: article ~ div { color: green; }
13: span ~ article { color: green; }
^
23: color: green;
24: }`,
14: b ~ article { color: green; }
15: span ~ div { color: green; }`,
message: 'Unused CSS selector "span ~ article"',
pos: 230,
start: { character: 230, column: 1, line: 22 },
end: { character: 244, column: 15, line: 22 }
pos: 308,
start: { character: 308, column: 1, line: 13 },
end: { character: 322, column: 15, line: 13 },
},
{
code: "css-unused-selector",
frame: `
23: color: green;
24: }
25: b ~ article {
12: article ~ div { color: green; }
13: span ~ article { color: green; }
14: b ~ article { color: green; }
^
26: color: green;
27: }`,
15: span ~ div { color: green; }
16: </style>`,
message: 'Unused CSS selector "b ~ article"',
pos: 267,
start: { character: 267, column: 1, line: 25 },
end: { character: 278, column: 12, line: 25 }
pos: 342,
start: { character: 342, column: 1, line: 14 },
end: { character: 353, column: 12, line: 14 },
},
{
code: "css-unused-selector",
frame: `
26: color: green;
27: }
28: span ~ div {
13: span ~ article { color: green; }
14: b ~ article { color: green; }
15: span ~ div { color: green; }
^
29: color: green;
30: }`,
16: </style>
17:`,
message: 'Unused CSS selector "span ~ div"',
pos: 301,
start: { character: 301, column: 1, line: 28 },
end: { character: 311, column: 11, line: 28 }
}
]
pos: 373,
start: { character: 373, column: 1, line: 15 },
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}

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

@ -3,3 +3,5 @@
<b class="svelte-xyz"></b>
</div>
<article class="b svelte-xyz"></article>
<p class="c svelte-xyz"></p>
<details class="d svelte-xyz"></details>

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

@ -1,33 +1,18 @@
<style>
div ~ article {
color: green;
}
span ~ b {
color: green;
}
div span ~ b {
color: green;
}
.a ~ article {
color: green;
}
div ~ .b {
color: green;
}
div ~ article { color: green; }
span ~ b { color: green; }
div span ~ b { color: green; }
.a ~ article { color: green; }
div ~ .b { color: green; }
.a ~ .c { color: green; }
article ~ details { color: green; }
.a ~ details { color: green; }
/* no match */
article ~ div {
color: green;
}
span ~ article {
color: green;
}
b ~ article {
color: green;
}
span ~ div {
color: green;
}
article ~ div { color: green; }
span ~ article { color: green; }
b ~ article { color: green; }
span ~ div { color: green; }
</style>
<div class="a">
@ -35,3 +20,5 @@
<b />
</div>
<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