visitors.ComplexSelector() — svelte Function Reference

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

Function javascript Compiler Analyzer calls 1

Entity Profile

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

Dependency Diagram

graph TD
  2e4fa17c_b7f9_4202_b8c2_b2e48e6d30d8["visitors.ComplexSelector()"]
  194b07ed_c18e_6587_618d_b4b4d02442e0["index.js"]
  2e4fa17c_b7f9_4202_b8c2_b2e48e6d30d8 -->|defined in| 194b07ed_c18e_6587_618d_b4b4d02442e0
  fc43c5dc_fff8_e84f_ae90_1d56c134148c["remove_global_pseudo_class()"]
  2e4fa17c_b7f9_4202_b8c2_b2e48e6d30d8 -->|calls| fc43c5dc_fff8_e84f_ae90_1d56c134148c
  style 2e4fa17c_b7f9_4202_b8c2_b2e48e6d30d8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/phases/3-transform/css/index.js lines 283–372

	ComplexSelector(node, context) {
		const before_bumped = context.state.specificity.bumped;

		for (const relative_selector of node.children) {
			if (relative_selector.metadata.is_global) {
				const global = /** @type {AST.CSS.PseudoClassSelector} */ (relative_selector.selectors[0]);
				remove_global_pseudo_class(global, relative_selector.combinator, context.state);

				const parent_rule = node.metadata.rule?.metadata.parent_rule;
				if (parent_rule && global.args === null) {
					if (relative_selector.combinator === null) {
						// div { :global.x { ... } } becomes div { &.x { ... } }
						context.state.code.prependRight(global.start, '&');
					}

					// In case of multiple :global selectors in a selector list we gotta delete the comma, too, but only if
					// the next selector is used; if it's unused then the comma deletion happens as part of removal of that next selector
					if (
						parent_rule.prelude.children.length > 1 &&
						node.children.length === node.children.findIndex((s) => s === relative_selector) - 1
					) {
						const next_selector = parent_rule.prelude.children.find((s) => s.start > global.end);
						if (next_selector && next_selector.metadata.used) {
							context.state.code.update(global.end, next_selector.start, '');
						}
					}
				}
				continue;
			} else {
				// for any :global() or :global at the middle of compound selector
				for (const selector of relative_selector.selectors) {
					if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
						remove_global_pseudo_class(selector, null, context.state);
					}
				}
			}

			if (relative_selector.metadata.scoped) {
				if (relative_selector.selectors.length === 1) {
					// skip standalone :is/:where/& selectors
					const selector = relative_selector.selectors[0];
					if (
						selector.type === 'PseudoClassSelector' &&
						(selector.name === 'is' || selector.name === 'where')
					) {
						continue;
					}
				}

				if (relative_selector.selectors.some((s) => s.type === 'NestingSelector')) {
					continue;
				}

				// for the first occurrence, we use a classname selector, so that every
				// encapsulated selector gets a +0-1-0 specificity bump. thereafter,
				// we use a `:where` selector, which does not affect specificity
				let modifier = context.state.selector;
				if (context.state.specificity.bumped) modifier = `:where(${modifier})`;

				context.state.specificity.bumped = true;

				let i = relative_selector.selectors.length;
				while (i--) {
					const selector = relative_selector.selectors[i];

					if (
						selector.type === 'PseudoElementSelector' ||
						selector.type === 'PseudoClassSelector'
					) {
						if (selector.name !== 'root' && selector.name !== 'host') {
							if (i === 0) context.state.code.prependRight(selector.start, modifier);
						}
						continue;
					}

					if (selector.type === 'TypeSelector' && selector.name === '*') {
						context.state.code.update(selector.start, selector.end, modifier);
					} else {
						context.state.code.appendLeft(selector.end, modifier);
					}