visitors.SelectorList() — svelte Function Reference

Architecture documentation for the visitors.SelectorList() function in index.js from the svelte codebase.

Function javascript Compiler Analyzer calls 1

Entity Profile

Compiler→ Analyzer→ visitors.SelectorList() — svelte Function Reference

Dependency Diagram

graph TD
  5c55762e_de71_e3a4_d7a2_61fc8da96f18["visitors.SelectorList()"]
  194b07ed_c18e_6587_618d_b4b4d02442e0["index.js"]
  5c55762e_de71_e3a4_d7a2_61fc8da96f18 -->|defined in| 194b07ed_c18e_6587_618d_b4b4d02442e0
  8e10e0b5_42cd_f5d4_1013_8f80e38b577c["is_in_global_block()"]
  5c55762e_de71_e3a4_d7a2_61fc8da96f18 -->|calls| 8e10e0b5_42cd_f5d4_1013_8f80e38b577c
  style 5c55762e_de71_e3a4_d7a2_61fc8da96f18 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/phases/3-transform/css/index.js lines 198–282

	SelectorList(node, { state, next, path }) {
		const parent = path.at(-1);

		// Only add comments if we're not inside a complex selector that itself is unused or a global block
		if (
			(!is_in_global_block(path) ||
				(node.children.length > 1 && parent?.type === 'Rule' && parent.metadata.is_global_block)) &&
			!path.find((n) => n.type === 'ComplexSelector' && !n.metadata.used)
		) {
			const children = node.children;
			let pruning = false;
			let prune_start = children[0].start;
			let last = prune_start;
			let has_previous_used = false;

			for (let i = 0; i < children.length; i += 1) {
				const selector = children[i];

				if (selector.metadata.used === pruning) {
					if (pruning) {
						let i = selector.start;
						while (state.code.original[i] !== ',') i--;

						if (state.minify) {
							state.code.remove(prune_start, has_previous_used ? i : i + 1);
						} else {
							state.code.appendRight(has_previous_used ? i : i + 1, '*/');
						}
					} else {
						if (i === 0) {
							if (state.minify) {
								prune_start = selector.start;
							} else {
								state.code.prependRight(selector.start, '/* (unused) ');
							}
						} else {
							if (state.minify) {
								prune_start = last;
							} else {
								state.code.overwrite(last, selector.start, ` /* (unused) `);
							}
						}
					}

					pruning = !pruning;
				}

				if (!pruning && selector.metadata.used) {
					has_previous_used = true;
				}

				last = selector.end;
			}

			if (pruning) {
				if (state.minify) {
					state.code.remove(prune_start, last);
				} else {
					state.code.appendLeft(last, '*/');
				}
			}
		}

		// if we're in a `:is(...)` or whatever, keep existing specificity bump state
		let specificity = state.specificity;

		// if this selector list belongs to a rule, require a specificity bump for the
		// first scoped selector but only if we're at the top level
		if (parent?.type === 'Rule') {
			specificity = { bumped: false };

			/** @type {AST.CSS.Rule | null} */
			let rule = parent.metadata.parent_rule;

			while (rule) {
				if (rule.metadata.has_local_selectors) {
					specificity = { bumped: true };
					break;
				}
				rule = rule.metadata.parent_rule;
			}