css_visitors.Rule() — svelte Function Reference

Source Code

packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js lines 197–286

	Rule(node, context) {
		node.metadata.parent_rule = context.state.rule;

		// We gotta allow :global x, :global y because CSS preprocessors might generate that from :global { x, y {...} }
		for (const complex_selector of node.prelude.children) {
			let is_global_block = false;

			for (let selector_idx = 0; selector_idx < complex_selector.children.length; selector_idx++) {
				const child = complex_selector.children[selector_idx];
				const idx = child.selectors.findIndex(is_global_block_selector);

				if (is_global_block) {
					// All selectors after :global are unscoped
					child.metadata.is_global_like = true;
				}

				if (idx === 0) {
					if (
						child.selectors.length > 1 &&
						selector_idx === 0 &&
						node.metadata.parent_rule === null
					) {
						e.css_global_block_invalid_modifier_start(child.selectors[1]);
					} else {
						// `child` starts with `:global`
						node.metadata.is_global_block = is_global_block = true;

						for (let i = 1; i < child.selectors.length; i++) {
							walk(/** @type {AST.CSS.Node} */ (child.selectors[i]), null, {
								ComplexSelector(node) {
									node.metadata.used = true;
								}
							});
						}

						if (child.combinator && child.combinator.name !== ' ') {
							e.css_global_block_invalid_combinator(child, child.combinator.name);
						}

						const declaration = node.block.children.find((child) => child.type === 'Declaration');
						const is_lone_global =
							complex_selector.children.length === 1 &&
							complex_selector.children[0].selectors.length === 1; // just `:global`, not e.g. `:global x`

						if (is_lone_global && node.prelude.children.length > 1) {
							// `:global, :global x { z { ... } }` would become `x { z { ... } }` which means `z` is always
							// constrained by `x`, which is not what the user intended
							e.css_global_block_invalid_list(node.prelude);
						}

						if (
							declaration &&
							// :global { color: red; } is invalid, but foo :global { color: red; } is valid
							node.prelude.children.length === 1 &&
							is_lone_global
						) {
							e.css_global_block_invalid_declaration(declaration);
						}
					}
				} else if (idx !== -1) {
					e.css_global_block_invalid_modifier(child.selectors[idx]);
				}
			}

			if (node.metadata.is_global_block && !is_global_block) {
				e.css_global_block_invalid_list(node.prelude);
			}
		}

		const state = { ...context.state, rule: node };

		// visit selector list first, to populate child selector metadata
		context.visit(node.prelude, state);

		for (const selector of node.prelude.children) {
			node.metadata.has_global_selectors ||= selector.metadata.is_global;
			node.metadata.has_local_selectors ||= !selector.metadata.is_global;
		}

		// if this rule has a ComplexSelector whose RelativeSelector children are all
		// `:global(...)`, and the rule contains declarations (rather than just