diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts index c60bd1d443..611ce5b724 100644 --- a/src/compiler/compile/css/Selector.ts +++ b/src/compiler/compile/css/Selector.ts @@ -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') { diff --git a/test/css/samples/general-siblings-combinator-slot/_config.js b/test/css/samples/general-siblings-combinator-slot/_config.js new file mode 100644 index 0000000000..7fa19c68b4 --- /dev/null +++ b/test/css/samples/general-siblings-combinator-slot/_config.js @@ -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: `, + 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: + 17:`, + message: 'Unused CSS selector ".b ~ .g"', + pos: 246, + start: { character: 246, column: 1, line: 15 }, + end: { character: 253, column: 8, line: 15 }, + }, + ], +}; diff --git a/test/css/samples/general-siblings-combinator-slot/expected.css b/test/css/samples/general-siblings-combinator-slot/expected.css new file mode 100644 index 0000000000..29325e0cef --- /dev/null +++ b/test/css/samples/general-siblings-combinator-slot/expected.css @@ -0,0 +1 @@ +.d.svelte-xyz~.e.svelte-xyz{color:green}.a.svelte-xyz~.g.svelte-xyz{color:green} \ No newline at end of file diff --git a/test/css/samples/general-siblings-combinator-slot/input.svelte b/test/css/samples/general-siblings-combinator-slot/input.svelte new file mode 100644 index 0000000000..e5af4c0962 --- /dev/null +++ b/test/css/samples/general-siblings-combinator-slot/input.svelte @@ -0,0 +1,30 @@ + + + + +
+ +
+ +
+
+
+
+ +
+ + +
\ No newline at end of file diff --git a/test/css/samples/general-siblings-combinator/_config.js b/test/css/samples/general-siblings-combinator/_config.js index 52addc4741..adac80e7d5 100644 --- a/test/css/samples/general-siblings-combinator/_config.js +++ b/test/css/samples/general-siblings-combinator/_config.js @@ -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: `, 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: + 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 }, + }, + ], }; diff --git a/test/css/samples/general-siblings-combinator/expected.css b/test/css/samples/general-siblings-combinator/expected.css index 52944a303a..647a53f778 100644 --- a/test/css/samples/general-siblings-combinator/expected.css +++ b/test/css/samples/general-siblings-combinator/expected.css @@ -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} \ No newline at end of file +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} \ No newline at end of file diff --git a/test/css/samples/general-siblings-combinator/expected.html b/test/css/samples/general-siblings-combinator/expected.html index f4692365dd..01fbffcae4 100644 --- a/test/css/samples/general-siblings-combinator/expected.html +++ b/test/css/samples/general-siblings-combinator/expected.html @@ -2,4 +2,6 @@
-
\ No newline at end of file +
+

+
\ No newline at end of file diff --git a/test/css/samples/general-siblings-combinator/input.svelte b/test/css/samples/general-siblings-combinator/input.svelte index 57f219d792..533702a3a3 100644 --- a/test/css/samples/general-siblings-combinator/input.svelte +++ b/test/css/samples/general-siblings-combinator/input.svelte @@ -1,37 +1,24 @@
-
\ No newline at end of file +
+

+
\ No newline at end of file diff --git a/test/css/samples/siblings-combinator-slot/_config.js b/test/css/samples/siblings-combinator-slot/_config.js new file mode 100644 index 0000000000..c0a00500d4 --- /dev/null +++ b/test/css/samples/siblings-combinator-slot/_config.js @@ -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: `, + 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: + 13:`, + message: 'Unused CSS selector ".c + .f"', + pos: 138, + start: { character: 138, column: 1, line: 11 }, + end: { character: 145, column: 8, line: 11 } + } + ] +}; diff --git a/test/css/samples/siblings-combinator-slot/expected.css b/test/css/samples/siblings-combinator-slot/expected.css new file mode 100644 index 0000000000..bbdd03f274 --- /dev/null +++ b/test/css/samples/siblings-combinator-slot/expected.css @@ -0,0 +1 @@ +.d.svelte-xyz+.e.svelte-xyz{color:green} \ No newline at end of file diff --git a/test/css/samples/siblings-combinator-slot/input.svelte b/test/css/samples/siblings-combinator-slot/input.svelte new file mode 100644 index 0000000000..42fe0e4c30 --- /dev/null +++ b/test/css/samples/siblings-combinator-slot/input.svelte @@ -0,0 +1,24 @@ + + + + +
+ +
+ +
+
+
+
+ + +
\ No newline at end of file