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

scope CSS sibling combinators (#5427)

Browse Source
pull/5464/head
Tan Li Hau 4 years ago committed by GitHub
parent a1651ca271
commit 967b88186b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
105 changed files with 2280 additions and 24 deletions
Show Stats Download Patch File Download Diff File

1
CHANGELOG.md
Unescape View File

@ -3,6 +3,7 @@
## Unreleased
* Add `|nonpassive` event modifier, explicitly passing `passive: false` ([#2068](https://github.com/sveltejs/svelte/issues/2068))
* Scope CSS selectors with `~` and `+` combinators ([#3104](https://github.com/sveltejs/svelte/issues/3104))
* Fix keyed `{#each}` not reacting to key changing ([#5444](https://github.com/sveltejs/svelte/issues/5444))
* Fix destructuring into store values ([#5449](https://github.com/sveltejs/svelte/issues/5449))
* Fix erroneous `missing-declaration` warning with `use:obj.method` ([#5451](https://github.com/sveltejs/svelte/issues/5451))

8
src/compiler/compile/Component.ts
Unescape View File

@ -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);

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

@ -4,12 +4,20 @@ 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 = 1,
Definitely = 2,
}
const whitelist_attribute_selector = new Map([
['details', new Set(['open'])]
@ -39,10 +47,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 +157,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 +170,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 +182,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 +202,22 @@ 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 === '+' || block.combinator.name === '~') {
const siblings = get_possible_element_siblings(node, block.combinator.name === '+');
let has_match = false;
for (const possible_sibling of siblings.keys()) {
if (apply_selector(blocks.slice(), possible_sibling, to_encapsulate)) {
to_encapsulate.push({ node, block });
has_match = true;
}
}
return has_match;
}
// TODO other combinators
@ -376,6 +395,158 @@ 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): Map<Element, NodeExist> {
const result: Map<Element, NodeExist> = new Map();
let prev: INode = node;
while (prev = prev.prev) {
if (prev.type === 'Element') {
if (!prev.attributes.find(attr => attr.name.toLowerCase() === 'slot')) {
result.set(prev, 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);
add_to_map(possible_last_child, result);
if (adjacent_only && has_definite_elements(possible_last_child)) {
return result;
}
}
}
if (!prev || !adjacent_only) {
let parent: INode = node;
let skip_each_for_last_child = 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);
add_to_map(possible_siblings, result);
if (parent.type === 'EachBlock') {
// first child of each block can select the last child of each block as previous sibling
if (skip_each_for_last_child) {
skip_each_for_last_child = false;
} else {
add_to_map(get_possible_last_child(parent, adjacent_only), result);
}
} else if (parent.type === 'ElseBlock') {
skip_each_for_last_child = true;
parent = parent.parent;
}
if (adjacent_only && has_definite_elements(possible_siblings)) {
break;
}
}
}
return result;
}
function get_possible_last_child(block: EachBlock | IfBlock | AwaitBlock, adjacent_only: boolean): Map<Element, NodeExist> {
const result: Map<Element, NodeExist> = new Map();
if (block.type === 'EachBlock') {
const each_result: Map<Element, NodeExist> = loop_child(block.children, adjacent_only);
const else_result: Map<Element, NodeExist> = block.else ? loop_child(block.else.children, adjacent_only) : new Map();
const not_exhaustive = !has_definite_elements(else_result);
if (not_exhaustive) {
mark_as_probably(each_result);
mark_as_probably(else_result);
}
add_to_map(each_result, result);
add_to_map(else_result, result);
} else if (block.type === 'IfBlock') {
const if_result: Map<Element, NodeExist> = loop_child(block.children, adjacent_only);
const else_result: Map<Element, NodeExist> = block.else ? loop_child(block.else.children, adjacent_only) : new Map();
const not_exhaustive = !has_definite_elements(if_result) || !has_definite_elements(else_result);
if (not_exhaustive) {
mark_as_probably(if_result);
mark_as_probably(else_result);
}
add_to_map(if_result, result);
add_to_map(else_result, result);
} else if (block.type === 'AwaitBlock') {
const pending_result: Map<Element, NodeExist> = block.pending ? loop_child(block.pending.children, adjacent_only) : new Map();
const then_result: Map<Element, NodeExist> = block.then ? loop_child(block.then.children, adjacent_only) : new Map();
const catch_result: Map<Element, NodeExist> = block.catch ? loop_child(block.catch.children, adjacent_only) : new Map();
const not_exhaustive = !has_definite_elements(pending_result) || !has_definite_elements(then_result) || !has_definite_elements(catch_result);
if (not_exhaustive) {
mark_as_probably(pending_result);
mark_as_probably(then_result);
mark_as_probably(catch_result);
}
add_to_map(pending_result, result);
add_to_map(then_result, result);
add_to_map(catch_result, result);
}
return result;
}
function has_definite_elements(result: Map<Element, NodeExist>): boolean {
if (result.size === 0) return false;
for (const exist of result.values()) {
if (exist === NodeExist.Definitely) {
return true;
}
}
return false;
}
function add_to_map(from: Map<Element, NodeExist>, to: Map<Element, NodeExist>) {
from.forEach((exist, element) => {
to.set(element, higher_existance(exist, to.get(element)));
});
}
function higher_existance(exist1: NodeExist | null, exist2: NodeExist | null): NodeExist {
if (exist1 === undefined || exist2 === undefined) return exist1 || exist2;
return exist1 > exist2 ? exist1 : exist2;
}
function mark_as_probably(result: Map<Element, NodeExist>) {
for (const key of result.keys()) {
result.set(key, NodeExist.Probably);
}
}
function loop_child(children: INode[], adjacent_only: boolean) {
const result: Map<Element, NodeExist> = new Map();
for (let i = children.length - 1; i >= 0; i--) {
const child = children[i];
if (child.type === 'Element') {
result.set(child, 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);
add_to_map(child_result, result);
if (adjacent_only && has_definite_elements(child_result)) {
break;
}
}
}
return result;
}
class Block {
global: boolean;
combinator: CssNode;

18
src/compiler/compile/css/Stylesheet.ts
Unescape View File

@ -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);
}
}

7
src/compiler/compile/nodes/Element.ts
Unescape View File

@ -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)$/;
@ -124,7 +125,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;
@ -185,7 +186,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));
@ -236,7 +237,7 @@ export default class Element extends Node {
this.validate();
component.stylesheet.apply(this);
component.apply_stylesheet(this);
}
validate() {

3
test/css/samples/general-siblings-combinator-await-not-exhaustive/_config.js
Unescape View File

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

1
test/css/samples/general-siblings-combinator-await-not-exhaustive/expected.css
Unescape View File

@ -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}

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

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

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

@ -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" />

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

@ -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 }
}
]
};

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

@ -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}

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

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

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

@ -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" />

3
test/css/samples/general-siblings-combinator-each-2/_config.js
Unescape View File

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

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

@ -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}

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

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

37
test/css/samples/general-siblings-combinator-each-2/input.svelte
Unescape View File

@ -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" />

18
test/css/samples/general-siblings-combinator-each-else-nested/_config.js
Unescape View File

@ -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 }
}
]
};

1
test/css/samples/general-siblings-combinator-each-else-nested/expected.css
Unescape View File

@ -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}

3
test/css/samples/general-siblings-combinator-each-else-nested/expected.html
Unescape View File

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

77
test/css/samples/general-siblings-combinator-each-else-nested/input.svelte
Unescape View File

@ -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}

18
test/css/samples/general-siblings-combinator-each-else/_config.js
Unescape View File

@ -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 }
}
]
};

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

@ -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}

3
test/css/samples/general-siblings-combinator-each-else/expected.html
Unescape View File

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

24
test/css/samples/general-siblings-combinator-each-else/input.svelte
Unescape View File

@ -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" />

3
test/css/samples/general-siblings-combinator-each-nested/_config.js
Unescape View File

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

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

@ -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}

15
test/css/samples/general-siblings-combinator-each-nested/expected.html
Unescape View File

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

113
test/css/samples/general-siblings-combinator-each-nested/input.svelte
Unescape View File

@ -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}

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

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

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

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

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

@ -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 />

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

@ -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 }
}
]
};

1
test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/expected.css
Unescape View File

@ -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}

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

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

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

@ -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" />

18
test/css/samples/general-siblings-combinator-if-not-exhaustive/_config.js
Unescape View File

@ -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 }
}
]
};

1
test/css/samples/general-siblings-combinator-if-not-exhaustive/expected.css
Unescape View File

@ -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}

3
test/css/samples/general-siblings-combinator-if-not-exhaustive/expected.html
Unescape View File

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

25
test/css/samples/general-siblings-combinator-if-not-exhaustive/input.svelte
Unescape View File

@ -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" />

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

@ -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 }
}
]
};

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

@ -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}

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

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

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

@ -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" />

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" />

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

@ -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 }
}
]
};

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

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

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

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

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

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

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

@ -0,0 +1,60 @@
export default {
warnings: [
{
code: "css-unused-selector",
frame: `
10:
11: /* no match */
12: article ~ div { color: green; }
^
13: span ~ article { color: green; }
14: b ~ article { color: green; }`,
message: 'Unused CSS selector "article ~ div"',
pos: 275,
start: { character: 275, column: 1, line: 12 },
end: { character: 288, column: 14, line: 12 }
},
{
code: "css-unused-selector",
frame: `
11: /* no match */
12: article ~ div { color: green; }
13: span ~ article { color: green; }
^
14: b ~ article { color: green; }
15: span ~ div { color: green; }`,
message: 'Unused CSS selector "span ~ article"',
pos: 308,
start: { character: 308, column: 1, line: 13 },
end: { character: 322, column: 15, line: 13 }
},
{
code: "css-unused-selector",
frame: `
12: article ~ div { color: green; }
13: span ~ article { color: green; }
14: b ~ article { color: green; }
^
15: span ~ div { color: green; }
16: </style>`,
message: 'Unused CSS selector "b ~ article"',
pos: 342,
start: { character: 342, column: 1, line: 14 },
end: { character: 353, column: 12, line: 14 }
},
{
code: "css-unused-selector",
frame: `
13: span ~ article { color: green; }
14: b ~ article { color: green; }
15: span ~ div { color: green; }
^
16: </style>
17:`,
message: 'Unused CSS selector "span ~ div"',
pos: 373,
start: { character: 373, column: 1, line: 15 },
end: { character: 383, column: 11, line: 15 }
}
]
};

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

@ -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}.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}

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

@ -0,0 +1,7 @@
<div class="a svelte-xyz">
<span class="svelte-xyz"></span>
<b class="svelte-xyz"></b>
</div>
<article class="b svelte-xyz"></article>
<p class="c svelte-xyz"></p>
<details class="d svelte-xyz"></details>

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

@ -0,0 +1,24 @@
<style>
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; }
</style>
<div class="a">
<span />
<b />
</div>
<article class="b"></article>
<p class="c"></p>
<details class="d"></details>

3
test/css/samples/siblings-combinator-await-not-exhaustive/_config.js
Unescape View File

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

1
test/css/samples/siblings-combinator-await-not-exhaustive/expected.css
Unescape View File

@ -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}

4
test/css/samples/siblings-combinator-await-not-exhaustive/expected.html
Unescape View File

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

41
test/css/samples/siblings-combinator-await-not-exhaustive/input.svelte
Unescape View File

@ -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" />

60
test/css/samples/siblings-combinator-await/_config.js
Unescape View File

@ -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 }
}
]
};

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

@ -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}

3
test/css/samples/siblings-combinator-await/expected.html
Unescape View File

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

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

@ -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" />

18
test/css/samples/siblings-combinator-each-2/_config.js
Unescape View File

@ -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 }
}
]
};

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

@ -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}

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

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

38
test/css/samples/siblings-combinator-each-2/input.svelte
Unescape View File

@ -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" />

144
test/css/samples/siblings-combinator-each-else-nested/_config.js
Unescape View File

@ -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 }
}
]
};

1
test/css/samples/siblings-combinator-each-else-nested/expected.css
Unescape View File

@ -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}

3
test/css/samples/siblings-combinator-each-else-nested/expected.html
Unescape View File

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

74
test/css/samples/siblings-combinator-each-else-nested/input.svelte
Unescape View File

@ -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}

32
test/css/samples/siblings-combinator-each-else/_config.js
Unescape View File

@ -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 }
}
]
};

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

@ -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}

3
test/css/samples/siblings-combinator-each-else/expected.html
Unescape View File

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

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

@ -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" />

116
test/css/samples/siblings-combinator-each-nested/_config.js
Unescape View File

@ -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 }
}
]
};

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

@ -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}

15
test/css/samples/siblings-combinator-each-nested/expected.html
Unescape View File

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

113
test/css/samples/siblings-combinator-each-nested/input.svelte
Unescape View File

@ -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}

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

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

6
test/css/samples/siblings-combinator-each/expected.html
Unescape View File

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

20
test/css/samples/siblings-combinator-each/input.svelte
Unescape View File

@ -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 />

18
test/css/samples/siblings-combinator-if-not-exhaustive-with-each/_config.js
Unescape View File

@ -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 }
}
]
};

1
test/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.css
Unescape View File

@ -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}

3
test/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.html
Unescape View File

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

31
test/css/samples/siblings-combinator-if-not-exhaustive-with-each/input.svelte
Unescape View File

@ -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" />

18
test/css/samples/siblings-combinator-if-not-exhaustive/_config.js
Unescape View File

@ -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 }
}
]
};

1
test/css/samples/siblings-combinator-if-not-exhaustive/expected.css
Unescape View File

@ -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}

3
test/css/samples/siblings-combinator-if-not-exhaustive/expected.html
Unescape View File

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

25
test/css/samples/siblings-combinator-if-not-exhaustive/input.svelte
Unescape View File

@ -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" />

60
test/css/samples/siblings-combinator-if/_config.js
Unescape View File

@ -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 }
}
]
};

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

@ -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}

3
test/css/samples/siblings-combinator-if/expected.html
Unescape View File

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

31
test/css/samples/siblings-combinator-if/input.svelte
Unescape View File

@ -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" />

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" />

18
test/css/samples/siblings-combinator-star/_config.js
Unescape View File

@ -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 }
}
]
};

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

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

7
test/css/samples/siblings-combinator-star/expected.html
Unescape View File

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

Some files were not shown because too many files have changed in this diff Show More

Write Preview
Loading…
Cancel
Save