@staticbolt/core 1.0.0-beta.28 → 1.0.0-beta.29

package/lib/plugins/index.mjs

@@ -22,7 +22,6 @@ import transformDefine from "babel-plugin-transform-define";
 import { availableParallelism } from "node:os";
 import { Worker } from "node:worker_threads";
 import vm from "node:vm";
-import postcssImport from "postcss-import";
 import * as z$1 from "zod/v4";
 import rehypeExternalLinks from "rehype-external-links";
 import rehypeSlug from "rehype-slug";
@@ -698,6 +697,10 @@ function isNodeModulesPath(path, root) {
 		root
 	});
 }
+/** Directory of the package a `node_modules` path belongs to, `undefined` for paths outside `node_modules`. */
+function packageDirectory(path) {
+	return /^(.*?node_modules\/(?:@[^/]+\/)?[^/]+)(?:\/|$)/.exec(path)?.[1];
+}
 /**
 * Returns a stable key for a specifier, ignoring publicName and function refs. Side-effects are keyed by type alone (only one per
 * source).
@@ -772,7 +775,8 @@ function bundlePackagesPlugin(options = {}) {
 		resolveSource(source, filePath) {
 			if (!isValidRelativePath(source)) return;
 			const [link] = splitHtmlLink(source);
-			if (isNodeModulesPath(join(dirname(filePath), link), this.root)) return {
+			const target = join(dirname(filePath), link);
+			if (isNodeModulesPath(target, this.root) && packageDirectory(target) !== packageDirectory(filePath)) return {
 				source,
 				dependencyID: void 0
 			};
@@ -844,7 +848,7 @@ function bundlePackagesPlugin(options = {}) {
 						existingSpecifiers.push({ type: "side-effect" });
 						specifiersByPackage.set(packageName, existingSpecifiers);
 					}
-					const styleLinks = inputMetadata.ast.querySelectorAll("link[rel=\"stylesheet\"]");
+					const styleLinks = inputMetadata.ast.querySelectorAll("link[rel=\"stylesheet\"], link[rel=\"preload\"][as=\"style\"]");
 					for (const styleLink of styleLinks) {
 						const source = styleLink.getAttribute("href");
 						if (!source) continue;
@@ -3831,11 +3835,496 @@ function htmlBundleScriptPlugin(options = {}) {
 	};
 }
 
+//#endregion
+//#region src/ast-utilities/postcss-utils/import-prelude.ts
+const isSpace = (char) => char === " " || char === "	" || char === "\n" || char === "\r" || char === "\f";
+function skipSpace(text, index) {
+	while (index < text.length && isSpace(text[index])) index++;
+	return index;
+}
+function skipSpaceAndComments(text, index) {
+	for (;;) {
+		index = skipSpace(text, index);
+		if (!text.startsWith("/*", index)) return index;
+		const end = text.indexOf("*/", index + 2);
+		if (end === -1) return text.length;
+		index = end + 2;
+	}
+}
+/** Index just past the closing quote of the string starting at `index`, or `-1` when it never closes. */
+function skipString(text, index) {
+	const quote = text[index];
+	for (let current = index + 1; current < text.length; current++) {
+		const char = text[current];
+		if (char === "\\") {
+			current++;
+			continue;
+		}
+		if (char === quote) return current + 1;
+		if (char === "\n") return -1;
+	}
+	return -1;
+}
+/** Index just past the `)` matching the `(` at `index`, or `-1` when it never closes. */
+function skipParens(text, index) {
+	let depth = 0;
+	for (let current = index; current < text.length; current++) {
+		const char = text[current];
+		if (char === "\"" || char === "'") {
+			const end = skipString(text, current);
+			if (end === -1) return -1;
+			current = end - 1;
+			continue;
+		}
+		if (char === "(") depth++;
+		else if (char === ")" && --depth === 0) return current + 1;
+	}
+	return -1;
+}
+const escapeRe = /\\(?:([\da-f]{1,6})\s?|(.))/gi;
+function unescapeCss(value) {
+	if (!value.includes("\\")) return value;
+	return value.replace(escapeRe, (_, hex, char) => hex ? String.fromCodePoint(Number.parseInt(hex, 16)) : char);
+}
+/**
+* Parses the params of an `@import` rule: the URL followed by its `layer`, `supports()` and media conditions.
+*
+* Returns `undefined` when no URL can be found or a condition is given twice.
+*/
+function parseImportPrelude(text) {
+	const tokenStart = skipSpaceAndComments(text, 0);
+	let urlStart;
+	let urlEnd;
+	let tokenEnd;
+	const first = text[tokenStart];
+	if (first === "\"" || first === "'") {
+		tokenEnd = skipString(text, tokenStart);
+		if (tokenEnd === -1) return;
+		urlStart = tokenStart + 1;
+		urlEnd = tokenEnd - 1;
+	} else if (text.slice(tokenStart, tokenStart + 4).toLowerCase() === "url(") {
+		const contentStart = skipSpace(text, tokenStart + 4);
+		const quote = text[contentStart];
+		let close;
+		if (quote === "\"" || quote === "'") {
+			const stringEnd = skipString(text, contentStart);
+			if (stringEnd === -1) return;
+			close = skipSpace(text, stringEnd);
+			if (text[close] !== ")") return;
+			urlStart = contentStart + 1;
+			urlEnd = stringEnd - 1;
+		} else {
+			close = text.indexOf(")", contentStart);
+			if (close === -1) return;
+			urlStart = contentStart;
+			urlEnd = close;
+			while (urlEnd > urlStart && isSpace(text[urlEnd - 1])) urlEnd--;
+		}
+		tokenEnd = close + 1;
+	} else return;
+	const prelude = {
+		url: unescapeCss(text.slice(urlStart, urlEnd)),
+		urlStart,
+		urlEnd,
+		urlToken: text.slice(tokenStart, tokenEnd)
+	};
+	let position = tokenEnd;
+	for (;;) {
+		position = skipSpaceAndComments(text, position);
+		if (position >= text.length) break;
+		const rest = text.slice(position);
+		if (/^layer(?=\(|\s|$)/i.test(rest)) {
+			if (prelude.layer !== void 0) return;
+			if (rest[5] === "(") {
+				const end = skipParens(text, position + 5);
+				if (end === -1) return;
+				prelude.layer = text.slice(position + 6, end - 1).trim();
+				position = end;
+			} else {
+				prelude.layer = "";
+				position += 5;
+			}
+			continue;
+		}
+		if (/^supports\(/i.test(rest)) {
+			if (prelude.supports !== void 0) return;
+			const end = skipParens(text, position + 8);
+			if (end === -1) return;
+			prelude.supports = text.slice(position + 9, end - 1).trim();
+			position = end;
+			continue;
+		}
+		prelude.media = rest.trim();
+		break;
+	}
+	return prelude;
+}
+function hasConditions({ layer, supports, media }) {
+	return layer !== void 0 || supports !== void 0 || media !== void 0;
+}
+/** Prints conditions back the way an `@import` prelude takes them: `layer(name) supports(condition) media`. */
+function formatImportConditions({ layer, supports, media }) {
+	const parts = [];
+	if (layer !== void 0) parts.push(layer ? `layer(${layer})` : "layer");
+	if (supports !== void 0) parts.push(`supports(${supports})`);
+	if (media !== void 0) parts.push(media);
+	return parts.join(" ");
+}
+
+//#endregion
+//#region src/parsers/css-parser.ts
+function parseCssUnsafe(css, options) {
+	return postcss.parse(css, options ?? {});
+}
+/** Parse CSS string and return the root node */
+const parseCss = valueOrError(parseCssUnsafe);
+
+//#endregion
+//#region src/plugins/core-plugins/style-metadata/style-loader.ts
+function styleLoader(relativePath, code) {
+	const absFilePath = join(this.root, relativePath);
+	const [cssRoot, parseError] = parseCss(code, { from: absFilePath });
+	if (parseError) return [null, parseError];
+	return [{
+		type: METADATA_TYPES.CSS,
+		ast: cssRoot,
+		filePath: relativePath,
+		id: relativePath,
+		directDependencies: /* @__PURE__ */ new Set()
+	}, null];
+}
+
+//#endregion
+//#region src/helpers/style-bundler.ts
+const externalUrlRe = /^(?:[a-z][\d+.a-z-]*:|\/\/)/i;
+/**
+* Inlines the `@import` tree of a stylesheet in place, the way a browser would have loaded it:
+*
+* - Imported files come from the build when they are part of it, so what other plugins did to them is kept, and from disk
+*   otherwise. Their `url()` references are rebased onto the bundle's final location.
+* - `layer()`, `supports()` and media conditions wrap the imported rules; nested imports nest their conditions.
+* - A file imported more than once under the same conditions is kept where it was imported last, which is where a browser's cascade
+*   ends up. Cyclic imports are cut.
+* - Imports that cannot be inlined (other origins, `data:`, files that fail to resolve or load) are kept and hoisted to the top
+*   with their conditions folded in, after `@charset` and any `@layer` statements that came before them.
+* - Misplaced imports (after other rules) are reported and left alone, like a browser ignores them.
+*/
+var StyleBundler = class {
+	#app;
+	/** Stylesheets outside the build, loaded from disk once and cloned per use. `undefined` marks a file that failed to load. */
+	#loaded = /* @__PURE__ */ new Map();
+	constructor(app) {
+		this.#app = app;
+	}
+	/**
+	* Bundles `metadata.ast` in place.
+	*
+	* @param bundleAbsolutePath Where the bundle ends up, which imported `url()` references are rebased onto.
+	*/
+	async bundle(metadata, bundleAbsolutePath) {
+		return await new BundleRun(this.#app, this.#loaded, bundleAbsolutePath).bundle(metadata);
+	}
+};
+var BundleRun = class {
+	#app;
+	#loaded;
+	#bundleAbsolutePath;
+	#entries = [];
+	#occurrences = [];
+	#diagnostics = [];
+	#reportedNodes = /* @__PURE__ */ new Set();
+	#charsetParams;
+	#hasKeptImports = false;
+	constructor(app, loaded, bundleAbsolutePath) {
+		this.#app = app;
+		this.#loaded = loaded;
+		this.#bundleAbsolutePath = bundleAbsolutePath;
+	}
+	async bundle(metadata) {
+		const absolutePath = join(this.#app.root, metadata.filePath);
+		const entry = {
+			metadata,
+			absolutePath,
+			chain: [],
+			key: absolutePath,
+			nodes: metadata.ast.nodes.slice()
+		};
+		await this.#visit(entry, /* @__PURE__ */ new Set([absolutePath]));
+		await this.#assemble(entry);
+		return this.#diagnostics;
+	}
+	async #visit(occurrence, ancestors) {
+		const nodes = occurrence.metadata.ast.nodes;
+		const filePath = occurrence.metadata.id;
+		/** Indices of consecutive nodes that stay as they are, flushed as one entry whenever something else comes between them. */
+		let run = [];
+		const flushRun = () => {
+			if (run.length === 0) return;
+			this.#entries.push({
+				kind: "nodes",
+				occurrence,
+				indices: run
+			});
+			run = [];
+		};
+		/** Only comments, `@charset`, `@layer` statements and other imports may come before an `@import`. */
+		let isInPrefix = true;
+		for (const [index, node] of nodes.entries()) {
+			if (node.type === "comment") {
+				run.push(index);
+				continue;
+			}
+			const atRule = node.type === "atrule" ? node : void 0;
+			const name = atRule?.name.toLowerCase();
+			if (atRule && name === "charset") {
+				if (index === 0) {
+					this.#noteCharset(atRule, filePath);
+					this.#entries.push({
+						kind: "charset",
+						occurrence,
+						index
+					});
+				} else this.#warn(atRule, filePath, "@charset must precede all other statements");
+				continue;
+			}
+			if (atRule && name === "layer" && isInPrefix && !atRule.nodes) {
+				if (occurrence.chain.length === 0) {
+					flushRun();
+					this.#entries.push({
+						kind: "layer",
+						occurrence,
+						index
+					});
+				} else run.push(index);
+				continue;
+			}
+			if (!atRule || name !== "import") {
+				isInPrefix = false;
+				run.push(index);
+				continue;
+			}
+			const plan = await this.#planImport(atRule, occurrence, ancestors, isInPrefix);
+			switch (plan.action) {
+				case "leave":
+					run.push(index);
+					break;
+				case "drop": break;
+				case "keep":
+					flushRun();
+					this.#entries.push({
+						kind: "import",
+						occurrence,
+						index,
+						prelude: plan.prelude,
+						chain: plan.chain
+					});
+					this.#hasKeptImports = true;
+					break;
+				case "inline":
+					flushRun();
+					this.#occurrences.push(plan.child);
+					await this.#visit(plan.child, new Set(ancestors).add(plan.child.absolutePath));
+			}
+		}
+		flushRun();
+	}
+	/**
+	* Decides what becomes of an `@import`: inlined, kept as an import (hoisted with its conditions folded in, so the browser
+	* fetches it the way it did before), dropped (a cycle) or left where it is as a regular node (not valid where it stands).
+	*/
+	async #planImport(node, occurrence, ancestors, isInPrefix) {
+		const filePath = occurrence.metadata.id;
+		const prelude = parseImportPrelude(node.params);
+		if (!prelude) {
+			this.#warn(node, filePath, `Unable to find the URL in '${node.toString()}'`);
+			return { action: "leave" };
+		}
+		if (node.nodes) {
+			this.#warn(node, filePath, "It looks like the @import statement was not ended correctly: child nodes are attached to it");
+			return { action: "leave" };
+		}
+		if (!isInPrefix) {
+			this.#warn(node, filePath, "@import must precede all other statements (besides @charset and empty @layer)");
+			return { action: "leave" };
+		}
+		const chain = hasConditions(prelude) ? [...occurrence.chain, prelude] : occurrence.chain;
+		const keep = {
+			action: "keep",
+			prelude,
+			chain
+		};
+		if (externalUrlRe.test(prelude.url)) return keep;
+		const absolutePath = this.#resolve(prelude.url, occurrence.absolutePath);
+		if (!absolutePath) {
+			this.#error(node, filePath, `Failed to resolve "${prelude.url}"`);
+			return keep;
+		}
+		if (ancestors.has(absolutePath)) return { action: "drop" };
+		const metadata = await this.#load(absolutePath);
+		if (!metadata) {
+			this.#error(node, filePath, `Failed to load "${prelude.url}" as a stylesheet`);
+			return keep;
+		}
+		return {
+			action: "inline",
+			child: {
+				metadata,
+				absolutePath,
+				chain,
+				key: [absolutePath, ...chain.map((level) => formatImportConditions(level))].join("\0"),
+				importNode: node
+			}
+		};
+	}
+	#resolve(url, importerAbsolutePath) {
+		const [link] = splitHtmlLink(url);
+		if (link.startsWith("/")) return this.#app.resolver.findFile(join(this.#app.root, link));
+		const resolved = this.#app.resolver.resolve(link, importerAbsolutePath);
+		if (!resolved?.exists) return;
+		return resolved.path;
+	}
+	async #load(absolutePath) {
+		const relativePath = relative(this.#app.root, absolutePath);
+		const inBuild = this.#app.findMetadata({
+			type: METADATA_TYPES.CSS,
+			filePath: relativePath
+		}) ?? this.#app.findMetadata({
+			type: METADATA_TYPES.CSS,
+			id: relativePath
+		});
+		if (inBuild) return inBuild;
+		if (!this.#loaded.has(absolutePath)) this.#loaded.set(absolutePath, await this.#loadFromDisk(absolutePath, relativePath));
+		return this.#loaded.get(absolutePath);
+	}
+	async #loadFromDisk(absolutePath, relativePath) {
+		const content = await this.#app.read(absolutePath);
+		if (content === void 0) return;
+		if (content.trim() === "") return styleLoader.call(this.#app, relativePath, content)[0] ?? void 0;
+		const metadata = await this.#app.load(relativePath, { code: content });
+		if (isStyleMetadata(metadata)) return metadata;
+	}
+	#noteCharset(node, filePath) {
+		if (this.#charsetParams === void 0) {
+			this.#charsetParams = node.params;
+			return;
+		}
+		if (node.params.toLowerCase() !== this.#charsetParams.toLowerCase()) this.#warn(node, filePath, `Incompatible @charset statements: ${node.params} is dropped for ${this.#charsetParams}`);
+	}
+	#warn(node, filePath, message) {
+		this.#report("warning", node, filePath, message);
+	}
+	#error(node, filePath, message) {
+		this.#report("error", node, filePath, message);
+	}
+	#report(level, node, filePath, message) {
+		if (this.#reportedNodes.has(node)) return;
+		this.#reportedNodes.add(node);
+		this.#diagnostics.push({
+			level,
+			message,
+			node,
+			filePath
+		});
+	}
+	async #assemble(entry) {
+		const root = entry.metadata.ast;
+		const lastByKey = /* @__PURE__ */ new Map();
+		for (const occurrence of this.#occurrences) lastByKey.set(occurrence.key, occurrence);
+		let charset;
+		const prefix = [];
+		const body = [];
+		const started = /* @__PURE__ */ new Set();
+		for (const item of this.#entries) {
+			const { occurrence } = item;
+			if (occurrence !== entry && lastByKey.get(occurrence.key) !== occurrence) continue;
+			const nodes = await this.#nodesOf(occurrence);
+			switch (item.kind) {
+				case "charset":
+					charset ??= nodes[item.index];
+					break;
+				case "layer":
+					(this.#hasKeptImports ? prefix : body).push(nodes[item.index]);
+					break;
+				case "import": {
+					const node = nodes[item.index];
+					node.params = keptImportPrelude(node.params, item.prelude, item.chain);
+					prefix.push(node);
+					break;
+				}
+				case "nodes": {
+					const run = item.indices.map((index) => nodes[index]);
+					if (occurrence.importNode && !started.has(occurrence)) {
+						const isBundleStart = !charset && prefix.length === 0 && body.length === 0;
+						run[0].raws.before = isBundleStart ? "" : occurrence.importNode.raws.before || "\n";
+					}
+					started.add(occurrence);
+					body.push(...wrapInConditions(run, occurrence.chain));
+					break;
+				}
+			}
+		}
+		if (charset) prefix.unshift(charset);
+		root.removeAll();
+		root.append([...prefix, ...body]);
+	}
+	async #nodesOf(occurrence) {
+		if (occurrence.nodes) return occurrence.nodes;
+		const clone = this.#app.clone(occurrence.metadata);
+		await this.#app.rebase(clone, this.#bundleAbsolutePath);
+		occurrence.nodes = clone.ast.nodes.slice();
+		return occurrence.nodes;
+	}
+};
+/** Nests `nodes` in `@media`, `@supports` and `@layer` rules for every level of the chain, outermost level outermost. */
+function wrapInConditions(nodes, chain) {
+	if (chain.length === 0) return nodes;
+	const before = nodes[0].raws.before;
+	nodes[0].raws.before = "\n";
+	let wrapped = nodes;
+	for (let level = chain.length - 1; level >= 0; level--) {
+		const { layer, supports, media } = chain[level];
+		const wrappers = [];
+		if (layer !== void 0) wrappers.push(postcss.atRule({
+			name: "layer",
+			params: layer
+		}));
+		if (supports !== void 0) wrappers.push(postcss.atRule({
+			name: "supports",
+			params: `(${supports})`
+		}));
+		if (media !== void 0) wrappers.push(postcss.atRule({
+			name: "media",
+			params: media
+		}));
+		for (const wrapper of wrappers) {
+			wrapper.raws = {
+				before: "\n",
+				between: " ",
+				after: "\n"
+			};
+			wrapper.append(wrapped);
+			wrapped = [wrapper];
+		}
+	}
+	wrapped[0].raws.before = before;
+	return wrapped;
+}
+/**
+* The prelude of an import kept in the bundle, with the conditions of the imports leading to it folded in. A single level fits in
+* one prelude; more than one nests `data:` stylesheets, each importing the next under its own conditions, outermost first.
+*/
+function keptImportPrelude(text, prelude, chain) {
+	if (chain.length === 0 || chain.length === 1 && chain[0] === prelude) return text;
+	let result = `${parseImportPrelude(text)?.urlToken ?? prelude.urlToken} ${formatImportConditions(chain.at(-1))}`;
+	for (let level = chain.length - 2; level >= 0; level--) result = `'data:text/css;base64,${Buffer.from(`@import ${result};`).toString("base64")}' ${formatImportConditions(chain[level])}`;
+	return result;
+}
+
 //#endregion
 //#region src/plugins/html-bundle-style/html-bundle-style-plugin.ts
 /**
-* Inlines the "@import" tree of a stylesheet with postcss-import, so the tag ends up self-contained. Opt-in per tag through the
-* "bundle" attribute (configurable via HtmlBundleStyleOptions) on a "<link rel=stylesheet>" or a "<style>" tag.
+* Inlines the "@import" tree of a stylesheet, so the tag ends up self-contained. Opt-in per tag through the "bundle" attribute
+* (configurable via HtmlBundleStyleOptions) on a "<link rel=stylesheet>" or a "<style>" tag.
 *
 * Bundling happens in place: a "<style>" tag gets the resolved CSS as its content, and a linked file is rewritten with its
 * imports inlined while "href" stays as it is.
@@ -3846,15 +4335,23 @@ function htmlBundleScriptPlugin(options = {}) {
 * - "<link rel=preload as=style>" is always bundled, with or without the attribute, since a preloaded stylesheet has to carry
 *   everything it needs.
 * - A linked stylesheet is bundled once even when several pages link to it; they share the same file.
+* - Imports resolve the way every other source does: relative paths, path aliases and packages, through the build's resolver.
 * - Imported files are pulled from the build (so transforms other plugins made are included) and only read from disk when they are
-*   not part of it. They stay in the output as separate files, now unreferenced.
+*   not part of it. They stay in the output as separate files, now unreferenced. Their "url()" references are rebased onto the
+*   bundle's location.
+* - Conditions ("layer", "supports()", media) wrap the imported rules, a file imported twice under the same conditions is kept
+*   where it was imported last, as in a browser, and imports from other origins are hoisted to the top.
 */
 function htmlBundleStylePlugin(options = {}) {
 	const bundleAttribute = options.bundleAttribute ?? "bundle";
 	const query = `link[rel="stylesheet"][${bundleAttribute}], link[rel="preload"][as="style"], style[${bundleAttribute}]`;
 	const alreadyBundledIds = /* @__PURE__ */ new Set();
+	let bundler;
 	return {
 		name: "html-bundle-style",
+		setup() {
+			bundler = new StyleBundler(this);
+		},
 		async transform(metadata) {
 			if (!this.production) return;
 			if (!isHtmlMetadata(metadata)) return;
@@ -3888,16 +4385,13 @@ function htmlBundleStylePlugin(options = {}) {
 					if (alreadyBundledIds.has(styleMetadata.id)) continue;
 					alreadyBundledIds.add(styleMetadata.id);
 				}
-				const [, processError] = await processCss(styleMetadata.ast, [postcssImport({ load: async (absoluteFilePath) => {
-					const source = relative(this.root, absoluteFilePath);
-					const metadata = this.findMetadata({ filePath: source });
-					if (!metadata) return readFileSync(absoluteFilePath, "utf8");
-					return await this.stringify(metadata);
-				} })], { from: resolve(this.root, metadata.filePath) });
-				if (processError !== null) printFmtError(processError, {
+				const bundleAbsolutePath = join(this.root, isLinkTag ? styleMetadata.filePath : metadata.filePath);
+				const diagnostics = await bundler.bundle(styleMetadata, bundleAbsolutePath);
+				for (const { level, message, node: importNode, filePath } of diagnostics) printFmtError(message, {
 					function: htmlBundleStylePlugin,
-					node,
-					filePath: metadata.id
+					node: importNode,
+					filePath,
+					level
 				});
 			}
 		},
@@ -4440,6 +4934,8 @@ function htmlInlineTextPlugin(options = {}) {
 	const noEscapeAttribute = options.noEscapeAttribute ?? "no-escape";
 	const cache = /* @__PURE__ */ new Map();
 	const dependencies = new DependencyTracker();
+	/** Suffix on the tag's source while it travels through resolution, keeping it apart from real build sources. */
+	const MARKER = "?html-inline-text";
 	return {
 		name: "html-inline-text",
 		sourcesProvider(metadata) {
@@ -4449,9 +4945,11 @@ function htmlInlineTextPlugin(options = {}) {
 			for (const inlineTag of inlineTags) {
 				const source = inlineTag.getAttribute(sourceAttribute);
 				if (!source) continue;
+				const [link] = splitHtmlLink(source);
+				inlineTag.setAttribute(sourceAttribute, link + MARKER);
 				result.push({
 					get source() {
-						return source;
+						return inlineTag.getAttribute(sourceAttribute) ?? "";
 					},
 					set source(newValue) {
 						inlineTag.setAttribute(sourceAttribute, newValue);
@@ -4460,6 +4958,17 @@ function htmlInlineTextPlugin(options = {}) {
 			}
 			return result;
 		},
+		resolveSource(source, filePath) {
+			const [, suffix] = splitHtmlLink(source);
+			if (suffix !== MARKER) return;
+			const resolved = this.resolver.resolve(source, filePath);
+			if (!resolved?.exists) return;
+			this.watcher?.add(relative(this.root, resolved.path));
+			return {
+				source: relative(join(this.root, dirname(filePath)), resolved.path),
+				dependencyID: void 0
+			};
+		},
 		transform(metadata) {
 			if (!isHtmlMetadata(metadata)) return;
 			const inlineTags = metadata.ast.querySelectorAll(tag);
@@ -4476,7 +4985,8 @@ function htmlInlineTextPlugin(options = {}) {
 					printFmtError(`Missing "${sourceAttribute}" attribute`);
 					continue;
 				}
-				const sourceRelative = join(dirname(metadata.filePath), source);
+				const [link] = splitHtmlLink(source);
+				const sourceRelative = join(dirname(metadata.filePath), link);
 				let contents;
 				if (cache.has(sourceRelative)) contents = cache.get(sourceRelative);
 				else {
@@ -4953,6 +5463,14 @@ function htmlLayoutPlugin(options = {}) {
 					}
 					for (const dependency of layoutHtmlMetadata.directDependencies) metadata.directDependencies.add(dependency);
 					await this.rebase(layoutHtmlMetadata, join(this.root, metadata.filePath));
+					const filledSlots = /* @__PURE__ */ new Set();
+					const fillSlot = (slot, html) => {
+						if (!filledSlots.has(slot)) {
+							filledSlots.add(slot);
+							slot.innerHTML = "";
+						}
+						slot.insertAdjacentHTML("beforeend", html);
+					};
 					const children = node.querySelectorAll(":scope > *");
 					for (const element of children) {
 						if (element.nodeType !== NodeType.ELEMENT_NODE) continue;
@@ -4962,7 +5480,7 @@ function htmlLayoutPlugin(options = {}) {
 								printFmtError(`No default slot in layout file:`, layoutRelativePath, { node: element });
 								continue;
 							}
-							for (const defaultSlot of defaultSlots) defaultSlot.insertAdjacentHTML("beforeend", element.outerHTML);
+							for (const defaultSlot of defaultSlots) fillSlot(defaultSlot, element.outerHTML);
 							continue;
 						}
 						const slotName = element.getAttribute("slot");
@@ -4973,7 +5491,7 @@ function htmlLayoutPlugin(options = {}) {
 							continue;
 						}
 						element.removeAttribute("slot");
-						for (const namedSlot of namedSlots) namedSlot.insertAdjacentHTML("beforeend", element.outerHTML);
+						for (const namedSlot of namedSlots) fillSlot(namedSlot, element.outerHTML);
 					}
 					for (const slot of layoutHtmlMetadata.ast.querySelectorAll("slot")) slot.replaceWith(slot.innerHTML.trim());
 					mergeMaps(metadata.scriptsMetadataList, layoutHtmlMetadata.scriptsMetadataList);
@@ -6703,48 +7221,26 @@ function parseStyleSources(ast) {
 			});
 		}
 	});
-	ast.walkAtRules((atRule) => {
-		if (atRule.name !== "import") return;
-		for (const match of atRule.params.matchAll(cssUrlRe)) {
-			const source = match[2];
-			if (!source) continue;
-			handles.push({
-				node: atRule,
-				get source() {
-					return source;
-				},
-				set source(newSource) {
-					atRule.params = atRule.params.replace(source, () => newSource);
-				}
-			});
-		}
+	ast.walkAtRules(/^import$/i, (atRule) => {
+		const prelude = parseImportPrelude(atRule.params);
+		if (!prelude?.url) return;
+		const { urlStart } = prelude;
+		let { url, urlEnd } = prelude;
+		handles.push({
+			node: atRule,
+			get source() {
+				return url;
+			},
+			set source(newSource) {
+				atRule.params = atRule.params.slice(0, urlStart) + newSource + atRule.params.slice(urlEnd);
+				urlEnd = urlStart + newSource.length;
+				url = newSource;
+			}
+		});
 	});
 	return handles;
 }
 
-//#endregion
-//#region src/parsers/css-parser.ts
-function parseCssUnsafe(css, options) {
-	return postcss.parse(css, options ?? {});
-}
-/** Parse CSS string and return the root node */
-const parseCss = valueOrError(parseCssUnsafe);
-
-//#endregion
-//#region src/plugins/core-plugins/style-metadata/style-loader.ts
-function styleLoader(relativePath, code) {
-	const absFilePath = join(this.root, relativePath);
-	const [cssRoot, parseError] = parseCss(code, { from: absFilePath });
-	if (parseError) return [null, parseError];
-	return [{
-		type: METADATA_TYPES.CSS,
-		ast: cssRoot,
-		filePath: relativePath,
-		id: relativePath,
-		directDependencies: /* @__PURE__ */ new Set()
-	}, null];
-}
-
 //#endregion
 //#region src/plugins/core-plugins/style-metadata/style-metadata-plugin.ts
 /**