feat: CSS Nesting implementation

.changeset/small-kids-switch.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: CSS nesting support

CONTRIBUTING.md

@@ -100,7 +100,7 @@ Test samples are kept in `/test/xxx/samples` folder.
 > PREREQUISITE: Install chromium via playwright by running `pnpm playwright install chromium`
 
 1. To run test, run `pnpm test`.
-1. To run test for a specific feature, you can use the `-g` (aka `--grep`) option. For example, to only run test involving transitions, run `pnpm test -- -g transition`.
+1. To run test for a specific feature, you can use the `-t` (aka `--testNamePattern `) option. For example, to only run test involving transitions, run `pnpm test -- -t transistion`.
 
 ##### Running solo test
 

packages/svelte/src/compiler/phases/1-parse/index.js

@@ -129,7 +129,7 @@ export class Parser {
 	 * @param {string} str
 	 * @param {boolean} [required]
 	 */
-	eat(str, required) {
+	eat(str, required = false) {
 		if (this.match(str)) {
 			this.index += str.length;
 			return true;

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

@@ -10,6 +10,7 @@ const REGEX_PERCENTAGE = /^\d+(\.\d+)?%/;
 const REGEX_WHITESPACE_OR_COLON = /[\s:]/;
 const REGEX_BRACE_OR_SEMICOLON = /[{;]/;
 const REGEX_LEADING_HYPHEN_OR_DIGIT = /-?\d/;
+const REGEX_SEMICOLON_OR_OPEN_BRACE_OR_CLOSE_BRACE = /[;{}]/;
 const REGEX_VALID_IDENTIFIER_CHAR = /[a-zA-Z0-9_-]/;
 const REGEX_COMMENT_CLOSE = /\*\//;
 const REGEX_HTML_COMMENT_CLOSE = /-->/;
@@ -83,37 +84,11 @@ function read_at_rule(parser) {
 	/** @type {import('#compiler').Css.Block | null} */
 	let block = null;
 
+	// eg: `@media (max-width: 600px) { ... }`
 	if (parser.match('{')) {
-		// if the parser could easily distinguish between rules and declarations, this wouldn't be necessary.
-		// but this approach is much simpler. in future, when we support CSS nesting, the parser _will_ need
-		// to be able to distinguish between them, but since we'll also need other changes to support that
-		// this remains a TODO
-		const contains_declarations = [
-			'color-profile',
-			'counter-style',
-			'font-face',
-			'font-palette-values',
-			'page',
-			'property'
-		].includes(name);
-
-		if (contains_declarations) {
-			block = read_block(parser);
-		} else {
-			const start = parser.index;
-
-			parser.eat('{', true);
-			const children = read_body(parser, '}');
-			parser.eat('}', true);
-
-			block = {
-				type: 'Block',
-				start,
-				end: parser.index,
-				children
-			};
-		}
+		block = read_block(parser);
 	} else {
+		// eg: `@import 'foo';`
 		parser.eat(';', true);
 	}
 
@@ -183,13 +158,20 @@ function read_selector_list(parser) {
 function read_selector(parser) {
 	const list_start = parser.index;
 
-	/** @type {Array<import('#compiler').Css.SimpleSelector | import('#compiler').Css.Combinator>} */
+	/** @type {Array<import('#compiler').Css.SimpleSelector | import('#compiler').Css.Combinator | import('#compiler').Css.NestingSelector>} */
 	const children = [];
 
 	while (parser.index < parser.template.length) {
 		const start = parser.index;
 
-		if (parser.eat('*')) {
+		if (parser.eat('&')){
+			children.push({
+				type: 'NestedSelector',
+				name: '&',
+				start,
+				end: parser.index
+			});
+		} else if (parser.eat('*')) {
 			children.push({
 				type: 'TypeSelector',
 				name: '*',
@@ -328,7 +310,7 @@ function read_block(parser) {
 
 	parser.eat('{', true);
 
-	/** @type {Array<import('#compiler').Css.Declaration | import('#compiler').Css.Rule>} */
+	/** @type {Array<import('#compiler').Css.Declaration | import('#compiler').Css.Rule | import('#compiler').Css.Atrule>} */
 	const children = [];
 
 	while (parser.index < parser.template.length) {
@@ -337,7 +319,7 @@ function read_block(parser) {
 		if (parser.match('}')) {
 			break;
 		} else {
-			children.push(read_declaration(parser));
+			children.push(read_block_item(parser));
 		}
 	}
 
@@ -380,6 +362,32 @@ function read_declaration(parser) {
 	};
 }
 
+/**
+ * Reads a declaration, rule or at-rule
+ *
+ * @param {import('../index.js').Parser} parser
+ * @returns {import('#compiler').Css.Declaration | import('#compiler').Css.Rule | import('#compiler').Css.Atrule}
+ */
+function read_block_item(parser) {
+	if (parser.match('@')) {
+		return read_at_rule(parser);
+	}
+
+	const start = parser.index;
+	parser.read_until(REGEX_SEMICOLON_OR_OPEN_BRACE_OR_CLOSE_BRACE);
+
+	// if we've run into a '{', it's a rule, otherwise we ran into
+	// a ';' or '}' so it's a declaration
+	if (parser.match('{')) {
+		// Rewind to the start of the rule
+		parser.index = start;
+		return read_rule(parser);
+	}
+	// Rewind to the start of the declaration
+	parser.index = start;
+	return read_declaration(parser);
+}
+
 /**
  * @param {import('../index.js').Parser} parser
  * @returns {string}

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

@@ -100,7 +100,7 @@ export default class Selector {
 			while (i--) {
 				const selector = block.selectors[i];
 				if (selector.type === 'PseudoElementSelector' || selector.type === 'PseudoClassSelector') {
-					if (selector.name !== 'root' && selector.name !== 'host') {
+					if (!block.root && !block.host && !block.nested) {
 						if (i === 0) code.prependRight(selector.start, attr);
 					}
 					continue;
@@ -117,13 +117,14 @@ export default class Selector {
 			if (block.global) {
 				remove_global_pseudo_class(block.selectors[0]);
 			}
-			if (block.should_encapsulate)
+			if (block.should_encapsulate) {
 				encapsulate_block(
 					block,
-					index === this.blocks.length - 1
+					index === this.blocks.length - 1 + (block.nested ? 1 : 0)
 						? attr.repeat(amount_class_specificity_to_increase + 1)
 						: attr
 				);
+			}
 		});
 	}
 
@@ -171,7 +172,7 @@ export default class Selector {
 	validate_invalid_combinator_without_selector(analysis) {
 		for (let i = 0; i < this.blocks.length; i++) {
 			const block = this.blocks[i];
-			if (block.selectors.length === 0) {
+			if (block.selectors.length === 0 && !block.nested) {
 				error(this.node, 'invalid-css-selector');
 			}
 		}
@@ -320,6 +321,16 @@ function block_might_apply_to_node(block, node) {
 			return NO_MATCH;
 		}
 
+		if (
+			block.nested &&
+			block.selectors.length === 1 &&
+			block.combinator !== null
+		) {
+			// nested selector with combinator, eg: `.foo { + .bar { ... } }`
+			// TODO: How to handle this?
+			return UNKNOWN_SELECTOR;
+		}
+
 		if (selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector') {
 			continue;
 		}
@@ -797,6 +808,7 @@ class Block {
 		this.combinator = combinator;
 		this.host = false;
 		this.root = false;
+		this.nested = false;
 		this.selectors = [];
 		this.start = -1;
 		this.end = -1;
@@ -826,18 +838,31 @@ class Block {
 	}
 }
 
-/** @param {import('#compiler').Css.Selector} selector */
+/**
+ * Groups selectors by combinator into blocks
+ * @param {import('#compiler').Css.Selector} selector
+ */
 function group_selectors(selector) {
 	let block = new Block(null);
 	const blocks = [block];
 
-	selector.children.forEach((child) => {
+	for (const child of selector.children) {
 		if (child.type === 'Combinator') {
-			block = new Block(child);
-			blocks.push(block);
+			// If we start with a combinator, that means
+			// we're dealing with a nested selector
+			if(block.selectors.length === 0 && !block.combinator) {
+				block.nested = true;
+				block.combinator = child;
+			} else {
+				block = new Block(child);
+				blocks.push(block);
+			}
+		} else if (child.type === "NestedSelector") {
+			block.nested = true;
 		} else {
 			block.add(child);
 		}
-	});
+	}
+
 	return blocks;
 }

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

@@ -58,30 +58,40 @@ class Rule {
 	/** @type {import('#compiler').Css.Rule} */
 	node;
 
-	/** @type {Atrule | undefined} */
+	/** @type {Atrule | Rule | undefined} */
 	parent;
 
+	/** @type {Rule[]} */
+	nested_rules;
+
 	/**
 	 * @param {import('#compiler').Css.Rule} node
-	 * @param {any} stylesheet
-	 * @param {Atrule | undefined} parent
+	 * @param {Stylesheet} stylesheet
+	 * @param {Atrule | Rule | undefined} parent
 	 */
 	constructor(node, stylesheet, parent) {
 		this.node = node;
 		this.parent = parent;
 		this.selectors = node.prelude.children.map((node) => new Selector(node, stylesheet));
 
-		this.declarations = /** @type {import('#compiler').Css.Declaration[]} */ (
-			node.block.children
-		).map((node) => new Declaration(node));
+		this.nested_rules = node.block.children
+			.filter((node) => node.type === 'Rule')
+			.map(node => new Rule(/** @type {import('#compiler').Css.Rule}*/ (node), stylesheet, this));
+		this.declarations = node.block.children
+			.filter((node) => node.type === 'Declaration')
+			.map((node) => new Declaration(/** @type {import('#compiler').Css.Declaration} */ (node)));
 	}
 
 	/** @param {import('#compiler').RegularElement | import('#compiler').SvelteElement} node */
 	apply(node) {
 		this.selectors.forEach((selector) => selector.apply(node)); // TODO move the logic in here?
+		this.nested_rules.forEach((rule) => rule.apply(node));
 	}
 
-	/** @param {boolean} dev */
+	/**
+	 * @param {boolean} dev
+	 * @returns {boolean}
+	 */
 	is_used(dev) {
 		if (this.parent && this.parent.node.type === 'Atrule' && is_keyframes_node(this.parent.node))
 			return true;
@@ -90,7 +100,7 @@ class Rule {
 		// see them in devtools
 		if (this.declarations.length === 0) return dev;
 
-		return this.selectors.some((s) => s.used);
+		return [this.selectors.some((s) => s.used), this.nested_rules.some(r => r.is_used(dev))].some(Boolean);
 	}
 
 	/**
@@ -109,27 +119,35 @@ class Rule {
 			selector.transform(code, attr, max_amount_class_specificity_increased)
 		);
 		this.declarations.forEach((declaration) => declaration.transform(code, keyframes));
+		this.nested_rules.forEach((rule) => rule.transform(code, id, keyframes, max_amount_class_specificity_increased));
 	}
 
 	/** @param {import('../../types.js').ComponentAnalysis} analysis */
 	validate(analysis) {
 		this.selectors.forEach((selector) => {
 			selector.validate(analysis);
 		});
+		this.nested_rules.forEach((rule) => {
+			rule.validate(analysis);
+		});
 	}
 
 	/** @param {(selector: import('./Selector.js').default) => void} handler */
 	warn_on_unused_selector(handler) {
 		this.selectors.forEach((selector) => {
 			if (!selector.used) handler(selector);
 		});
+		this.nested_rules.forEach((rule) => {
+			rule.warn_on_unused_selector(handler);
+		});
 	}
 
 	/** @returns number */
 	get_max_amount_class_specificity_increased() {
 		return Math.max(
 			...this.selectors.map((selector) => selector.get_amount_class_specificity_increased())
 		);
+		// do we need to check nested rules?
 	}
 
 	/**
@@ -143,7 +161,7 @@ class Rule {
 
 		// keep empty rules in dev, because it's convenient to
 		// see them in devtools
-		if (this.declarations.length === 0) {
+		if (this.declarations.length === 0 && this.nested_rules.length === 0) {
 			if (!dev) {
 				code.prependRight(this.node.start, '/* (empty) ');
 				code.appendLeft(this.node.end, '*/');
@@ -194,6 +212,10 @@ class Rule {
 				code.appendLeft(last, '*/');
 			}
 		}
+
+		this.nested_rules.forEach((rule) => {
+			rule.prune(code, dev);
+		});
 	}
 }
 
@@ -381,11 +403,12 @@ export default class Stylesheet {
 			css: ast.content.styles,
 			hash
 		});
+
 		this.has_styles = true;
 
 		const state = {
 			/** @type {Atrule | undefined} */
-			atrule: undefined
+			atrule: undefined,
 		};
 
 		walk(/** @type {import('#compiler').Css.Node} */ (ast), state, {
@@ -424,12 +447,17 @@ export default class Stylesheet {
 			},
 			Rule: (node, context) => {
 				const rule = new Rule(node, this, context.state.atrule);
+
 				if (context.state.atrule) {
 					context.state.atrule.children.push(rule);
 				} else {
 					this.children.push(rule);
 				}
 
+				if (rule.nested_rules.length > 0) {
+					// Skip nested rules as they are instantiated in the Rule constructor
+					return node
+				}
 				context.next();
 			}
 		});