chore: use zimmerframe for CSS analysis/transformation (#10482)

* fix type

* parse selectors properly the first time

* partial fix

* fix

* start moving CSS validation into analysis phase

* finish moving validation

* fix tests

* regenerate types

* start porting scoping logic etc

* move Style to Css.StyleSheet

* some encouraging progress

* more progress

* more progress

* fix a bunch of cases

* more fixes

* tweak

* almost there

* keyframes

* fix

* all CSS tests passing

* legacy stuff

* all tests passing

* delete old code

* regenerate types

* defer analysis, address TODO

* unused

* tidy up

* rename stuff

* read selectors before combinators

---------

Co-authored-by: Rich Harris <[email protected]>

Author: Rich-Harris

packages/svelte/src/compiler/css/Stylesheet.js

@@ -102,14 +102,7 @@ export function convert(source, ast) {
 					},
 					instance,
 					module,
-					css: ast.css
-						? walk(ast.css, null, {
-								_(node) {
-									// @ts-ignore
-									delete node.parent;
-								}
-							})
-						: undefined
+					css: ast.css ? visit(ast.css) : undefined
 				};
 			},
 			AnimateDirective(node) {
@@ -192,6 +185,24 @@ export function convert(source, ast) {
 			ClassDirective(node) {
 				return { ...node, type: 'Class' };
 			},
+			ComplexSelector(node, { visit }) {
+				const children = [];
+
+				for (const child of node.children) {
+					if (child.combinator) {
+						children.push(child.combinator);
+					}
+
+					children.push(...child.selectors);
+				}
+
+				return {
+					type: 'Selector',
+					start: node.start,
+					end: node.end,
+					children
+				};
+			},
 			Component(node, { visit }) {
 				return {
 					type: 'InlineComponent',
@@ -389,6 +400,13 @@ export function convert(source, ast) {
 			SpreadAttribute(node) {
 				return { ...node, type: 'Spread' };
 			},
+			StyleSheet(node, context) {
+				return {
+					...node,
+					...context.next(),
+					type: 'Style'
+				};
+			},
 			SvelteBody(node, { visit }) {
 				return {
 					type: 'Body',

packages/svelte/src/compiler/legacy.js

@@ -18,7 +18,7 @@ const REGEX_HTML_COMMENT_CLOSE = /-->/;
  * @param {import('../index.js').Parser} parser
  * @param {number} start
  * @param {Array<import('#compiler').Attribute | import('#compiler').SpreadAttribute | import('#compiler').Directive>} attributes
- * @returns {import('#compiler').Style}
+ * @returns {import('#compiler').Css.StyleSheet}
  */
 export default function read_style(parser, start, attributes) {
 	const content_start = parser.index;
@@ -28,7 +28,7 @@ export default function read_style(parser, start, attributes) {
 	parser.read(/^<\/style\s*>/);
 
 	return {
-		type: 'Style',
+		type: 'StyleSheet',
 		start,
 		end: parser.index,
 		attributes,
@@ -37,8 +37,7 @@ export default function read_style(parser, start, attributes) {
 			start: content_start,
 			end: content_end,
 			styles: parser.template.slice(content_start, content_end)
-		},
-		parent: null
+		}
 	};
 }
 
@@ -187,42 +186,66 @@ function read_selector_list(parser, inside_pseudo_class = false) {
 function read_selector(parser, inside_pseudo_class = false) {
 	const list_start = parser.index;
 
-	/** @type {Array<import('#compiler').Css.SimpleSelector | import('#compiler').Css.Combinator>} */
+	/** @type {import('#compiler').Css.RelativeSelector[]} */
 	const children = [];
 
+	/**
+	 * @param {import('#compiler').Css.Combinator | null} combinator
+	 * @param {number} start
+	 * @returns {import('#compiler').Css.RelativeSelector}
+	 */
+	function create_selector(combinator, start) {
+		return {
+			type: 'RelativeSelector',
+			combinator,
+			selectors: [],
+			start,
+			end: -1,
+			metadata: {
+				is_global: false,
+				is_host: false,
+				is_root: false,
+				scoped: false
+			}
+		};
+	}
+
+	/** @type {import('#compiler').Css.RelativeSelector} */
+	let relative_selector = create_selector(null, parser.index);
+
 	while (parser.index < parser.template.length) {
-		const start = parser.index;
+		let start = parser.index;
 
 		if (parser.eat('*')) {
 			let name = '*';
-			if (parser.match('|')) {
+
+			if (parser.eat('|')) {
 				// * is the namespace (which we ignore)
-				parser.index++;
 				name = read_identifier(parser);
 			}
 
-			children.push({
+			relative_selector.selectors.push({
 				type: 'TypeSelector',
 				name,
 				start,
 				end: parser.index
 			});
 		} else if (parser.eat('#')) {
-			children.push({
+			relative_selector.selectors.push({
 				type: 'IdSelector',
 				name: read_identifier(parser),
 				start,
 				end: parser.index
 			});
 		} else if (parser.eat('.')) {
-			children.push({
+			relative_selector.selectors.push({
 				type: 'ClassSelector',
 				name: read_identifier(parser),
 				start,
 				end: parser.index
 			});
 		} else if (parser.eat('::')) {
-			children.push({
+			relative_selector.selectors.push({
 				type: 'PseudoElementSelector',
 				name: read_identifier(parser),
 				start,
@@ -247,7 +270,7 @@ function read_selector(parser, inside_pseudo_class = false) {
 				error(parser.index, 'invalid-css-global-selector');
 			}
 
-			children.push({
+			relative_selector.selectors.push({
 				type: 'PseudoClassSelector',
 				name,
 				args,
@@ -276,7 +299,7 @@ function read_selector(parser, inside_pseudo_class = false) {
 			parser.allow_whitespace();
 			parser.eat(']', true);
 
-			children.push({
+			relative_selector.selectors.push({
 				type: 'AttributeSelector',
 				start,
 				end: parser.index,
@@ -288,37 +311,28 @@ function read_selector(parser, inside_pseudo_class = false) {
 		} else if (inside_pseudo_class && parser.match_regex(REGEX_NTH_OF)) {
 			// nth of matcher must come before combinator matcher to prevent collision else the '+' in '+2n-1' would be parsed as a combinator
 
-			children.push({
+			relative_selector.selectors.push({
 				type: 'Nth',
 				value: /**@type {string} */ (parser.read(REGEX_NTH_OF)),
 				start,
 				end: parser.index
 			});
-		} else if (parser.match_regex(REGEX_COMBINATOR_WHITESPACE)) {
-			parser.allow_whitespace();
-			const start = parser.index;
-			children.push({
-				type: 'Combinator',
-				name: /** @type {string} */ (parser.read(REGEX_COMBINATOR)),
-				start,
-				end: parser.index
-			});
-			parser.allow_whitespace();
 		} else if (parser.match_regex(REGEX_PERCENTAGE)) {
-			children.push({
+			relative_selector.selectors.push({
 				type: 'Percentage',
 				value: /** @type {string} */ (parser.read(REGEX_PERCENTAGE)),
 				start,
 				end: parser.index
 			});
-		} else {
+		} else if (!parser.match_regex(REGEX_COMBINATOR)) {
 			let name = read_identifier(parser);
-			if (parser.match('|')) {
+
+			if (parser.eat('|')) {
 				// we ignore the namespace when trying to find matching element classes
-				parser.index++;
 				name = read_identifier(parser);
 			}
-			children.push({
+
+			relative_selector.selectors.push({
 				type: 'TypeSelector',
 				name,
 				start,
@@ -330,29 +344,85 @@ function read_selector(parser, inside_pseudo_class = false) {
 		parser.allow_whitespace();
 
 		if (parser.match(',') || (inside_pseudo_class ? parser.match(')') : parser.match('{'))) {
+			// rewind, so we know whether to continue building the selector list
 			parser.index = index;
 
+			relative_selector.end = index;
+			children.push(relative_selector);
+
 			return {
-				type: 'Selector',
+				type: 'ComplexSelector',
 				start: list_start,
 				end: index,
-				children
+				children,
+				metadata: {
+					used: false
+				}
 			};
 		}
 
-		if (parser.index !== index && !parser.match_regex(REGEX_COMBINATOR)) {
-			children.push({
-				type: 'Combinator',
-				name: ' ',
-				start: index,
-				end: parser.index
-			});
+		parser.index = index;
+		const combinator = read_combinator(parser);
+
+		if (combinator) {
+			if (relative_selector.selectors.length === 0) {
+				if (!inside_pseudo_class) {
+					error(start, 'invalid-css-selector');
+				}
+			} else {
+				relative_selector.end = index;
+				children.push(relative_selector);
+			}
+
+			// ...and start a new one
+			relative_selector = create_selector(combinator, combinator.start);
+
+			parser.allow_whitespace();
+
+			if (parser.match(',') || (inside_pseudo_class ? parser.match(')') : parser.match('{'))) {
+				error(parser.index, 'invalid-css-selector');
+			}
 		}
 	}
 
 	error(parser.template.length, 'unexpected-eof');
 }
 
+/**
+ * @param {import('../index.js').Parser} parser
+ * @returns {import('#compiler').Css.Combinator | null}
+ */
+function read_combinator(parser) {
+	const start = parser.index;
+	parser.allow_whitespace();
+
+	const index = parser.index;
+	const name = parser.read(REGEX_COMBINATOR);
+
+	if (name) {
+		const end = parser.index;
+		parser.allow_whitespace();
+
+		return {
+			type: 'Combinator',
+			name,
+			start: index,
+			end
+		};
+	}
+
+	if (parser.index !== start) {
+		return {
+			type: 'Combinator',
+			name: ' ',
+			start,
+			end: parser.index
+		};
+	}
+
+	return null;
+}
+
 /**
  * @param {import('../index.js').Parser} parser
  * @returns {import('#compiler').Css.Block}