Merge pull request #3825 from tanhauhau/tanhauhau/unused-css-string-concat

feat unused css selector that understands string concatenation

src/compiler/compile/css/Selector.ts

@@ -3,6 +3,7 @@ import Stylesheet from './Stylesheet';
 import { gather_possible_values, UNKNOWN } from './gather_possible_values';
 import { CssNode } from './interfaces';
 import Component from '../Component';
+import Element from '../nodes/Element';
 
 enum BlockAppliesToNode {
 	NotPossible,
@@ -34,8 +35,8 @@ export default class Selector {
 		this.used = this.blocks[0].global;
 	}
 
-	apply(node: CssNode, stack: CssNode[]) {
+	apply(node: Element, stack: Element[]) {
-		const to_encapsulate: CssNode[] = [];
+		const to_encapsulate: any[] = [];
 
 		apply_selector(this.local_blocks.slice(), node, stack.slice(), to_encapsulate);
 
@@ -132,7 +133,7 @@ export default class Selector {
 	}
 }
 
-function apply_selector(blocks: Block[], node: CssNode, stack: CssNode[], to_encapsulate: any[]): boolean {
+function apply_selector(blocks: Block[], node: Element, stack: Element[], to_encapsulate: any[]): boolean {
 	const block = blocks.pop();
 	if (!block) return false;
 
@@ -259,16 +260,84 @@ function attribute_matches(node: CssNode, name: string, expected_value: string,
 	const attr = node.attributes.find((attr: CssNode) => attr.name === name);
 	if (!attr) return false;
 	if (attr.is_true) return operator === null;
-	if (attr.chunks.length > 1) return true;
 	if (!expected_value) return true;
 
+	if (attr.chunks.length === 1) {
 		const value = attr.chunks[0];
-
 		if (!value) return false;
 		if (value.type === 'Text') return test_attribute(operator, expected_value, case_insensitive, value.data);
+	}
 
 	const possible_values = new Set();
-	gather_possible_values(value.node, possible_values);
+
+	let prev_values = [];
+	for (const chunk of attr.chunks) {
+		const current_possible_values = new Set();
+		if (chunk.type === 'Text') {
+			current_possible_values.add(chunk.data);
+		} else {
+			gather_possible_values(chunk.node, current_possible_values);
+		}
+
+		// impossible to find out all combinations
+		if (current_possible_values.has(UNKNOWN)) return true;
+		
+		if (prev_values.length > 0) {
+			const start_with_space = [];
+			const remaining = [];
+			current_possible_values.forEach((current_possible_value: string) => {
+				if (/^\s/.test(current_possible_value)) {
+					start_with_space.push(current_possible_value);
+				} else {
+					remaining.push(current_possible_value);
+				}
+			});
+
+			if (remaining.length > 0) {
+				if (start_with_space.length > 0) {
+					prev_values.forEach(prev_value => possible_values.add(prev_value));
+				}
+
+				const combined = [];
+				prev_values.forEach((prev_value: string) => {
+					remaining.forEach((value: string) => {
+						combined.push(prev_value + value);
+					});
+				});
+				prev_values = combined;
+
+				start_with_space.forEach((value: string) => {
+					if (/\s$/.test(value)) {
+						possible_values.add(value);
+					} else {
+						prev_values.push(value);
+					}
+				});
+				continue;
+			} else {
+				prev_values.forEach(prev_value => possible_values.add(prev_value));
+				prev_values = [];
+			}
+		}
+
+		current_possible_values.forEach((current_possible_value: string) => {
+			if (/\s$/.test(current_possible_value)) {
+				possible_values.add(current_possible_value);
+			} else {
+				prev_values.push(current_possible_value);
+			}
+		});
+		if (prev_values.length < current_possible_values.size) {
+			prev_values.push(' ');
+		}
+
+		if (prev_values.length > 20) {
+			// might grow exponentially, bail out
+			return true;
+		}
+	}
+	prev_values.forEach(prev_value => possible_values.add(prev_value));
+
 	if (possible_values.has(UNKNOWN)) return true;
 
 	for (const value of possible_values) {

test/css/samples/unused-selector-string-concat/_config.js

@@ -0,0 +1,143 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector',
+			frame:
+				` 9: <style>
+				10:   .foo {color: red;}
+				11:   .fooaa {color: red;}
+				      ^
+				12:   .foobb {color: red;}
+				13:   .foocc {color: red;}`,
+			start: { line: 11, column: 2, character: 206 },
+			end: { line: 11, column: 8, character: 212 },
+			pos: 206,
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector',
+			frame:
+				`10:   .foo {color: red;}
+				11:   .fooaa {color: red;}
+				12:   .foobb {color: red;}
+				      ^
+				13:   .foocc {color: red;}
+				14:   .foodd {color: red;}`,
+			start: { line: 12, column: 2, character: 229 },
+			end: { line: 12, column: 8, character: 235 },
+			pos: 229,
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector',
+			frame:
+				`12:   .foobb {color: red;}
+				13:   .foocc {color: red;}
+				14:   .foodd {color: red;}
+				      ^
+				15:   .aa {color: red;}
+				16:   .bb {color: red;}`,
+			start: { line: 14, column: 2, character: 275 },
+			end: { line: 14, column: 8, character: 281 },
+			pos: 275,
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector',
+			frame:
+				`18:   .dd {color: red;}
+				19:   .aabar {color: red;}
+				20:   .bbbar {color: red;}
+				      ^
+				21:   .ccbar {color: red;}
+				22:   .ddbar {color: red;}`,
+			start: { line: 20, column: 2, character: 401 },
+			end: { line: 20, column: 8, character: 407 },
+			pos: 401,
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector',
+			frame:
+				`19:   .aabar {color: red;}
+				20:   .bbbar {color: red;}
+				21:   .ccbar {color: red;}
+				      ^
+				22:   .ddbar {color: red;}
+				23:   .fooaabar {color: red;}`,
+			start: { line: 21, column: 2, character: 424 },
+			end: { line: 21, column: 8, character: 430 },
+			pos: 424,
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector',
+			frame:
+				`20:   .bbbar {color: red;}
+				21:   .ccbar {color: red;}
+				22:   .ddbar {color: red;}
+				      ^
+				23:   .fooaabar {color: red;}
+				24:   .foobbbar {color: red;}`,
+			start: { line: 22, column: 2, character: 447 },
+			end: { line: 22, column: 8, character: 453 },
+			pos: 447,
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector',
+			frame:
+				`21:   .ccbar {color: red;}
+				22:   .ddbar {color: red;}
+				23:   .fooaabar {color: red;}
+				      ^
+				24:   .foobbbar {color: red;}
+				25:   .fooccbar {color: red;}`,
+			start: { line: 23, column: 2, character: 470 },
+			end: { line: 23, column: 11, character: 479 },
+			pos: 470,
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector',
+			frame:
+				`22:   .ddbar {color: red;}
+				23:   .fooaabar {color: red;}
+				24:   .foobbbar {color: red;}
+				      ^
+				25:   .fooccbar {color: red;}
+				26:   .fooddbar {color: red;}`,
+			start: { line: 24, column: 2, character: 496 },
+			end: { line: 24, column: 11, character: 505 },
+			pos: 496,
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector',
+			frame:
+				`23:   .fooaabar {color: red;}
+				24:   .foobbbar {color: red;}
+				25:   .fooccbar {color: red;}
+				      ^
+				26:   .fooddbar {color: red;}
+				27:   .baz {color: red;}`,
+			start: { line: 25, column: 2, character: 522 },
+			end: { line: 25, column: 11, character: 531 },
+			pos: 522,
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector',
+			frame:
+				`26:   .fooddbar {color: red;}
+				27:   .baz {color: red;}
+				28:   .unused {color: red;}
+				      ^
+				29: </style>`,
+			start: { line: 28, column: 2, character: 595 },
+			end: { line: 28, column: 9, character: 602 },
+			pos: 595,
+		},
+	],
+};

test/css/samples/unused-selector-string-concat/expected.css

@@ -0,0 +1 @@
+.foo.svelte-xyz{color:red}.foocc.svelte-xyz{color:red}.aa.svelte-xyz{color:red}.bb.svelte-xyz{color:red}.cc.svelte-xyz{color:red}.dd.svelte-xyz{color:red}.aabar.svelte-xyz{color:red}.fooddbar.svelte-xyz{color:red}.baz.svelte-xyz{color:red}

test/css/samples/unused-selector-string-concat/input.svelte

@@ -0,0 +1,29 @@
+<script>
+  export let a, b, c;
+</script>
+
+<div class="foo{a ? ' aa' : b ? ' bb ' : c ? 'cc ' : 'dd'}bar baz {a ? ' aa' : b ? ' bb ' : c ? 'cc ' : 'dd'}">
+  some stuff
+</div>
+
+<style>
+  .foo {color: red;}
+  .fooaa {color: red;}
+  .foobb {color: red;}
+  .foocc {color: red;}
+  .foodd {color: red;}
+  .aa {color: red;}
+  .bb {color: red;}
+  .cc {color: red;}
+  .dd {color: red;}
+  .aabar {color: red;}
+  .bbbar {color: red;}
+  .ccbar {color: red;}
+  .ddbar {color: red;}
+  .fooaabar {color: red;}
+  .foobbbar {color: red;}
+  .fooccbar {color: red;}
+  .fooddbar {color: red;}
+  .baz {color: red;}
+  .unused {color: red;}
+</style>

test/css/samples/unused-selector-ternary-bailed/_config.js

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

test/css/samples/unused-selector-ternary-bailed/expected.css

@@ -0,0 +1 @@
+.thing.svelte-xyz{color:blue}.active.svelte-xyz{color:blue}.thing.active.svelte-xyz{color:blue}.hover.svelte-xyz{color:blue}.hover.unused.svelte-xyz{color:blue}.unused.svelte-xyz{color:blue}

test/css/samples/unused-selector-ternary-bailed/input.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let active;
+  export let hover;
+</script>
+
+<div class="thing {active ? 'active' : hover}">
+  some stuff
+</div>
+
+<style>
+  .thing {color: blue;}
+  .active {color: blue;}
+  .thing.active {color: blue;}
+  .hover { color: blue; }
+  .hover.unused { color: blue; }
+
+  .unused {color: blue;}
+</style>

test/css/samples/unused-selector-ternary-concat/_config.js

@@ -0,0 +1,25 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			end: {
+				character: 205,
+				column: 9,
+				line: 14,
+			},
+			frame: `
+				12:   .thing.active {color: blue;}
+				13:
+				14:   .unused {color: blue;}
+				      ^
+				15: </style>`,
+			message: 'Unused CSS selector',
+			pos: 198,
+			start: {
+				character: 198,
+				column: 2,
+				line: 14,
+			},
+		},
+	],
+};

test/css/samples/unused-selector-ternary-concat/expected.css

@@ -0,0 +1 @@
+.thing.svelte-xyz{color:blue}.active.svelte-xyz{color:blue}.thing.active.svelte-xyz{color:blue}

test/css/samples/unused-selector-ternary-concat/input.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let active;
+</script>
+
+<div class="thing {active ? 'active' : ''}">
+  some stuff
+</div>
+
+<style>
+  .thing {color: blue;}
+  .active {color: blue;}
+  .thing.active {color: blue;}
+
+  .unused {color: blue;}
+</style>

test/css/samples/unused-selector-ternary-nested/_config.js

@@ -0,0 +1,31 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector',
+			frame: `
+				13:   .thing.active {color: blue;}
+				14:   .hover { color: blue; }
+				15:   .hover.unused { color: blue; }
+				      ^
+				16:
+				17:   .unused {color: blue;}`,
+			start: { line: 15, column: 2, character: 261 },
+			end: { line: 15, column: 15, character: 274 },
+			pos: 261,
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector',
+			frame: `
+				15:   .hover.unused { color: blue; }
+				16:
+				17:   .unused {color: blue;}
+				      ^
+				18: </style>`,
+			start: { line: 17, column: 2, character: 295 },
+			end: { line: 17, column: 9, character: 302 },
+			pos: 295,
+		},
+	],
+};

test/css/samples/unused-selector-ternary-nested/expected.css

@@ -0,0 +1 @@
+.thing.svelte-xyz{color:blue}.active.svelte-xyz{color:blue}.thing.active.svelte-xyz{color:blue}.hover.svelte-xyz{color:blue}

test/css/samples/unused-selector-ternary-nested/input.svelte

@@ -0,0 +1,18 @@
+<script>
+  export let active;
+  export let hover;
+</script>
+
+<div class="thing {active ? 'active' : hover ? 'hover' : ''}">
+  some stuff
+</div>
+
+<style>
+  .thing {color: blue;}
+  .active {color: blue;}
+  .thing.active {color: blue;}
+  .hover { color: blue; }
+  .hover.unused { color: blue; }
+
+  .unused {color: blue;}
+</style>