defer analysis, address TODO

Author: Rich-Harris

packages/svelte/src/compiler/phases/1-parse/read/style.js

@@ -213,34 +213,6 @@ function read_selector(parser, inside_pseudo_class = false) {
 	/** @type {import('#compiler').Css.RelativeSelector} */
 	let relative_selector = create_selector(null, parser.index);
 
-	/**
-	 *
-	 * @param {import('#compiler').Css.RelativeSelector} node
-	 * @param {number} end
-	 */
-	const flush = (node, end) => {
-		node.metadata.is_global =
-			node.selectors.length >= 1 &&
-			node.selectors[0].type === 'PseudoClassSelector' &&
-			node.selectors[0].name === 'global' &&
-			node.selectors.every(
-				(selector) =>
-					selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
-			);
-
-		if (node.selectors.length === 1) {
-			const first = node.selectors[0];
-			node.metadata.is_host = first.type === 'PseudoClassSelector' && first.name === 'host';
-		}
-
-		node.metadata.is_root = !!node.selectors.find(
-			(child) => child.type === 'PseudoClassSelector' && child.name === 'root'
-		);
-
-		relative_selector.end = end;
-		children.push(relative_selector);
-	};
-
 	while (parser.index < parser.template.length) {
 		let start = parser.index;
 
@@ -252,7 +224,8 @@ function read_selector(parser, inside_pseudo_class = false) {
 					error(start, 'invalid-css-selector');
 				}
 			} else {
-				flush(relative_selector, start);
+				relative_selector.end = start;
+				children.push(relative_selector);
 			}
 
 			// ...and start a new one
@@ -398,17 +371,16 @@ function read_selector(parser, inside_pseudo_class = false) {
 			// rewind, so we know whether to continue building the selector list
 			parser.index = index;
 
-			flush(relative_selector, index);
+			relative_selector.end = index;
+			children.push(relative_selector);
 
 			return {
 				type: 'ComplexSelector',
 				start: list_start,
 				end: index,
 				children,
 				metadata: {
-					used: children.every(
-						({ metadata }) => metadata.is_global || metadata.is_host || metadata.is_root
-					)
+					used: false
 				}
 			};
 		}

packages/svelte/src/compiler/phases/2-analyze/validation/css.js renamed to packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js

@@ -1,5 +1,13 @@
 import { error } from '../../../errors.js';
 import { is_keyframes_node } from '../../css.js';
+import { merge } from '../../visitors.js';
+
+/**
+ * @typedef {import('zimmerframe').Visitors<
+ *   import('#compiler').Css.Node,
+ *   NonNullable<import('../../types.js').ComponentAnalysis['css']>
+ * >} Visitors
+ */
 
 /** @param {import('#compiler').Css.RelativeSelector} relative_selector */
 function is_global(relative_selector) {
@@ -15,21 +23,47 @@ function is_global(relative_selector) {
 	);
 }
 
-// TODO rename, this isn't just validation any more
-/**
- * @type {import('zimmerframe').Visitors<
- *   import('#compiler').Css.Node,
- *   NonNullable<import('../../types.js').ComponentAnalysis['css']>
- * >}
- */
-export const validation_css = {
+/** @type {Visitors} */
+const analysis = {
 	Atrule(node, context) {
 		if (is_keyframes_node(node)) {
 			if (!node.prelude.startsWith('-global-')) {
 				context.state.keyframes.push(node.prelude);
 			}
 		}
 	},
+	ComplexSelector(node, context) {
+		context.next(); // analyse relevant selectors first
+
+		node.metadata.used = node.children.every(
+			({ metadata }) => metadata.is_global || metadata.is_host || metadata.is_root
+		);
+	},
+	RelativeSelector(node, context) {
+		node.metadata.is_global =
+			node.selectors.length >= 1 &&
+			node.selectors[0].type === 'PseudoClassSelector' &&
+			node.selectors[0].name === 'global' &&
+			node.selectors.every(
+				(selector) =>
+					selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
+			);
+
+		if (node.selectors.length === 1) {
+			const first = node.selectors[0];
+			node.metadata.is_host = first.type === 'PseudoClassSelector' && first.name === 'host';
+		}
+
+		node.metadata.is_root = !!node.selectors.find(
+			(child) => child.type === 'PseudoClassSelector' && child.name === 'root'
+		);
+
+		context.next();
+	}
+};
+
+/** @type {Visitors} */
+const validation = {
 	ComplexSelector(node, context) {
 		// ensure `:global(...)` is not used in the middle of a selector
 		{
@@ -86,3 +120,5 @@ export const validation_css = {
 		}
 	}
 };
+
+export const css_visitors = merge(analysis, validation);

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

@@ -20,8 +20,8 @@ import { regex_starts_with_newline } from '../patterns.js';
 import { create_attribute, is_element_node } from '../nodes.js';
 import { DelegatedEvents, namespace_svg } from '../../../constants.js';
 import { should_proxy_or_freeze } from '../3-transform/client/utils.js';
-import { validation_css } from './validation/css.js';
-import { prune } from './css/index.js';
+import { css_visitors } from './css/css-analyze.js';
+import { prune } from './css/css-prune.js';
 import { hash } from './utils.js';
 
 /**
@@ -461,7 +461,7 @@ export function analyze_component(root, options) {
 
 	if (analysis.css.ast) {
 		// validate
-		walk(analysis.css.ast, analysis.css, validation_css);
+		walk(analysis.css.ast, analysis.css, css_visitors);
 
 		// mark nodes as scoped/unused/empty etc
 		for (const element of analysis.elements) {