scope css sibling combinator

src/compiler/compile/Component.ts

@@ -29,6 +29,7 @@ import add_to_set from './utils/add_to_set';
 import check_graph_for_cycles from './utils/check_graph_for_cycles';
 import { print, x, b } from 'code-red';
 import { is_reserved_keyword } from './utils/reserved_keywords';
+import Element from './nodes/Element';
 
 interface ComponentOptions {
 	namespace?: string;
@@ -85,6 +86,7 @@ export default class Component {
 	file: string;
 	locate: (c: number) => { line: number; column: number };
 
+	elements: Element[] = [];
 	stylesheet: Stylesheet;
 
 	aliases: Map<string, Identifier> = new Map();
@@ -171,8 +173,8 @@ export default class Component {
 
 		this.walk_instance_js_post_template();
 
+		this.elements.forEach(element => this.stylesheet.apply(element));
 		if (!compile_options.customElement) this.stylesheet.reify();
-
 		this.stylesheet.warn_on_unused_selectors(this);
 	}
 
@@ -221,6 +223,10 @@ export default class Component {
 		return this.aliases.get(name);
 	}
 
+	apply_stylesheet(element: Element) {
+		this.elements.push(element);
+	}
+
 	global(name: string) {
 		const alias = this.alias(name);
 		this.globals.set(name, alias);

src/compiler/compile/css/Selector.ts

@@ -4,12 +4,24 @@ import { gather_possible_values, UNKNOWN } from './gather_possible_values';
 import { CssNode } from './interfaces';
 import Component from '../Component';
 import Element from '../nodes/Element';
+import { INode } from '../nodes/interfaces';
+import EachBlock from '../nodes/EachBlock';
+import IfBlock from '../nodes/IfBlock';
+import AwaitBlock from '../nodes/AwaitBlock';
 
 enum BlockAppliesToNode {
 	NotPossible,
 	Possible,
 	UnknownSelectorType
 }
+enum NodeExist {
+	Probably,
+	Definitely,
+}
+interface ElementAndExist {
+	element: Element;
+	exist: NodeExist;
+}
 
 const whitelist_attribute_selector = new Map([
 	['details', new Set(['open'])]
@@ -39,10 +51,10 @@ export default class Selector {
 		this.used = this.local_blocks.length === 0;
 	}
 
-	apply(node: Element, stack: Element[]) {
+	apply(node: Element) {
 		const to_encapsulate: any[] = [];
 
-		apply_selector(this.local_blocks.slice(), node, stack.slice(), to_encapsulate);
+		apply_selector(this.local_blocks.slice(), node, to_encapsulate);
 
 		if (to_encapsulate.length > 0) {
 			to_encapsulate.forEach(({ node, block }) => {
@@ -149,7 +161,7 @@ export default class Selector {
 	}
 }
 
-function apply_selector(blocks: Block[], node: Element, stack: Element[], to_encapsulate: any[]): boolean {
+function apply_selector(blocks: Block[], node: Element, to_encapsulate: any[]): boolean {
 	const block = blocks.pop();
 	if (!block) return false;
 
@@ -162,7 +174,7 @@ function apply_selector(blocks: Block[], node: Element, stack: Element[], to_enc
 			return false;
 
 		case BlockAppliesToNode.UnknownSelectorType:
-			// bail. TODO figure out what these could be
+		// bail. TODO figure out what these could be
 			to_encapsulate.push({ node, block });
 			return true;
 	}
@@ -174,9 +186,10 @@ function apply_selector(blocks: Block[], node: Element, stack: Element[], to_enc
 					continue;
 				}
 
-				for (const stack_node of stack) {
-					if (block_might_apply_to_node(ancestor_block, stack_node) !== BlockAppliesToNode.NotPossible) {
-						to_encapsulate.push({ node: stack_node, block: ancestor_block });
+				let parent = node;
+				while (parent = get_element_parent(parent)) {
+					if (block_might_apply_to_node(ancestor_block, parent) !== BlockAppliesToNode.NotPossible) {
+						to_encapsulate.push({ node: parent, block: ancestor_block });
 					}
 				}
 
@@ -193,12 +206,32 @@ function apply_selector(blocks: Block[], node: Element, stack: Element[], to_enc
 
 			return false;
 		} else if (block.combinator.name === '>') {
-			if (apply_selector(blocks, stack.pop(), stack, to_encapsulate)) {
+			if (apply_selector(blocks, get_element_parent(node), to_encapsulate)) {
 				to_encapsulate.push({ node, block });
 				return true;
 			}
 
 			return false;
+		} else if (block.combinator.name === '+') {
+			const siblings = get_possible_element_siblings(node, true);
+			let has_match = false;
+			for (const possible_sibling of siblings) {
+				if (apply_selector(blocks.slice(), possible_sibling.element, to_encapsulate)) {
+					to_encapsulate.push({ node, block });
+					has_match = true;
+				}
+			}
+			return has_match;
+		} else if (block.combinator.name === '~') {
+			const siblings = get_possible_element_siblings(node, false);
+			let has_match = false;
+			for (const possible_sibling of siblings) {
+				if (apply_selector(blocks.slice(), possible_sibling.element, to_encapsulate)) {
+					to_encapsulate.push({ node, block });
+					has_match = true;
+				}
+			}
+			return has_match;
 		}
 
 		// TODO other combinators
@@ -376,6 +409,127 @@ function unquote(value: CssNode) {
 	return str;
 }
 
+function get_element_parent(node: Element): Element | null {
+	let parent: INode = node;
+	while ((parent = parent.parent) && parent.type !== 'Element');
+	return parent as 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') {
+			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)) {
+				return result;
+			}
+		}
+	}
+
+	if (prev) {
+		result.push({ element: prev as Element, exist: NodeExist.Definitely });
+	}
+
+	if (!prev || !adjacent_only) {
+		let parent: INode = node;
+		let else_block = node.type === 'ElseBlock';
+		while ((parent = parent.parent) && (parent.type === 'EachBlock' || parent.type === 'IfBlock' || parent.type === 'ElseBlock' || parent.type === 'AwaitBlock')) {
+			const possible_siblings = get_possible_element_siblings(parent, adjacent_only);
+			result.push(...possible_siblings);
+			
+			if (parent.type === 'EachBlock') {
+				if (else_block) {
+					else_block = false;
+				} else {
+					for (const each_parent_last_child of get_possible_last_child(parent, adjacent_only)) {
+						result.push(each_parent_last_child);
+					}
+				}
+			} else if (parent.type === 'ElseBlock') {
+				else_block = true;
+			}
+
+			if (adjacent_only && possible_siblings.find(sibling => sibling.exist === NodeExist.Definitely)) {
+				break;
+			}
+		}
+	}
+
+	return result;
+}
+
+function get_possible_last_child(block: EachBlock | IfBlock | AwaitBlock, adjacent_only: boolean): ElementAndExist[] {
+	const result = [];
+
+	if (block.type === 'EachBlock') {
+		const each_result: ElementAndExist[] = loop_child(block.children, adjacent_only);
+		const else_result: ElementAndExist[] = block.else ? loop_child(block.else.children, adjacent_only) : [];
+		
+		const not_exhaustive =
+			else_result.length === 0 || !else_result.find(result => result.exist === NodeExist.Definitely);
+
+		if (not_exhaustive) {
+			each_result.forEach(result => result.exist = NodeExist.Probably);
+			else_result.forEach(result => result.exist = NodeExist.Probably);
+		}
+		result.push(...each_result, ...else_result);
+	} else if (block.type === 'IfBlock') {
+		const if_result: ElementAndExist[] = loop_child(block.children, adjacent_only);
+		const else_result: ElementAndExist[] = block.else ? loop_child(block.else.children, adjacent_only) : [];
+
+		const not_exhaustive = 
+			if_result.length === 0 || !if_result.find(result => result.exist === NodeExist.Definitely) ||
+			else_result.length === 0 || !else_result.find(result => result.exist === NodeExist.Definitely);
+
+		if (not_exhaustive) {
+			if_result.forEach(result => result.exist = NodeExist.Probably);
+			else_result.forEach(result => result.exist = NodeExist.Probably);
+		}
+
+		result.push(...if_result, ...else_result);
+	} else if (block.type === 'AwaitBlock') {
+		const pending_result: ElementAndExist[] = block.pending ? loop_child(block.pending.children, adjacent_only) : [];
+		const then_result: ElementAndExist[] = block.then ? loop_child(block.then.children, adjacent_only) : [];
+		const catch_result: ElementAndExist[] = block.catch ? loop_child(block.catch.children, adjacent_only) : [];
+
+		const not_exhaustive = 
+			pending_result.length === 0 || !pending_result.find(result => result.exist === NodeExist.Definitely) ||
+			then_result.length === 0 || !then_result.find(result => result.exist === NodeExist.Definitely) ||
+			catch_result.length === 0 || !catch_result.find(result => result.exist === NodeExist.Definitely);
+
+		if (not_exhaustive) {
+			pending_result.forEach(result => result.exist = NodeExist.Probably);
+			then_result.forEach(result => result.exist = NodeExist.Probably);
+			catch_result.forEach(result => result.exist = NodeExist.Probably);
+		}
+		result.push(...pending_result,...then_result,...catch_result);
+	}
+
+	return result;
+}
+
+function loop_child(children: INode[], adjacent_only: boolean) {
+	const result = [];
+	for (let i = children.length - 1; i >= 0; i--) {
+		const child = children[i];
+		if (child.type === 'Element') {
+			result.push({ element: child, exist: NodeExist.Definitely });
+			if (adjacent_only) {
+				break;
+			}
+		} else if (child.type === 'EachBlock' || child.type === 'IfBlock' || child.type === 'AwaitBlock') {
+			const child_result = get_possible_last_child(child, adjacent_only);
+			result.push(...child_result);
+			if (adjacent_only && child_result.find(child => child.exist === NodeExist.Definitely)) {
+				break;
+			}
+		}
+	}
+	return result;
+}
+
 class Block {
 	global: boolean;
 	combinator: CssNode;

src/compiler/compile/css/Stylesheet.ts

@@ -2,7 +2,7 @@ import MagicString from 'magic-string';
 import { walk } from 'estree-walker';
 import Selector from './Selector';
 import Element from '../nodes/Element';
-import { Ast, TemplateNode } from '../../interfaces';
+import { Ast } from '../../interfaces';
 import Component from '../Component';
 import { CssNode } from './interfaces';
 import hash from "../utils/hash";
@@ -51,8 +51,8 @@ class Rule {
 		this.declarations = node.block.children.map((node: CssNode) => new Declaration(node));
 	}
 
-	apply(node: Element, stack: Element[]) {
-		this.selectors.forEach(selector => selector.apply(node, stack)); // TODO move the logic in here?
+	apply(node: Element) {
+		this.selectors.forEach(selector => selector.apply(node)); // TODO move the logic in here?
 	}
 
 	is_used(dev: boolean) {
@@ -162,10 +162,10 @@ class Atrule {
 		this.declarations = [];
 	}
 
-	apply(node: Element, stack: Element[]) {
+	apply(node: Element) {
 		if (this.node.name === 'media' || this.node.name === 'supports') {
 			this.children.forEach(child => {
-				child.apply(node, stack);
+				child.apply(node);
 			});
 		}
 
@@ -364,15 +364,9 @@ export default class Stylesheet {
 	apply(node: Element) {
 		if (!this.has_styles) return;
 
-		const stack: Element[] = [];
-		let parent: TemplateNode = node;
-		while (parent = parent.parent) {
-			if (parent.type === 'Element') stack.unshift(parent as Element);
-		}
-
 		for (let i = 0; i < this.children.length; i += 1) {
 			const child = this.children[i];
-			child.apply(node, stack);
+			child.apply(node);
 		}
 	}
 

src/compiler/compile/nodes/Element.ts

@@ -16,6 +16,7 @@ import list from '../../utils/list';
 import Let from './Let';
 import TemplateScope from './shared/TemplateScope';
 import { INode } from './interfaces';
+import Component from '../Component';
 
 const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|svg|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
 
@@ -123,7 +124,7 @@ export default class Element extends Node {
 	namespace: string;
 	needs_manual_style_scoping: boolean;
 
-	constructor(component, parent, scope, info: any) {
+	constructor(component: Component, parent, scope, info: any) {
 		super(component, parent, scope, info);
 		this.name = info.name;
 
@@ -184,7 +185,7 @@ export default class Element extends Node {
 
 				case 'Attribute':
 				case 'Spread':
-					// special case
+				// special case
 					if (node.name === 'xmlns') this.namespace = node.value[0].data;
 
 					this.attributes.push(new Attribute(component, this, scope, node));
@@ -235,7 +236,7 @@ export default class Element extends Node {
 
 		this.validate();
 
-		component.stylesheet.apply(this);
+		component.apply_stylesheet(this);
 	}
 
 	validate() {

test/css/samples/general-siblings-combinator-await-not-exhaustive/_config.js

@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};

test/css/samples/general-siblings-combinator-await-not-exhaustive/expected.css

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

test/css/samples/general-siblings-combinator-await-not-exhaustive/expected.html

@@ -0,0 +1,4 @@
+<div class="a svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
+<div class="f svelte-xyz"></div>
+<div class="h svelte-xyz"></div>

test/css/samples/general-siblings-combinator-await-not-exhaustive/input.svelte

@@ -0,0 +1,41 @@
+<script>
+	let promise = Promise.resolve();
+</script>
+
+<style>
+	.a ~ .b { color: green; }
+	.a ~ .c { color: green; }
+	.a ~ .d { color: green; }
+	.a ~ .e { color: green; }
+	.a ~ .f { color: green; }
+	.a ~ .g { color: green; }
+	.a ~ .h { color: green; }
+	
+	.b ~ .d { color: green; }
+	.c ~ .d { color: green; }
+	.b ~ .e ~ .f ~ .h { color: green; }
+	.b ~ .d ~ .h { color: green; }
+	.c ~ .g { color: green; }
+</style>
+
+<div class="a" />
+
+{#await promise then value}
+	<div class="b" />
+{:catch error}
+	<div class="c" />
+{/await}
+
+{#await promise}
+	<div class="d" />
+{:catch error}
+	<div class="e" />
+{/await}
+
+{#await promise}
+	<div class="f" />
+{:then error}
+	<div class="g" />
+{/await}
+
+<div class="h" />

test/css/samples/general-siblings-combinator-await/_config.js

@@ -0,0 +1,46 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				13:
+				14:   /* no match */
+				15:   .b ~ .c { color: green; }
+				      ^
+				16:   .c ~ .d { color: green; }
+				17:   .b ~ .d { color: green; }`,
+			message: 'Unused CSS selector ".b ~ .c"',
+			pos: 269,
+			start: { character: 269, column: 1, line: 15 },
+			end: { character: 276, column: 8, line: 15 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				14:   /* no match */
+				15:   .b ~ .c { color: green; }
+				16:   .c ~ .d { color: green; }
+				      ^
+				17:   .b ~ .d { color: green; }
+				18: </style>`,
+			message: 'Unused CSS selector ".c ~ .d"',
+			pos: 296,
+			start: { character: 296, column: 1, line: 16 },
+			end: { character: 303, column: 8, line: 16 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				15:   .b ~ .c { color: green; }
+				16:   .c ~ .d { color: green; }
+				17:   .b ~ .d { color: green; }
+				      ^
+				18: </style>
+				19:`,
+			message: 'Unused CSS selector ".b ~ .d"',
+			pos: 323,
+			start: { character: 323, column: 1, line: 17 },
+			end: { character: 330, column: 8, line: 17 }
+		}
+	]
+};

test/css/samples/general-siblings-combinator-await/expected.css

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

test/css/samples/general-siblings-combinator-await/expected.html

@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="e svelte-xyz"></div>

test/css/samples/general-siblings-combinator-await/input.svelte

@@ -0,0 +1,30 @@
+<script>
+	let promise = Promise.resolve();
+</script>
+
+<style>
+	.a ~ .b { color: green; }
+	.a ~ .c { color: green; }
+	.a ~ .d { color: green; }
+	.b ~ .e { color: green; }
+	.c ~ .e { color: green; }
+	.d ~ .e { color: green; }
+	.a ~ .e { color: green; }
+
+	/* no match */
+	.b ~ .c { color: green; }
+	.c ~ .d { color: green; }
+	.b ~ .d { color: green; }
+</style>
+
+<div class="a" />
+
+{#await promise}
+	<div class="b" />
+{:then value}
+	<div class="c" />
+{:catch error}
+	<div class="d" />
+{/await}
+
+<div class="e" />

test/css/samples/general-siblings-combinator-each-2/_config.js

@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};

test/css/samples/general-siblings-combinator-each-2/expected.css

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

test/css/samples/general-siblings-combinator-each-2/expected.html

@@ -0,0 +1,4 @@
+<div class="a svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="c svelte-xyz"></div>
+<div class="d svelte-xyz"></div>

test/css/samples/general-siblings-combinator-each-2/input.svelte

@@ -0,0 +1,37 @@
+<script>
+	let array = [1];
+</script>
+
+<style>
+	/* boundary of each */
+	.a ~ .b {
+		color: green;
+	}
+	.c ~ .d {
+		color: green;
+	}
+	/* if array is empty */
+	.a ~ .d {
+		color: green;
+	}
+	/* if array has multiple items */
+	.c ~ .b {
+		color: green;
+	}
+	/* normal sibling */
+	.b ~ .c {
+		color: green;
+	}
+	.a ~ .c {
+		color: green;
+	}
+</style>
+
+<div class="a" />
+
+{#each array as item}
+	<div class="b" />
+	<div class="c" />
+{/each}
+
+<div class="d" />

test/css/samples/general-siblings-combinator-each-else-nested/_config.js

@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				33:
+				34:   /* no match */
+				35:   .e ~ .f { color: green; }
+				      ^
+				36: </style>
+				37:`,
+			message: 'Unused CSS selector ".e ~ .f"',
+			pos: 812,
+			start: { character: 812, column: 1, line: 35 },
+			end: { character: 819, column: 8, line: 35 }
+		}
+	]
+};

test/css/samples/general-siblings-combinator-each-else-nested/expected.css

@@ -0,0 +1 @@
+.a.svelte-xyz~.e.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.f.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz~.c.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz~.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.e.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.f.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz~.e.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz~.f.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz~.e.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz~.j.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz~.h.svelte-xyz~.j.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz~.i.svelte-xyz~.j.svelte-xyz.svelte-xyz{color:green}.m.svelte-xyz~.m.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.m.svelte-xyz~.l.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.l.svelte-xyz~.m.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.c.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.g.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz~.e.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.g.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.k.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz~.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz~.g.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.h.svelte-xyz~.h.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz~.i.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.j.svelte-xyz~.j.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz~.j.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz~.h.svelte-xyz~.i.svelte-xyz~.j.svelte-xyz{color:green}

test/css/samples/general-siblings-combinator-each-else-nested/expected.html

@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="f svelte-xyz"></div>
+<div class="k svelte-xyz"></div>

test/css/samples/general-siblings-combinator-each-else-nested/input.svelte

@@ -0,0 +1,77 @@
+<script>
+	let array = [];
+</script>
+
+<style>
+	.a ~ .e { color: green; }
+	.a ~ .f { color: green; }
+	.b ~ .c { color: green; }
+	.b ~ .d { color: green; }
+	.c ~ .e { color: green; }
+	.c ~ .f { color: green; }
+	.d ~ .e { color: green; }
+	.d ~ .f { color: green; }
+	.e ~ .e { color: green; }
+	.i ~ .j { color: green; }
+	.g ~ .h ~ .j { color: green; }
+	.g ~ .i ~ .j { color: green; }
+	.m ~ .m { color: green; }
+	.m ~ .l { color: green; }
+	.l ~ .m { color: green; }
+	.a ~ .c { color: green; }
+	.a ~ .g { color: green; }
+	.b ~ .e { color: green; }
+	.c ~ .g { color: green; }
+	.c ~ .k { color: green; }
+	.d ~ .d { color: green; }
+	.g ~ .g { color: green; }
+	.h ~ .h { color: green; }
+	.i ~ .i { color: green; }
+	.j ~ .j { color: green; }
+	.g ~ .j { color: green; }
+	.g ~ .h ~ .i ~ .j { color: green; }
+
+	/* no match */
+	.e ~ .f { color: green; }
+</style>
+
+<div class="a" />
+
+{#each array as a}
+	<div class="b" />
+	{#each array as b}
+		<div class="c" />
+	{:else}
+		<div class="d" />
+	{/each}
+{/each}
+
+{#each array as c}
+	{#each array as d}
+		<div class="e" />
+	{/each}
+{:else}
+	<div class="f" />
+{/each}
+
+{#each array as x}
+	<div class="g" />
+	{#each array as y}
+		{#each array as z}
+			<div class="h" />
+		{/each}
+	{:else}
+		<div class="i" />
+	{/each}
+	<div class="j" />
+{/each}
+
+<div class="k" />
+
+{#each array as item}
+	{#each array as item}
+		<div class="l" />
+	{:else}
+		<div class="m" />
+	{/each}
+{/each}

test/css/samples/general-siblings-combinator-each-else/_config.js

@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				11:
+				12:   /* no match */
+				13:   .b ~ .c { color: green; }
+				      ^
+				14: </style>
+				15:`,
+			message: 'Unused CSS selector ".b ~ .c"',
+			pos: 199,
+			start: { character: 199, column: 1, line: 13 },
+			end: { character: 206, column: 8, line: 13 }
+		}
+	]
+};

test/css/samples/general-siblings-combinator-each-else/expected.css

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

test/css/samples/general-siblings-combinator-each-else/expected.html

@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="c svelte-xyz"></div>
+<div class="d svelte-xyz"></div>

test/css/samples/general-siblings-combinator-each-else/input.svelte

@@ -0,0 +1,24 @@
+<script>
+	let array = [];
+</script>
+
+<style>
+	.a ~ .b { color: green; }
+	.a ~ .c { color: green; }
+	.b ~ .d { color: green; }
+	.c ~ .d { color: green; }
+	.a ~ .d { color: green; }
+	
+	/* no match */
+	.b ~ .c { color: green; }
+</style>
+
+<div class="a" />
+
+{#each array as item}
+	<div class="b" />
+{:else}
+	<div class="c" />
+{/each}
+
+<div class="d" />

test/css/samples/general-siblings-combinator-each-nested/_config.js

@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};

test/css/samples/general-siblings-combinator-each-nested/expected.css

@@ -0,0 +1 @@
+.a.svelte-xyz~.d.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.e.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.f.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.g.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.d.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.e.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.f.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.g.svelte-xyz.svelte-xyz{color:green}.j.svelte-xyz~.m.svelte-xyz.svelte-xyz{color:green}.j.svelte-xyz~.n.svelte-xyz.svelte-xyz{color:green}.j.svelte-xyz~.o.svelte-xyz.svelte-xyz{color:green}.k.svelte-xyz~.m.svelte-xyz.svelte-xyz{color:green}.k.svelte-xyz~.n.svelte-xyz.svelte-xyz{color:green}.k.svelte-xyz~.o.svelte-xyz.svelte-xyz{color:green}.l.svelte-xyz~.m.svelte-xyz.svelte-xyz{color:green}.l.svelte-xyz~.n.svelte-xyz.svelte-xyz{color:green}.l.svelte-xyz~.o.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz~.e.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz~.f.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz~.h.svelte-xyz.svelte-xyz{color:green}.f.svelte-xyz~.d.svelte-xyz.svelte-xyz{color:green}.f.svelte-xyz~.e.svelte-xyz.svelte-xyz{color:green}.f.svelte-xyz~.f.svelte-xyz.svelte-xyz{color:green}.h.svelte-xyz~.g.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz~.h.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz~.g.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz~.d.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz~.e.svelte-xyz.svelte-xyz{color:green}.f.svelte-xyz~.f.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz~.g.svelte-xyz.svelte-xyz{color:green}.h.svelte-xyz~.h.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz~.i.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz~.e.svelte-xyz~.f.svelte-xyz{color:green}.e.svelte-xyz~.e.svelte-xyz~.d.svelte-xyz{color:green}.h.svelte-xyz~.h.svelte-xyz~.i.svelte-xyz{color:green}.h.svelte-xyz~.h.svelte-xyz~.g.svelte-xyz{color:green}.a.svelte-xyz~.h.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.i.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.h.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.i.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz~.f.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz~.g.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz~.g.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz~.i.svelte-xyz.svelte-xyz{color:green}

test/css/samples/general-siblings-combinator-each-nested/expected.html

@@ -0,0 +1,15 @@
+<div class="a svelte-xyz"></div>
+<div class="b"></div>
+<div class="c svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
+<div class="e svelte-xyz"></div>
+<div class="f svelte-xyz"></div>
+<div class="g svelte-xyz"></div>
+<div class="h svelte-xyz"></div>
+<div class="i svelte-xyz"></div>
+<div class="j svelte-xyz"></div>
+<div class="k svelte-xyz"></div>
+<div class="l svelte-xyz"></div>
+<div class="m svelte-xyz"></div>
+<div class="n svelte-xyz"></div>
+<div class="o svelte-xyz"></div>

test/css/samples/general-siblings-combinator-each-nested/input.svelte

@@ -0,0 +1,113 @@
+<script>
+	let array = [1];
+</script>
+
+<style>
+	/* boundary of each */
+	.a ~ .d { color: green; }
+	.a ~ .e { color: green; }
+	.a ~ .f { color: green; }
+	.a ~ .g { color: green; }
+	.c ~ .d { color: green; }
+	.c ~ .e { color: green; }
+	.c ~ .f { color: green; }
+	.c ~ .g { color: green; }
+
+	/* nested boundary of each */
+	.j ~ .m { color: green; }
+	.j ~ .n { color: green; }
+	.j ~ .o { color: green; }
+	.k ~ .m { color: green; }
+	.k ~ .n { color: green; }
+	.k ~ .o { color: green; }
+	.l ~ .m { color: green; }
+	.l ~ .n { color: green; }
+	.l ~ .o { color: green; }
+
+	/* parent each */
+	.d ~ .e { color: green; }
+	.e ~ .f { color: green; }
+
+	/* child each */
+	.g ~ .h { color: green; }
+
+	/* wrap around */
+	.f ~ .d { color: green; }
+	.f ~ .e { color: green; }
+	.f ~ .f { color: green; }
+
+	.h ~ .g { color: green; }
+	.i ~ .h { color: green; }
+	.i ~ .g { color: green; }
+
+	/* wrap around self */
+	.d ~ .d { color: green; }
+	.e ~ .e { color: green; }
+	.f ~ .f { color: green; }
+	.g ~ .g { color: green; }
+	.h ~ .h { color: green; }
+	.i ~ .i { color: green; }
+
+	/* wrap around self ~ next */
+	.e ~ .e ~ .f { color: green; }
+	.e ~ .e ~ .d { color: green; }
+	.h ~ .h ~ .i { color: green; }
+	.h ~ .h ~ .g { color: green; }
+
+	/* general siblings */
+	.a ~ .h { color: green; }
+	.a ~ .i { color: green; }
+	.c ~ .h { color: green; }
+	.c ~ .i { color: green; }
+	.d ~ .f { color: green; }
+	.d ~ .g { color: green; }
+	.e ~ .g { color: green; }
+	.g ~ .i { color: green; }
+</style>
+
+<div class="a" />
+
+{#each array as item}
+	<div class="b" />
+	<div class="c" />
+{/each}
+
+{#each array as item}
+	{#each array as item}
+		{#each array as item}
+			<div class="d" />
+		{/each}
+		<div class="e" />
+	{/each}
+	<div class="f" />
+{/each}
+
+{#each array as item}
+	<div class="g" />
+	{#each array as item}
+		<div class="h" />
+		{#each array as item}
+			<div class="i" />
+		{/each}
+	{/each}
+{/each}
+
+{#each array as item}
+	<div class="j" />
+	{#each array as item}
+		<div class="k" />
+		{#each array as item}
+			<div class="l" />
+		{/each}
+	{/each}
+{/each}
+
+{#each array as item}
+	{#each array as item}
+		{#each array as item}
+			<div class="m" />
+		{/each}
+		<div class="n" />
+	{/each}
+	<div class="o" />
+{/each}

test/css/samples/general-siblings-combinator-each/expected.css

@@ -0,0 +1 @@
+div.svelte-xyz~span.svelte-xyz{color:green}

test/css/samples/general-siblings-combinator-each/expected.html

@@ -0,0 +1,6 @@
+<div class="svelte-xyz"></div>
+<span class="each svelte-xyz"></span>
+<div class="each svelte-xyz"></div>
+<span class="each svelte-xyz"></span>
+<div class="each svelte-xyz"></div>
+<span class="svelte-xyz"></span>

test/css/samples/general-siblings-combinator-each/input.svelte

@@ -0,0 +1,20 @@
+<script>
+	let array = [1];
+</script>
+
+<style>
+	div ~ span {
+		color: green;
+	}
+</style>
+
+<div />
+
+{#each array as item}
+	<span class="each" />
+	<div class="each" />
+	<span class="each" />
+	<div class="each" />
+{/each}
+
+<span />

test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/_config.js

@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				16:
+				17:   /* no match */
+				18:   .b ~ .c { color: green; }
+				      ^
+				19: </style>
+				20:`,
+			message: 'Unused CSS selector ".b ~ .c"',
+			pos: 319,
+			start: { character: 319, column: 1, line: 18 },
+			end: { character: 326, column: 8, line: 18 }
+		}
+	]
+};

test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/expected.css

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

test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/expected.html

@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="c svelte-xyz"></div>
+<div class="d svelte-xyz"></div>

test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/input.svelte

@@ -0,0 +1,31 @@
+<script>
+	let foo = false;
+	let array = [1];
+</script>
+
+<style>
+	.a ~ .b { color: green; }
+	.a ~ .c { color: green; }
+	.a ~ .d { color: green; }
+	.b ~ .d { color: green; }
+	.c ~ .d { color: green; }
+
+	.a ~ .c ~ .c { color: green; }
+	.c ~ .c ~ .d { color: green; }
+	.a ~ .c ~ .c ~ .d { color: green; }
+
+	/* no match */
+	.b ~ .c { color: green; }
+</style>
+
+<div class="a" />
+
+{#if foo}
+	<div class="b" />
+{:else}
+	{#each array as item}
+		<div class="c" />
+	{/each}
+{/if}
+
+<div class="d" />

test/css/samples/general-siblings-combinator-if-not-exhaustive/_config.js

@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				12:
+				13:   /* no match */
+				14:   .b ~ .c { color: green; }
+				      ^
+				15: </style>
+				16:`,
+			message: 'Unused CSS selector ".b ~ .c"',
+			pos: 215,
+			start: { character: 215, column: 1, line: 14 },
+			end: { character: 222, column: 8, line: 14 }
+		}
+	]
+};

test/css/samples/general-siblings-combinator-if-not-exhaustive/expected.css

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

test/css/samples/general-siblings-combinator-if-not-exhaustive/expected.html

@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="d svelte-xyz"></div>

test/css/samples/general-siblings-combinator-if-not-exhaustive/input.svelte

@@ -0,0 +1,25 @@
+<script>
+	let foo = true;
+	let bar = true;
+</script>
+
+<style>
+	.a ~ .b { color: green; }
+	.a ~ .c { color: green; }
+	.a ~ .d { color: green; }
+	.b ~ .d { color: green; }
+	.c ~ .d { color: green; }
+
+	/* no match */
+	.b ~ .c { color: green; }
+</style>
+
+<div class="a" />
+
+{#if foo}
+	<div class="b" />
+{:else if bar}
+	<div class="c" />
+{/if}
+
+<div class="d" />

test/css/samples/general-siblings-combinator-if/_config.js

@@ -0,0 +1,46 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				14:
+				15:   /* no match */
+				16:   .b ~ .c { color: green; }
+				      ^
+				17:   .b ~ .d { color: green; }
+				18:   .c ~ .d { color: green; }`,
+			message: 'Unused CSS selector ".b ~ .c"',
+			pos: 269,
+			start: { character: 269, column: 1, line: 16 },
+			end: { character: 276, column: 8, line: 16 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				15:   /* no match */
+				16:   .b ~ .c { color: green; }
+				17:   .b ~ .d { color: green; }
+				      ^
+				18:   .c ~ .d { color: green; }
+				19: </style>`,
+			message: 'Unused CSS selector ".b ~ .d"',
+			pos: 296,
+			start: { character: 296, column: 1, line: 17 },
+			end: { character: 303, column: 8, line: 17 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				16:   .b ~ .c { color: green; }
+				17:   .b ~ .d { color: green; }
+				18:   .c ~ .d { color: green; }
+				      ^
+				19: </style>
+				20:`,
+			message: 'Unused CSS selector ".c ~ .d"',
+			pos: 323,
+			start: { character: 323, column: 1, line: 18 },
+			end: { character: 330, column: 8, line: 18 }
+		}
+	]
+};

test/css/samples/general-siblings-combinator-if/expected.css

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

test/css/samples/general-siblings-combinator-if/expected.html

@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="e svelte-xyz"></div>

test/css/samples/general-siblings-combinator-if/input.svelte

@@ -0,0 +1,31 @@
+<script>
+	let foo = true;
+	let bar = true;
+</script>
+
+<style>
+	.a ~ .b { color: green; }
+	.a ~ .c { color: green; }
+	.a ~ .d { color: green; }
+	.b ~ .e { color: green; }
+	.c ~ .e { color: green; }
+	.d ~ .e { color: green; }
+	.a ~ .e { color: green; }
+
+	/* no match */
+	.b ~ .c { color: green; }
+	.b ~ .d { color: green; }
+	.c ~ .d { color: green; }
+</style>
+
+<div class="a" />
+
+{#if foo}
+	<div class="b" />
+{:else if bar}
+	<div class="c" />
+{:else}
+	<div class="d" />
+{/if}
+
+<div class="e" />

test/css/samples/general-siblings-combinator-star/_config.js

@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				3:     margin-left: 4px;
+				4:   }
+				5:   .not-match > * ~ * {
+				     ^
+				6:     margin-left: 4px;
+				7:   }`,
+			message: 'Unused CSS selector ".not-match > * ~ *"',
+			pos: 50,
+			start: { character: 50, column: 1, line: 5 },
+      end: { character: 68, column: 19, line: 5 }
+		}
+	]
+};

test/css/samples/general-siblings-combinator-star/expected.css

@@ -0,0 +1 @@
+.match.svelte-xyz>.svelte-xyz~.svelte-xyz{margin-left:4px}

test/css/samples/general-siblings-combinator-star/expected.html

@@ -0,0 +1,7 @@
+<div class="not-match">
+  <div></div>
+</div>
+<div class="match svelte-xyz">
+  <div class="svelte-xyz"></div>
+  <div class="svelte-xyz"></div>
+</div>

test/css/samples/general-siblings-combinator-star/input.svelte

@@ -0,0 +1,17 @@
+<style>
+	.match > * ~ * {
+		margin-left: 4px;
+	}
+	.not-match > * ~ * {
+		margin-left: 4px;
+	}
+</style>
+
+<div class="not-match">
+	<div />
+</div>
+
+<div class="match">
+	<div />
+	<div />
+</div>

test/css/samples/general-siblings-combinator/_config.js

@@ -0,0 +1,60 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				17:
+				18:   /* no match */
+				19:   article ~ div {
+				      ^
+				20:     color: green;
+				21:   }`,
+			message: 'Unused CSS selector "article ~ div"',
+			pos: 194,
+			start: { character: 194, column: 1, line: 19 },
+			end: { character: 207, column: 14, line: 19 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				20:     color: green;
+				21:   }
+				22:   span ~ article {
+				      ^
+				23:     color: green;
+				24:   }`,
+			message: 'Unused CSS selector "span ~ article"',
+			pos: 230,
+			start: { character: 230, column: 1, line: 22 },
+			end: { character: 244, column: 15, line: 22 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				23:     color: green;
+				24:   }
+				25:   b ~ article {
+				      ^
+				26:     color: green;
+				27:   }`,
+			message: 'Unused CSS selector "b ~ article"',
+			pos: 267,
+			start: { character: 267, column: 1, line: 25 },
+			end: { character: 278, column: 12, line: 25 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				26:     color: green;
+				27:   }
+				28:   span ~ div {
+				      ^
+				29:     color: green;
+				30:   }`,
+			message: 'Unused CSS selector "span ~ div"',
+			pos: 301,
+			start: { character: 301, column: 1, line: 28 },
+			end: { character: 311, column: 11, line: 28 }
+		}
+	]
+};

test/css/samples/general-siblings-combinator/expected.css

@@ -0,0 +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}

test/css/samples/general-siblings-combinator/expected.html

@@ -0,0 +1,5 @@
+<div class="a svelte-xyz">
+  <span class="svelte-xyz"></span>
+  <b class="svelte-xyz"></b>
+</div>
+<article class="b svelte-xyz"></article>

test/css/samples/general-siblings-combinator/input.svelte

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

test/css/samples/siblings-combinator-await-not-exhaustive/_config.js

@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};

test/css/samples/siblings-combinator-await-not-exhaustive/expected.css

@@ -0,0 +1 @@
+.a.svelte-xyz+.b.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.c.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.e.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.f.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.g.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.h.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz+.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz+.e.svelte-xyz+.f.svelte-xyz+.h.svelte-xyz{color:green}.b.svelte-xyz+.d.svelte-xyz+.h.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.g.svelte-xyz.svelte-xyz.svelte-xyz{color:green}

test/css/samples/siblings-combinator-await-not-exhaustive/expected.html

@@ -0,0 +1,4 @@
+<div class="a svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
+<div class="f svelte-xyz"></div>
+<div class="h svelte-xyz"></div>

test/css/samples/siblings-combinator-await-not-exhaustive/input.svelte

@@ -0,0 +1,41 @@
+<script>
+	let promise = Promise.resolve();
+</script>
+
+<style>
+	.a + .b { color: green; }
+	.a + .c { color: green; }
+	.a + .d { color: green; }
+	.a + .e { color: green; }
+	.a + .f { color: green; }
+	.a + .g { color: green; }
+	.a + .h { color: green; }
+	
+	.b + .d { color: green; }
+	.c + .d { color: green; }
+	.b + .e + .f + .h { color: green; }
+	.b + .d + .h { color: green; }
+	.c + .g { color: green; }
+</style>
+
+<div class="a" />
+
+{#await promise then value}
+	<div class="b" />
+{:catch error}
+	<div class="c" />
+{/await}
+
+{#await promise}
+	<div class="d" />
+{:catch error}
+	<div class="e" />
+{/await}
+
+{#await promise}
+	<div class="f" />
+{:then error}
+	<div class="g" />
+{/await}
+
+<div class="h" />

test/css/samples/siblings-combinator-await/_config.js

@@ -0,0 +1,60 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				12:
+				13:   /* no match */
+				14:   .a + .e { color: green; }
+				      ^
+				15:   .b + .c { color: green; }
+				16:   .c + .d { color: green; }`,
+			message: 'Unused CSS selector ".a + .e"',
+			pos: 242,
+			start: { character: 242, column: 1, line: 14 },
+			end: { character: 249, column: 8, line: 14 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				13:   /* no match */
+				14:   .a + .e { color: green; }
+				15:   .b + .c { color: green; }
+				      ^
+				16:   .c + .d { color: green; }
+				17:   .b + .d { color: green; }`,
+			message: 'Unused CSS selector ".b + .c"',
+			pos: 269,
+			start: { character: 269, column: 1, line: 15 },
+			end: { character: 276, column: 8, line: 15 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				14:   .a + .e { color: green; }
+				15:   .b + .c { color: green; }
+				16:   .c + .d { color: green; }
+				      ^
+				17:   .b + .d { color: green; }
+				18: </style>`,
+			message: 'Unused CSS selector ".c + .d"',
+			pos: 296,
+			start: { character: 296, column: 1, line: 16 },
+			end: { character: 303, column: 8, line: 16 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				15:   .b + .c { color: green; }
+				16:   .c + .d { color: green; }
+				17:   .b + .d { color: green; }
+				      ^
+				18: </style>
+				19:`,
+			message: 'Unused CSS selector ".b + .d"',
+			pos: 323,
+			start: { character: 323, column: 1, line: 17 },
+			end: { character: 330, column: 8, line: 17 }
+		}
+	]
+};

test/css/samples/siblings-combinator-await/expected.css

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

test/css/samples/siblings-combinator-await/expected.html

@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="e svelte-xyz"></div>

test/css/samples/siblings-combinator-await/input.svelte

@@ -0,0 +1,30 @@
+<script>
+	let promise = Promise.resolve();
+</script>
+
+<style>
+	.a + .b { color: green; }
+	.a + .c { color: green; }
+	.a + .d { color: green; }
+	.b + .e { color: green; }
+	.c + .e { color: green; }
+	.d + .e { color: green; }
+
+	/* no match */
+	.a + .e { color: green; }
+	.b + .c { color: green; }
+	.c + .d { color: green; }
+	.b + .d { color: green; }
+</style>
+
+<div class="a" />
+
+{#await promise}
+	<div class="b" />
+{:then value}
+	<div class="c" />
+{:catch error}
+	<div class="d" />
+{/await}
+
+<div class="e" />

test/css/samples/siblings-combinator-each-2/_config.js

@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+		  code: "css-unused-selector",
+			frame: `
+				24:   }
+				25:   /* not match */
+				26:   .a + .c {
+				      ^
+				27:     color: green;
+				28:   }`,
+		  message: 'Unused CSS selector ".a + .c"',
+		  pos: 320,
+		  start: { character: 320, column: 1, line: 26 },
+		  end: { character: 327, column: 8, line: 26 }
+		}
+	]
+};

test/css/samples/siblings-combinator-each-2/expected.css

@@ -0,0 +1 @@
+.a.svelte-xyz+.b.svelte-xyz{color:green}.c.svelte-xyz+.d.svelte-xyz{color:green}.a.svelte-xyz+.d.svelte-xyz{color:green}.c.svelte-xyz+.b.svelte-xyz{color:green}.b.svelte-xyz+.c.svelte-xyz{color:green}

test/css/samples/siblings-combinator-each-2/expected.html

@@ -0,0 +1,4 @@
+<div class="a svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="c svelte-xyz"></div>
+<div class="d svelte-xyz"></div>

test/css/samples/siblings-combinator-each-2/input.svelte

@@ -0,0 +1,38 @@
+<script>
+	let array = [1];
+</script>
+
+<style>
+	/* boundary of each */
+	.a + .b {
+		color: green;
+	}
+	.c + .d {
+		color: green;
+	}
+	/* if array is empty */
+	.a + .d {
+		color: green;
+	}
+	/* if array has multiple items */
+	.c + .b {
+		color: green;
+	}
+	/* normal sibling */
+	.b + .c {
+		color: green;
+	}
+	/* not match */
+	.a + .c {
+		color: green;
+	}
+</style>
+
+<div class="a" />
+
+{#each array as item}
+	<div class="b" />
+	<div class="c" />
+{/each}
+
+<div class="d" />

test/css/samples/siblings-combinator-each-else-nested/_config.js

@@ -0,0 +1,144 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				21:
+				22:   /* no match */
+				23:   .a + .c { color: green; }
+				      ^
+				24:   .a + .g { color: green; }
+				25:   .b + .e { color: green; }`,
+			message: 'Unused CSS selector ".a + .c"',
+			pos: 479,
+			start: { character: 479, column: 1, line: 23 },
+			end: { character: 486, column: 8, line: 23 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				22:   /* no match */
+				23:   .a + .c { color: green; }
+				24:   .a + .g { color: green; }
+				      ^
+				25:   .b + .e { color: green; }
+				26:   .c + .g { color: green; }`,
+			message: 'Unused CSS selector ".a + .g"',
+			pos: 506,
+			start: { character: 506, column: 1, line: 24 },
+			end: { character: 513, column: 8, line: 24 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				23:   .a + .c { color: green; }
+				24:   .a + .g { color: green; }
+				25:   .b + .e { color: green; }
+				      ^
+				26:   .c + .g { color: green; }
+				27:   .c + .k { color: green; }`,
+			message: 'Unused CSS selector ".b + .e"',
+			pos: 533,
+			start: { character: 533, column: 1, line: 25 },
+			end: { character: 540, column: 8, line: 25 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				24:   .a + .g { color: green; }
+				25:   .b + .e { color: green; }
+				26:   .c + .g { color: green; }
+				      ^
+				27:   .c + .k { color: green; }
+				28:   .d + .d { color: green; }`,
+			message: 'Unused CSS selector ".c + .g"',
+			pos: 560,
+			start: { character: 560, column: 1, line: 26 },
+			end: { character: 567, column: 8, line: 26 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				25:   .b + .e { color: green; }
+				26:   .c + .g { color: green; }
+				27:   .c + .k { color: green; }
+				      ^
+				28:   .d + .d { color: green; }
+				29:   .e + .f { color: green; }`,
+			message: 'Unused CSS selector ".c + .k"',
+			pos: 587,
+			start: { character: 587, column: 1, line: 27 },
+			end: { character: 594, column: 8, line: 27 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				26:   .c + .g { color: green; }
+				27:   .c + .k { color: green; }
+				28:   .d + .d { color: green; }
+				      ^
+				29:   .e + .f { color: green; }
+				30:   .f + .f { color: green; }`,
+			message: 'Unused CSS selector ".d + .d"',
+			pos: 614,
+			start: { character: 614, column: 1, line: 28 },
+			end: { character: 621, column: 8, line: 28 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				27:   .c + .k { color: green; }
+				28:   .d + .d { color: green; }
+				29:   .e + .f { color: green; }
+				      ^
+				30:   .f + .f { color: green; }
+				31:   .g + .j { color: green; }`,
+			message: 'Unused CSS selector ".e + .f"',
+			pos: 641,
+			start: { character: 641, column: 1, line: 29 },
+			end: { character: 648, column: 8, line: 29 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				28:   .d + .d { color: green; }
+				29:   .e + .f { color: green; }
+				30:   .f + .f { color: green; }
+				      ^
+				31:   .g + .j { color: green; }
+				32:   .g + .h + .i + .j { color: green; }`,
+			message: 'Unused CSS selector ".f + .f"',
+			pos: 668,
+			start: { character: 668, column: 1, line: 30 },
+			end: { character: 675, column: 8, line: 30 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				29:   .e + .f { color: green; }
+				30:   .f + .f { color: green; }
+				31:   .g + .j { color: green; }
+				      ^
+				32:   .g + .h + .i + .j { color: green; }
+				33: </style>`,
+			message: 'Unused CSS selector ".g + .j"',
+			pos: 695,
+			start: { character: 695, column: 1, line: 31 },
+			end: { character: 702, column: 8, line: 31 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				30:   .f + .f { color: green; }
+				31:   .g + .j { color: green; }
+				32:   .g + .h + .i + .j { color: green; }
+				      ^
+				33: </style>
+				34:`,
+			message: 'Unused CSS selector ".g + .h + .i + .j"',
+			pos: 722,
+			start: { character: 722, column: 1, line: 32 },
+			end: { character: 739, column: 18, line: 32 }
+		}
+	]
+};

test/css/samples/siblings-combinator-each-else-nested/expected.css

@@ -0,0 +1 @@
+.a.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.f.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz+.c.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz+.d.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.f.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz+.f.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz+.j.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz+.h.svelte-xyz+.j.svelte-xyz{color:green}.g.svelte-xyz+.i.svelte-xyz+.j.svelte-xyz{color:green}.m.svelte-xyz+.m.svelte-xyz.svelte-xyz{color:green}.m.svelte-xyz+.l.svelte-xyz.svelte-xyz{color:green}.l.svelte-xyz+.m.svelte-xyz.svelte-xyz{color:green}

test/css/samples/siblings-combinator-each-else-nested/expected.html

@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="f svelte-xyz"></div>
+<div class="k"></div>

test/css/samples/siblings-combinator-each-else-nested/input.svelte

@@ -0,0 +1,74 @@
+<script>
+	let array = [];
+</script>
+
+<style>
+	.a + .e { color: green; }
+	.a + .f { color: green; }
+	.b + .c { color: green; }
+	.b + .d { color: green; }
+	.c + .e { color: green; }
+	.c + .f { color: green; }
+	.d + .e { color: green; }
+	.d + .f { color: green; }
+	.e + .e { color: green; }
+	.i + .j { color: green; }
+	.g + .h + .j { color: green; }
+	.g + .i + .j { color: green; }
+	.m + .m { color: green; }
+	.m + .l { color: green; }
+	.l + .m { color: green; }
+	
+	/* no match */
+	.a + .c { color: green; }
+	.a + .g { color: green; }
+	.b + .e { color: green; }
+	.c + .g { color: green; }
+	.c + .k { color: green; }
+	.d + .d { color: green; }
+	.e + .f { color: green; }
+	.f + .f { color: green; }
+	.g + .j { color: green; }
+	.g + .h + .i + .j { color: green; }
+</style>
+
+<div class="a" />
+
+{#each array as a}
+	<div class="b" />
+	{#each array as b}
+		<div class="c" />
+	{:else}
+		<div class="d" />
+	{/each}
+{/each}
+
+{#each array as c}
+	{#each array as d}
+		<div class="e" />
+	{/each}
+{:else}
+	<div class="f" />
+{/each}
+
+{#each array as item}
+	<div class="g" />
+	{#each array as item}
+		{#each array as item}
+			<div class="h" />
+		{/each}
+	{:else}
+		<div class="i" />
+	{/each}
+	<div class="j" />
+{/each}
+
+<div class="k" />
+
+{#each array as item}
+	{#each array as item}
+		<div class="l" />
+	{:else}
+		<div class="m" />
+	{/each}
+{/each}

test/css/samples/siblings-combinator-each-else/_config.js

@@ -0,0 +1,32 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				10:
+				11:   /* no match */
+				12:   .a + .d { color: green; }
+				      ^
+				13:   .b + .c { color: green; }
+				14: </style>`,
+			message: 'Unused CSS selector ".a + .d"',
+			pos: 172,
+			start: { character: 172, column: 1, line: 12 },
+			end: { character: 179, column: 8, line: 12 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				11:   /* no match */
+				12:   .a + .d { color: green; }
+				13:   .b + .c { color: green; }
+				      ^
+				14: </style>
+				15:`,
+			message: 'Unused CSS selector ".b + .c"',
+			pos: 199,
+			start: { character: 199, column: 1, line: 13 },
+			end: { character: 206, column: 8, line: 13 }
+		}
+	]
+};

test/css/samples/siblings-combinator-each-else/expected.css

@@ -0,0 +1 @@
+.a.svelte-xyz+.b.svelte-xyz{color:green}.a.svelte-xyz+.c.svelte-xyz{color:green}.b.svelte-xyz+.d.svelte-xyz{color:green}.c.svelte-xyz+.d.svelte-xyz{color:green}

test/css/samples/siblings-combinator-each-else/expected.html

@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="c svelte-xyz"></div>
+<div class="d svelte-xyz"></div>

test/css/samples/siblings-combinator-each-else/input.svelte

@@ -0,0 +1,24 @@
+<script>
+	let array = [];
+</script>
+
+<style>
+	.a + .b { color: green; }
+	.a + .c { color: green; }
+	.b + .d { color: green; }
+	.c + .d { color: green; }
+	
+	/* no match */
+	.a + .d { color: green; }
+	.b + .c { color: green; }
+</style>
+
+<div class="a" />
+
+{#each array as item}
+	<div class="b" />
+{:else}
+	<div class="c" />
+{/each}
+
+<div class="d" />

test/css/samples/siblings-combinator-each-nested/_config.js

@@ -0,0 +1,116 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				56:
+				57:   /* no match */
+				58:   .a + .h { color: green; }
+				      ^
+				59:   .a + .i { color: green; }
+				60:   .c + .h { color: green; }`,
+			message: 'Unused CSS selector ".a + .h"',
+			pos: 1229,
+			start: { character: 1229, column: 1, line: 58 },
+			end: { character: 1236, column: 8, line: 58 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				57:   /* no match */
+				58:   .a + .h { color: green; }
+				59:   .a + .i { color: green; }
+				      ^
+				60:   .c + .h { color: green; }
+				61:   .c + .i { color: green; }`,
+			message: 'Unused CSS selector ".a + .i"',
+			pos: 1256,
+			start: { character: 1256, column: 1, line: 59 },
+			end: { character: 1263, column: 8, line: 59 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				58:   .a + .h { color: green; }
+				59:   .a + .i { color: green; }
+				60:   .c + .h { color: green; }
+				      ^
+				61:   .c + .i { color: green; }
+				62:   .d + .f { color: green; }`,
+			message: 'Unused CSS selector ".c + .h"',
+			pos: 1283,
+			start: { character: 1283, column: 1, line: 60 },
+			end: { character: 1290, column: 8, line: 60 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				59:   .a + .i { color: green; }
+				60:   .c + .h { color: green; }
+				61:   .c + .i { color: green; }
+				      ^
+				62:   .d + .f { color: green; }
+				63:   .d + .g { color: green; }`,
+			message: 'Unused CSS selector ".c + .i"',
+			pos: 1310,
+			start: { character: 1310, column: 1, line: 61 },
+			end: { character: 1317, column: 8, line: 61 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				60:   .c + .h { color: green; }
+				61:   .c + .i { color: green; }
+				62:   .d + .f { color: green; }
+				      ^
+				63:   .d + .g { color: green; }
+				64:   .e + .g { color: green; }`,
+			message: 'Unused CSS selector ".d + .f"',
+			pos: 1337,
+			start: { character: 1337, column: 1, line: 62 },
+			end: { character: 1344, column: 8, line: 62 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				61:   .c + .i { color: green; }
+				62:   .d + .f { color: green; }
+				63:   .d + .g { color: green; }
+				      ^
+				64:   .e + .g { color: green; }
+				65:   .g + .i { color: green; }`,
+			message: 'Unused CSS selector ".d + .g"',
+			pos: 1364,
+			start: { character: 1364, column: 1, line: 63 },
+			end: { character: 1371, column: 8, line: 63 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				62:   .d + .f { color: green; }
+				63:   .d + .g { color: green; }
+				64:   .e + .g { color: green; }
+				      ^
+				65:   .g + .i { color: green; }
+				66: </style>`,
+			message: 'Unused CSS selector ".e + .g"',
+			pos: 1391,
+			start: { character: 1391, column: 1, line: 64 },
+			end: { character: 1398, column: 8, line: 64 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				63:   .d + .g { color: green; }
+				64:   .e + .g { color: green; }
+				65:   .g + .i { color: green; }
+				      ^
+				66: </style>
+				67:`,
+			message: 'Unused CSS selector ".g + .i"',
+			pos: 1418,
+			start: { character: 1418, column: 1, line: 65 },
+			end: { character: 1425, column: 8, line: 65 }
+		}
+	]
+};

test/css/samples/siblings-combinator-each-nested/expected.css

@@ -0,0 +1 @@
+.a.svelte-xyz+.d.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.f.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.g.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.d.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.f.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.g.svelte-xyz.svelte-xyz{color:green}.j.svelte-xyz+.m.svelte-xyz.svelte-xyz{color:green}.j.svelte-xyz+.n.svelte-xyz.svelte-xyz{color:green}.j.svelte-xyz+.o.svelte-xyz.svelte-xyz{color:green}.k.svelte-xyz+.m.svelte-xyz.svelte-xyz{color:green}.k.svelte-xyz+.n.svelte-xyz.svelte-xyz{color:green}.k.svelte-xyz+.o.svelte-xyz.svelte-xyz{color:green}.l.svelte-xyz+.m.svelte-xyz.svelte-xyz{color:green}.l.svelte-xyz+.n.svelte-xyz.svelte-xyz{color:green}.l.svelte-xyz+.o.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz+.f.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz+.h.svelte-xyz.svelte-xyz{color:green}.f.svelte-xyz+.d.svelte-xyz.svelte-xyz{color:green}.f.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.f.svelte-xyz+.f.svelte-xyz.svelte-xyz{color:green}.h.svelte-xyz+.g.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz+.h.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz+.g.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz+.d.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.f.svelte-xyz+.f.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz+.g.svelte-xyz.svelte-xyz{color:green}.h.svelte-xyz+.h.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz+.i.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz+.e.svelte-xyz+.f.svelte-xyz{color:green}.e.svelte-xyz+.e.svelte-xyz+.d.svelte-xyz{color:green}.h.svelte-xyz+.h.svelte-xyz+.i.svelte-xyz{color:green}.h.svelte-xyz+.h.svelte-xyz+.g.svelte-xyz{color:green}

test/css/samples/siblings-combinator-each-nested/expected.html

@@ -0,0 +1,15 @@
+<div class="a svelte-xyz"></div>
+<div class="b"></div>
+<div class="c svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
+<div class="e svelte-xyz"></div>
+<div class="f svelte-xyz"></div>
+<div class="g svelte-xyz"></div>
+<div class="h svelte-xyz"></div>
+<div class="i svelte-xyz"></div>
+<div class="j svelte-xyz"></div>
+<div class="k svelte-xyz"></div>
+<div class="l svelte-xyz"></div>
+<div class="m svelte-xyz"></div>
+<div class="n svelte-xyz"></div>
+<div class="o svelte-xyz"></div>

test/css/samples/siblings-combinator-each-nested/input.svelte

@@ -0,0 +1,113 @@
+<script>
+	let array = [1];
+</script>
+
+<style>
+	/* boundary of each */
+	.a + .d { color: green; }
+	.a + .e { color: green; }
+	.a + .f { color: green; }
+	.a + .g { color: green; }
+	.c + .d { color: green; }
+	.c + .e { color: green; }
+	.c + .f { color: green; }
+	.c + .g { color: green; }
+
+	/* nested boundary of each */
+	.j + .m { color: green; }
+	.j + .n { color: green; }
+	.j + .o { color: green; }
+	.k + .m { color: green; }
+	.k + .n { color: green; }
+	.k + .o { color: green; }
+	.l + .m { color: green; }
+	.l + .n { color: green; }
+	.l + .o { color: green; }
+
+	/* parent each */
+	.d + .e { color: green; }
+	.e + .f { color: green; }
+
+	/* child each */
+	.g + .h { color: green; }
+
+	/* wrap around */
+	.f + .d { color: green; }
+	.f + .e { color: green; }
+	.f + .f { color: green; }
+
+	.h + .g { color: green; }
+	.i + .h { color: green; }
+	.i + .g { color: green; }
+
+	/* wrap around self */
+	.d + .d { color: green; }
+	.e + .e { color: green; }
+	.f + .f { color: green; }
+	.g + .g { color: green; }
+	.h + .h { color: green; }
+	.i + .i { color: green; }
+
+	/* wrap around self + next */
+	.e + .e + .f { color: green; }
+	.e + .e + .d { color: green; }
+	.h + .h + .i { color: green; }
+	.h + .h + .g { color: green; }
+
+	/* no match */
+	.a + .h { color: green; }
+	.a + .i { color: green; }
+	.c + .h { color: green; }
+	.c + .i { color: green; }
+	.d + .f { color: green; }
+	.d + .g { color: green; }
+	.e + .g { color: green; }
+	.g + .i { color: green; }
+</style>
+
+<div class="a" />
+
+{#each array as item}
+	<div class="b" />
+	<div class="c" />
+{/each}
+
+{#each array as item}
+	{#each array as item}
+		{#each array as item}
+			<div class="d" />
+		{/each}
+		<div class="e" />
+	{/each}
+	<div class="f" />
+{/each}
+
+{#each array as item}
+	<div class="g" />
+	{#each array as item}
+		<div class="h" />
+		{#each array as item}
+			<div class="i" />
+		{/each}
+	{/each}
+{/each}
+
+{#each array as item}
+	<div class="j" />
+	{#each array as item}
+		<div class="k" />
+		{#each array as item}
+			<div class="l" />
+		{/each}
+	{/each}
+{/each}
+
+{#each array as item}
+	{#each array as item}
+		{#each array as item}
+			<div class="m" />
+		{/each}
+		<div class="n" />
+	{/each}
+	<div class="o" />
+{/each}

test/css/samples/siblings-combinator-each/expected.css

@@ -0,0 +1 @@
+div.svelte-xyz+span.svelte-xyz{color:green}

test/css/samples/siblings-combinator-each/expected.html

@@ -0,0 +1,6 @@
+<div class="svelte-xyz"></div>
+<span class="each svelte-xyz"></span>
+<div class="each svelte-xyz"></div>
+<span class="each svelte-xyz"></span>
+<div class="each svelte-xyz"></div>
+<span class="svelte-xyz"></span>

test/css/samples/siblings-combinator-each/input.svelte

@@ -0,0 +1,20 @@
+<script>
+	let array = [1];
+</script>
+
+<style>
+	div + span {
+		color: green;
+	}
+</style>
+
+<div />
+
+{#each array as item}
+	<span class="each" />
+	<div class="each" />
+	<span class="each" />
+	<div class="each" />
+{/each}
+
+<span />

test/css/samples/siblings-combinator-if-not-exhaustive-with-each/_config.js

@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				16:
+				17:   /* no match */
+				18:   .b + .c { color: green; }
+				      ^
+				19: </style>
+				20:`,
+			message: 'Unused CSS selector ".b + .c"',
+			pos: 319,
+			start: { character: 319, column: 1, line: 18 },
+			end: { character: 326, column: 8, line: 18 }
+		}
+	]
+};

test/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.css

@@ -0,0 +1 @@
+.a.svelte-xyz+.b.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.c.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz+.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.c.svelte-xyz+.c.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.c.svelte-xyz+.d.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.c.svelte-xyz+.c.svelte-xyz+.d.svelte-xyz{color:green}

test/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.html

@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="c svelte-xyz"></div>
+<div class="d svelte-xyz"></div>

test/css/samples/siblings-combinator-if-not-exhaustive-with-each/input.svelte

@@ -0,0 +1,31 @@
+<script>
+	let foo = false;
+	let array = [1];
+</script>
+
+<style>
+	.a + .b { color: green; }
+	.a + .c { color: green; }
+	.a + .d { color: green; }
+	.b + .d { color: green; }
+	.c + .d { color: green; }
+
+	.a + .c + .c { color: green; }
+	.c + .c + .d { color: green; }
+	.a + .c + .c + .d { color: green; }
+
+	/* no match */
+	.b + .c { color: green; }
+</style>
+
+<div class="a" />
+
+{#if foo}
+	<div class="b" />
+{:else}
+	{#each array as item}
+		<div class="c" />
+	{/each}
+{/if}
+
+<div class="d" />

test/css/samples/siblings-combinator-if-not-exhaustive/_config.js

@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				12:
+				13:   /* no match */
+				14:   .b + .c { color: green; }
+				      ^
+				15: </style>
+				16:`,
+			message: 'Unused CSS selector ".b + .c"',
+			pos: 215,
+			start: { character: 215, column: 1, line: 14 },
+			end: { character: 222, column: 8, line: 14 }
+		}
+	]
+};

test/css/samples/siblings-combinator-if-not-exhaustive/expected.css

@@ -0,0 +1 @@
+.a.svelte-xyz+.b.svelte-xyz{color:green}.a.svelte-xyz+.c.svelte-xyz{color:green}.a.svelte-xyz+.d.svelte-xyz{color:green}.b.svelte-xyz+.d.svelte-xyz{color:green}.c.svelte-xyz+.d.svelte-xyz{color:green}

test/css/samples/siblings-combinator-if-not-exhaustive/expected.html

@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="d svelte-xyz"></div>

test/css/samples/siblings-combinator-if-not-exhaustive/input.svelte

@@ -0,0 +1,25 @@
+<script>
+	let foo = true;
+	let bar = true;
+</script>
+
+<style>
+	.a + .b { color: green; }
+	.a + .c { color: green; }
+	.a + .d { color: green; }
+	.b + .d { color: green; }
+	.c + .d { color: green; }
+
+	/* no match */
+	.b + .c { color: green; }
+</style>
+
+<div class="a" />
+
+{#if foo}
+	<div class="b" />
+{:else if bar}
+	<div class="c" />
+{/if}
+
+<div class="d" />

test/css/samples/siblings-combinator-if/_config.js

@@ -0,0 +1,60 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				13:
+				14:   /* no match */
+				15:   .a + .e { color: green; }
+				      ^
+				16:   .b + .c { color: green; }
+				17:   .b + .d { color: green; }`,
+			message: 'Unused CSS selector ".a + .e"',
+			pos: 242,
+			start: { character: 242, column: 1, line: 15 },
+			end: { character: 249, column: 8, line: 15 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				14:   /* no match */
+				15:   .a + .e { color: green; }
+				16:   .b + .c { color: green; }
+				      ^
+				17:   .b + .d { color: green; }
+				18:   .c + .d { color: green; }`,
+			message: 'Unused CSS selector ".b + .c"',
+			pos: 269,
+			start: { character: 269, column: 1, line: 16 },
+			end: { character: 276, column: 8, line: 16 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				15:   .a + .e { color: green; }
+				16:   .b + .c { color: green; }
+				17:   .b + .d { color: green; }
+				      ^
+				18:   .c + .d { color: green; }
+				19: </style>`,
+			message: 'Unused CSS selector ".b + .d"',
+			pos: 296,
+			start: { character: 296, column: 1, line: 17 },
+			end: { character: 303, column: 8, line: 17 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				16:   .b + .c { color: green; }
+				17:   .b + .d { color: green; }
+				18:   .c + .d { color: green; }
+				      ^
+				19: </style>
+				20:`,
+			message: 'Unused CSS selector ".c + .d"',
+			pos: 323,
+			start: { character: 323, column: 1, line: 18 },
+			end: { character: 330, column: 8, line: 18 }
+		}
+	]
+};

test/css/samples/siblings-combinator-if/expected.css

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

test/css/samples/siblings-combinator-if/expected.html

@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="e svelte-xyz"></div>

test/css/samples/siblings-combinator-if/input.svelte

@@ -0,0 +1,31 @@
+<script>
+	let foo = true;
+	let bar = true;
+</script>
+
+<style>
+	.a + .b { color: green; }
+	.a + .c { color: green; }
+	.a + .d { color: green; }
+	.b + .e { color: green; }
+	.c + .e { color: green; }
+	.d + .e { color: green; }
+
+	/* no match */
+	.a + .e { color: green; }
+	.b + .c { color: green; }
+	.b + .d { color: green; }
+	.c + .d { color: green; }
+</style>
+
+<div class="a" />
+
+{#if foo}
+	<div class="b" />
+{:else if bar}
+	<div class="c" />
+{:else}
+	<div class="d" />
+{/if}
+
+<div class="e" />

test/css/samples/siblings-combinator-star/_config.js

@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				3:     margin-left: 4px;
+				4:   }
+				5:   .not-match > * + * {
+				     ^
+				6:     margin-left: 4px;
+				7:   }`,
+			message: 'Unused CSS selector ".not-match > * + *"',
+			pos: 50,
+			start: { character: 50, column: 1, line: 5 },
+      end: { character: 68, column: 19, line: 5 }
+		}
+	]
+};

test/css/samples/siblings-combinator-star/expected.css

@@ -0,0 +1 @@
+.match.svelte-xyz>.svelte-xyz+.svelte-xyz{margin-left:4px}

test/css/samples/siblings-combinator-star/expected.html

@@ -0,0 +1,7 @@
+<div class="not-match">
+  <div></div>
+</div>
+<div class="match svelte-xyz">
+  <div class="svelte-xyz"></div>
+  <div class="svelte-xyz"></div>
+</div>

test/css/samples/siblings-combinator-star/input.svelte

@@ -0,0 +1,17 @@
+<style>
+	.match > * + * {
+		margin-left: 4px;
+	}
+	.not-match > * + * {
+		margin-left: 4px;
+	}
+</style>
+
+<div class="not-match">
+	<div />
+</div>
+
+<div class="match">
+	<div />
+	<div />
+</div>

test/css/samples/siblings-combinator/_config.js

@@ -0,0 +1,62 @@
+export default {
+	warnings: [
+		{
+			code: "css-unused-selector",
+			frame: `
+				3:     color: green;
+				4:   }
+				5:   article + div {
+				     ^
+				6:     color: green;
+				7:   }`,
+			message: 'Unused CSS selector "article + div"',
+			pos: 45,
+			start: { character: 45, column: 1, line: 5 },
+			end: { character: 58, column: 14, line: 5 }
+		},
+		{
+			code: "css-unused-selector",
+			
+			frame:`
+				 6:     color: green;
+				 7:   }
+				 8:   span + article {
+				      ^
+				 9:     color: green;
+				10:   }`,
+			message: 'Unused CSS selector "span + article"',
+			pos: 81,
+			start: { character: 81, column: 1, line: 8 },
+			end: { character: 95, column: 15, line: 8 }
+		},
+		{
+			code: "css-unused-selector",
+			
+			frame: `
+				 9:     color: green;
+				10:   }
+				11:   b + article {
+				      ^
+				12:     color: green;
+				13:   }`,
+			message: 'Unused CSS selector "b + article"',
+			pos: 118,
+			start: { character: 118, column: 1, line: 11 },
+			end: { character: 129, column: 12, line: 11 }
+		},
+		{
+			code: "css-unused-selector",
+			frame: `
+				12:     color: green;
+				13:   }
+				14:   span + div {
+				      ^
+				15:     color: green;
+				16:   }`,
+			message: 'Unused CSS selector "span + div"',
+			pos: 152,
+			start: { character: 152, column: 1, line: 14 },
+			end: { character: 162, column: 11, line: 14 }
+		}
+	]
+};

test/css/samples/siblings-combinator/expected.css

@@ -0,0 +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}

test/css/samples/siblings-combinator/expected.html

@@ -0,0 +1,5 @@
+<div class="a svelte-xyz">
+  <span class="svelte-xyz"></span>
+  <b class="svelte-xyz"></b>
+</div>
+<article class="b svelte-xyz"></article>

test/css/samples/siblings-combinator/input.svelte

@@ -0,0 +1,35 @@
+<style>
+	div + article {
+		color: green;
+	}
+	article + div {
+		color: green;
+	}
+	span + article {
+		color: green;
+	}
+	b + article {
+		color: green;
+	}
+	span + div {
+		color: green;
+	}
+	span + b {
+		color: green;
+	}
+	div span + b {
+		color: green;
+	}
+	.a + article {
+		color: green;
+	}
+	div + .b {
+		color: green;
+	}
+</style>
+
+<div class="a">
+	<span />
+	<b />
+</div>
+<article class="b"></article>