invert: when a not selector always matches by never matching, it's used, when it never matches by always matching, it's unused

Author: dummdidumm

packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js

@@ -10,6 +10,7 @@ import { get_attribute_chunks, is_text_attribute } from '../../../utils/ast.js';
  *   stylesheet: Compiler.Css.StyleSheet;
  *   element: Compiler.AST.RegularElement | Compiler.AST.SvelteElement;
  *   from_render_tag: boolean;
+ *   inside_not: boolean;
  * }} State
  */
 /** @typedef {NODE_PROBABLY_EXISTS | NODE_DEFINITELY_EXISTS} NodeExistsValue */
@@ -61,9 +62,13 @@ export function prune(stylesheet, element) {
 		const parent = get_element_parent(element);
 		if (!parent) return;
 
-		walk(stylesheet, { stylesheet, element: parent, from_render_tag: true }, visitors);
+		walk(
+			stylesheet,
+			{ stylesheet, element: parent, from_render_tag: true, inside_not: false },
+			visitors
+		);
 	} else {
-		walk(stylesheet, { stylesheet, element, from_render_tag: false }, visitors);
+		walk(stylesheet, { stylesheet, element, from_render_tag: false, inside_not: false }, visitors);
 	}
 }
 
@@ -127,7 +132,7 @@ const visitors = {
 							selectors_to_check,
 							/** @type {Compiler.Css.Rule} */ (node.metadata.rule),
 							element,
-							context.state.stylesheet
+							context.state
 						)
 					) {
 						mark(inner, element);
@@ -143,7 +148,7 @@ const visitors = {
 				selectors,
 				/** @type {Compiler.Css.Rule} */ (node.metadata.rule),
 				context.state.element,
-				context.state.stylesheet
+				context.state
 			)
 		) {
 			mark(inner, context.state.element);
@@ -188,10 +193,10 @@ function truncate(node) {
  * @param {Compiler.Css.RelativeSelector[]} relative_selectors
  * @param {Compiler.Css.Rule} rule
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
- * @param {Compiler.Css.StyleSheet} stylesheet
+ * @param {State} state
  * @returns {boolean}
  */
-function apply_selector(relative_selectors, rule, element, stylesheet) {
+function apply_selector(relative_selectors, rule, element, state) {
 	const parent_selectors = relative_selectors.slice();
 	const relative_selector = parent_selectors.pop();
 
@@ -201,7 +206,7 @@ function apply_selector(relative_selectors, rule, element, stylesheet) {
 		relative_selector,
 		rule,
 		element,
-		stylesheet
+		state
 	);
 
 	if (!possible_match) {
@@ -215,14 +220,14 @@ function apply_selector(relative_selectors, rule, element, stylesheet) {
 			parent_selectors,
 			rule,
 			element,
-			stylesheet
+			state
 		);
 	}
 
 	// if this is the left-most non-global selector, mark it — we want
 	// `x y z {...}` to become `x.blah y z.blah {...}`
 	const parent = parent_selectors[parent_selectors.length - 1];
-	if (!parent || is_global(parent, rule)) {
+	if (!state.inside_not && (!parent || is_global(parent, rule))) {
 		mark(relative_selector, element);
 	}
 
@@ -235,17 +240,10 @@ function apply_selector(relative_selectors, rule, element, stylesheet) {
  * @param {Compiler.Css.RelativeSelector[]} parent_selectors
  * @param {Compiler.Css.Rule} rule
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
- * @param {Compiler.Css.StyleSheet} stylesheet
+ * @param {State} state
  * @returns {boolean}
  */
-function apply_combinator(
-	combinator,
-	relative_selector,
-	parent_selectors,
-	rule,
-	element,
-	stylesheet
-) {
+function apply_combinator(combinator, relative_selector, parent_selectors, rule, element, state) {
 	const name = combinator.name;
 
 	switch (name) {
@@ -269,9 +267,9 @@ function apply_combinator(
 				}
 
 				if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') {
-					if (apply_selector(parent_selectors, rule, parent, stylesheet)) {
+					if (apply_selector(parent_selectors, rule, parent, state)) {
 						// TODO the `name === ' '` causes false positives, but removing it causes false negatives...
-						if (name === ' ' || crossed_component_boundary) {
+						if (!state.inside_not && (name === ' ' || crossed_component_boundary)) {
 							mark(parent_selectors[parent_selectors.length - 1], parent);
 						}
 
@@ -297,11 +295,15 @@ function apply_combinator(
 				if (possible_sibling.type === 'RenderTag' || possible_sibling.type === 'SlotElement') {
 					// `{@render foo()}<p>foo</p>` with `:global(.x) + p` is a match
 					if (parent_selectors.length === 1 && parent_selectors[0].metadata.is_global) {
-						mark(relative_selector, element);
+						if (!state.inside_not) {
+							mark(relative_selector, element);
+						}
 						sibling_matched = true;
 					}
-				} else if (apply_selector(parent_selectors, rule, possible_sibling, stylesheet)) {
-					mark(relative_selector, element);
+				} else if (apply_selector(parent_selectors, rule, possible_sibling, state)) {
+					if (!state.inside_not) {
+						mark(relative_selector, element);
+					}
 					sibling_matched = true;
 				}
 			}
@@ -381,10 +383,10 @@ const regex_backslash_and_following_character = /\\(.)/g;
  * @param {Compiler.Css.RelativeSelector} relative_selector
  * @param {Compiler.Css.Rule} rule
  * @param {Compiler.AST.RegularElement | Compiler.AST.SvelteElement} element
- * @param {Compiler.Css.StyleSheet} stylesheet
+ * @param {State} state
  * @returns {boolean  }
  */
-function relative_selector_might_apply_to_node(relative_selector, rule, element, stylesheet) {
+function relative_selector_might_apply_to_node(relative_selector, rule, element, state) {
 	// Sort :has(...) selectors in one bucket and everything else into another
 	const has_selectors = [];
 	const other_selectors = [];
@@ -458,7 +460,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 					if (
 						selectors.length === 0 /* is :global(...) */ ||
 						(element.metadata.scoped && selector_matched) ||
-						apply_selector(selectors, rule, element, stylesheet)
+						apply_selector(selectors, rule, element, state)
 					) {
 						complex_selector.metadata.used = true;
 						selector_matched = matched = true;
@@ -504,7 +506,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 				) {
 					const args = selector.args;
 					const complex_selector = args.children[0];
-					return apply_selector(complex_selector.children, rule, element, stylesheet);
+					return apply_selector(complex_selector.children, rule, element, state);
 				}
 
 				// We came across a :global, everything beyond it is global and therefore a potential match
@@ -517,15 +519,25 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 						const relative = truncate(complex_selector);
 						const is_global = relative.length === 0;
 
-						if (is_global || apply_selector(relative, rule, element, stylesheet)) {
+						if (is_global) {
+							complex_selector.metadata.used = true;
+							matched = true;
+						} else if (name !== 'not' && apply_selector(relative, rule, element, state)) {
 							complex_selector.metadata.used = true;
 							matched = true;
-						} else if (name === 'not') {
+						} else if (
+							name === 'not' &&
+							!apply_selector(relative, rule, element, { ...state, inside_not: true })
+						) {
 							// For `:not(...)` we gotta do the inverse: If it did not match, mark the element and possibly
 							// everything above (if the selector is written is a such) as scoped (because they matched by not matching).
-							// The above if condition will ensure the selector itself will be marked as used if it doesn't match at least once,
-							// and therefore having actual usefulness in the CSS output.
 							element.metadata.scoped = true;
+							complex_selector.metadata.used = true;
+							matched = true;
+
+							for (const r of relative) {
+								r.metadata.scoped = true;
+							}
 
 							// bar:not(foo bar) means that foo is an ancestor of bar
 							if (complex_selector.children.length > 1) {
@@ -633,7 +645,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 				const parent = /** @type {Compiler.Css.Rule} */ (rule.metadata.parent_rule);
 
 				for (const complex_selector of parent.prelude.children) {
-					if (apply_selector(truncate(complex_selector), parent, element, stylesheet)) {
+					if (apply_selector(truncate(complex_selector), parent, element, state)) {
 						complex_selector.metadata.used = true;
 						matched = true;
 					}

packages/svelte/tests/css/samples/not-selector-global/_config.js

@@ -4,16 +4,16 @@ export default test({
 	warnings: [
 		{
 			code: 'css_unused_selector',
-			message: 'Unused CSS selector ":global(.x) :not(.unused)"',
+			message: 'Unused CSS selector ":global(.x) :not(p)"',
 			start: {
-				line: 17,
+				line: 14,
 				column: 1,
-				character: 289
+				character: 197
 			},
 			end: {
-				line: 17,
-				column: 26,
-				character: 314
+				line: 14,
+				column: 20,
+				character: 216
 			}
 		}
 	]

packages/svelte/tests/css/samples/not-selector-global/expected.css

@@ -8,9 +8,12 @@
 	.x:not(.foo.svelte-xyz) {
 		color: green;
 	}
-	.x:not(.unused.svelte-xyz) {
-		color: red; /* TODO would be nice to prune this one day */
-	}
-	/* (unused) :global(.x) :not(.unused) {
+	/* (unused) :global(.x) :not(p) {
 		color: red;
 	}*/
+	.x:not(p.svelte-xyz) {
+		color: red; /* TODO would be nice to prune this one day */
+	}
+	.x .svelte-xyz:not(.unused:where(.svelte-xyz)) {
+		color: green;
+	}

packages/svelte/tests/css/samples/not-selector-global/input.svelte

@@ -11,10 +11,13 @@
 	:global(.x):not(.foo) {
 		color: green;
 	}
-	:global(.x):not(.unused) {
+	:global(.x) :not(p) {
+		color: red;
+	}
+	:global(.x):not(p) {
 		color: red; /* TODO would be nice to prune this one day */
 	}
 	:global(.x) :not(.unused) {
-		color: red;
+		color: green;
 	}
 </style>

packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	warnings: []
+});

packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.css

@@ -0,0 +1,4 @@
+
+	.svelte-xyz:not(.bar:where(.svelte-xyz)) {
+		color: green;
+	}

packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/expected.html

@@ -0,0 +1 @@
+<p class="foo svelte-xyz">foo</p> <p class="bar">bar</p>

packages/svelte/tests/css/samples/not-selector-hash-on-right-elements/input.svelte

@@ -0,0 +1,8 @@
+<p class="foo">foo</p>
+<p class="bar">bar</p>
+
+<style>
+	:not(.bar) {
+		color: green;
+	}
+</style>

packages/svelte/tests/css/samples/not-selector/_config.js

@@ -4,44 +4,44 @@ export default test({
 	warnings: [
 		{
 			code: 'css_unused_selector',
-			message: 'Unused CSS selector ":not(.unused)"',
+			message: 'Unused CSS selector ":not(p)"',
 			start: {
-				line: 8,
+				line: 11,
 				column: 1,
-				character: 89
+				character: 125
 			},
 			end: {
-				line: 8,
-				column: 14,
-				character: 102
+				line: 11,
+				column: 8,
+				character: 132
 			}
 		},
 		{
 			code: 'css_unused_selector',
-			message: 'Unused CSS selector ":not(.foo):not(.unused)"',
+			message: 'Unused CSS selector "p :not(.foo)"',
 			start: {
-				line: 12,
+				line: 22,
 				column: 1,
-				character: 124
+				character: 235
 			},
 			end: {
-				line: 12,
-				column: 24,
-				character: 147
+				line: 22,
+				column: 13,
+				character: 247
 			}
 		},
 		{
 			code: 'css_unused_selector',
-			message: 'Unused CSS selector "p :not(.foo)"',
+			message: 'Unused CSS selector "p :not(.unused)"',
 			start: {
-				line: 19,
+				line: 25,
 				column: 1,
-				character: 203
+				character: 268
 			},
 			end: {
-				line: 19,
-				column: 13,
-				character: 215
+				line: 25,
+				column: 16,
+				character: 283
 			}
 		}
 	]

packages/svelte/tests/css/samples/not-selector/expected.css

@@ -2,17 +2,23 @@
 	.svelte-xyz:not(.foo:where(.svelte-xyz)) {
 		color: green;
 	}
-	/* (unused) :not(.unused) {
+	.svelte-xyz:not(.unused:where(.svelte-xyz)) {
+		color: green;
+	}
+	/* (unused) :not(p) {
 		color: red;
 	}*/
 
-	/* (unused) :not(.foo):not(.unused) {
-		color: red;
-	}*/
+	.svelte-xyz:not(.foo:where(.svelte-xyz)):not(.unused:where(.svelte-xyz)) {
+		color: green;
+	}
 
 	p.svelte-xyz:not(.foo:where(.svelte-xyz)) {
 		color: green;
 	}
 	/* (unused) p :not(.foo) {
 		color: red;
 	}*/
+	/* (unused) p :not(.unused) {
+		color: red;
+	}*/

packages/svelte/tests/css/samples/not-selector/input.svelte

@@ -6,11 +6,14 @@
 		color: green;
 	}
 	:not(.unused) {
+		color: green;
+	}
+	:not(p) {
 		color: red;
 	}
 
 	:not(.foo):not(.unused) {
-		color: red;
+		color: green;
 	}
 
 	p:not(.foo) {
@@ -19,4 +22,7 @@
 	p :not(.foo) {
 		color: red;
 	}
+	p :not(.unused) {
+		color: red;
+	}
 </style>