migrate_css() — svelte Function Reference

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

Function javascript Compiler Transformer calls 1 called by 1

Entity Profile

Compiler→ Transformer→ migrate_css() — svelte Function Reference

Dependency Diagram

graph TD
  505bbcf7_7b25_33d0_b8fd_9e3920004c1c["migrate_css()"]
  cab41022_1b55_3b7a_06c6_b90763bbea47["index.js"]
  505bbcf7_7b25_33d0_b8fd_9e3920004c1c -->|defined in| cab41022_1b55_3b7a_06c6_b90763bbea47
  ffed8565_a534_8183_a11f_bcffae15897e["migrate()"]
  ffed8565_a534_8183_a11f_bcffae15897e -->|calls| 505bbcf7_7b25_33d0_b8fd_9e3920004c1c
  60658d4d_2add_6c45_03d7_e01f46a9bba9["find_closing_parenthesis()"]
  505bbcf7_7b25_33d0_b8fd_9e3920004c1c -->|calls| 60658d4d_2add_6c45_03d7_e01f46a9bba9
  style 505bbcf7_7b25_33d0_b8fd_9e3920004c1c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/compiler/migrate/index.js lines 41–96

function migrate_css(state) {
	if (!state.analysis.css.ast?.start) return;
	const css_contents = state.str
		.snip(state.analysis.css.ast.start, /** @type {number} */ (state.analysis.css.ast?.end))
		.toString();
	let code = css_contents;
	let starting = 0;

	// since we already blank css we can't work directly on `state.str` so we will create a copy that we can update
	const str = new MagicString(code);
	while (code) {
		if (
			code.startsWith(':has') ||
			code.startsWith(':is') ||
			code.startsWith(':where') ||
			code.startsWith(':not')
		) {
			let start = code.indexOf('(') + 1;
			let is_global = false;

			const global_str = ':global';
			const next_global = code.indexOf(global_str);
			const str_between = code.substring(start, next_global);
			if (!str_between.trim()) {
				is_global = true;
				start += global_str.length;
			} else {
				const prev_global = css_contents.lastIndexOf(global_str, starting);
				if (prev_global > -1) {
					const end =
						find_closing_parenthesis(css_contents.indexOf('(', prev_global) + 1, css_contents) -
						starting;
					if (end > start) {
						starting += end;
						code = code.substring(end);
						continue;
					}
				}
			}

			const end = find_closing_parenthesis(start, code);
			if (start && end) {
				if (!is_global && !code.startsWith(':not')) {
					str.prependLeft(starting + start, ':global(');
					str.appendRight(starting + end - 1, ')');
				}
				starting += end - 1;
				code = code.substring(end - 1);
				continue;
			}
		}
		starting++;
		code = code.substring(1);
	}
	state.str.update(state.analysis.css.ast?.start, state.analysis.css.ast?.end, str.toString());
}