@fastkit/plugboy 1.2.2 → 1.4.0

package/dist/{workspace-B66AR1T-.mjs → workspace-B6BoRqWL.mjs}

@@ -79,7 +79,8 @@ const TSDOWN_SYNC_OPTIONS = [
 	"skipNodeModulesBundle",
 	"onSuccess",
 	"copy",
-	"deps"
+	"deps",
+	"target"
 ];
 //#endregion
 //#region src/types/project.ts
@@ -453,7 +454,7 @@ function isProjectPackageJson(json) {
 	return !!json.private && PROJECT_REQUIRED_FIELDS.every((filed) => !!json[filed]);
 }
 async function resolveUserProjectConfig(userConfig) {
-	const { workspacesDir = "packages", scripts = [], peerDependencies = {}, tsconfig, readme = (json) => `# ${json.name}\n`, plugins, optimizeCSS = true, hooks } = userConfig;
+	const { workspacesDir = "packages", scripts = [], peerDependencies = {}, tsconfig, readme = (json) => `# ${json.name}\n`, plugins, optimizeCSS = true, hooks, target, css } = userConfig;
 	return {
 		workspacesDir,
 		scripts: Array.isArray(scripts) ? scripts : [{
@@ -465,7 +466,9 @@ async function resolveUserProjectConfig(userConfig) {
 		readme,
 		plugins: await resolveUserPluginOption(plugins),
 		optimizeCSS: optimizeCSS === true ? {} : optimizeCSS,
-		hooks
+		hooks,
+		target,
+		css
 	};
 }
 function defineProjectConfig(config) {
@@ -1054,6 +1057,38 @@ async function getProject(searchDir, allowMissing, skipLoadConfig) {
 	});
 }
 //#endregion
+//#region src/workspace/stylesheets.ts
+/** `foo.mjs` -> `foo.css`, mirroring how `@tsdown/css` names a chunk's CSS. */
+function toCssFileName(jsFileName) {
+	return jsFileName.replace(/(?:\.module)?(\.[cm]?js)$/, ".css");
+}
+/** The stylesheets a package declares: `./<entry>.css` per `css: true` entry. */
+function declaredStylesheets(workspace) {
+	return new Set(workspace.exports.filter((exp) => exp.id.endsWith(".css")).map((exp) => path.posix.basename(exp.id)));
+}
+/**
+* Every stylesheet the build has written to `dir`, as file names.
+*
+* The bundle is not the whole story: `plugboy-assemble-entry-css` writes an
+* entry's stylesheet directly to disk when the build produced none for it, so a
+* `writeBundle` stage that only walked the bundle assets would skip exactly the
+* file that needed the most work. The declared exports fill that in — they are the
+* stylesheets the package publishes, so anything present under one of those names
+* belongs in the set.
+*/
+async function listEmittedStylesheets(workspace, dir, bundle) {
+	const names = /* @__PURE__ */ new Set();
+	for (const chunk of Object.values(bundle)) if (chunk.type === "asset" && chunk.fileName.endsWith(".css")) names.add(chunk.fileName);
+	await Promise.all([...declaredStylesheets(workspace)].map(async (name) => {
+		if (names.has(name)) return;
+		try {
+			await fs$1.access(path.join(dir, name));
+			names.add(name);
+		} catch {}
+	}));
+	return [...names];
+}
+//#endregion
 //#region src/postcss/plugin.ts
 async function getPostcss(options) {
 	const { layer, media, combineRules, cssnano } = options;
@@ -1074,38 +1109,137 @@ async function getPostcss(options) {
 const SOURCE_MAPPING_URL_COMMENT_RE = /\/\*# sourceMappingURL=.+? \*\//g;
 const allLayerDefRe = /(^|\n)@layer\s+([a-zA-Z\d\-_$. ,]+);/g;
 const layerDefTrimRe = /((^|\n)@layer\s+|;)/g;
-async function optimizeCSS(asset, options) {
+async function optimizeCSS(css, fileName, options) {
 	const postcss = await getPostcss(options);
-	function prepare(css) {
+	function prepare(source) {
 		return (() => {
-			const matched = css.match(allLayerDefRe);
+			const matched = source.match(allLayerDefRe);
 			if (!matched) return "";
 			const layerNames = [];
 			matched.forEach((row) => {
 				row.replace(layerDefTrimRe, "").split(",").forEach((chunk) => layerNames.push(chunk.trim()));
 			});
 			return `@layer ${Array.from(new Set(layerNames)).join(", ")};\n`;
-		})() + css.replace(allLayerDefRe, "");
+		})() + source.replace(allLayerDefRe, "");
 	}
-	const css = prepare(asset.source.toString());
-	asset.source = (await postcss.process(css, {
-		from: asset.fileName,
-		to: asset.fileName,
+	return (await postcss.process(prepare(css), {
+		from: fileName,
+		to: fileName,
 		map: { inline: false }
 	})).css.replace(SOURCE_MAPPING_URL_COMMENT_RE, "");
 }
+/**
+* Applies {@link PlugboyWorkspace.optimizeCSSOptions} to every stylesheet the
+* build writes.
+*
+* This runs in `writeBundle`, on the files on disk, rather than on the bundle
+* assets in `generateBundle` — because not every stylesheet exists as a bundle
+* asset by then. tsdown's own CSS pipeline emits from a *post* plugin, which
+* runs after every user plugin's `generateBundle`, so CSS that tsdown produces
+* (a plain `.css` / `.scss` import, or — since the vanilla-extract plugin routes
+* its `.css.ts` through tsdown — extracted CSS) used to skip these
+* optimizations entirely, while CSS a plugin emitted itself received them. By
+* `writeBundle` every producer has finished and the whole set is on disk.
+*
+* `preserve-css-imports` re-injects external `@import`s in its own
+* `writeBundle`; it is registered after this plugin, so it always sees the
+* optimized file.
+*/
 function OptimizeCSSPlugin(workspace) {
+	const processed = /* @__PURE__ */ new Set();
 	return {
 		name: "plugboy-optimize-css",
-		async generateBundle(_options, bundle) {
+		buildStart() {
+			processed.clear();
+		},
+		async writeBundle(options, bundle) {
 			const { optimizeCSSOptions } = workspace;
 			if (!optimizeCSSOptions) return;
+			const { dir } = options;
+			if (!dir) return;
+			const stylesheets = await listEmittedStylesheets(workspace, dir, bundle);
+			await Promise.all(stylesheets.map(async (fileName) => {
+				const filePath = path.join(dir, fileName);
+				if (processed.has(filePath)) return;
+				let css;
+				try {
+					css = await fs$1.readFile(filePath, "utf8");
+				} catch {
+					return;
+				}
+				processed.add(filePath);
+				const optimized = await optimizeCSS(css, fileName, optimizeCSSOptions);
+				if (optimized !== css) await fs$1.writeFile(filePath, optimized);
+			}));
+		}
+	};
+}
+//#endregion
+//#region src/workspace/plugins/assemble-entry-css.ts
+function createAssembleEntryCssPlugin(workspace) {
+	/** Chunk file name -> its identity and static imports, as of `generateBundle`. */
+	const graph = /* @__PURE__ */ new Map();
+	return definePlugin({
+		name: "plugboy-assemble-entry-css",
+		buildStart() {
+			graph.clear();
+		},
+		generateBundle(_options, bundle) {
 			for (const chunk of Object.values(bundle)) {
-				if (chunk.type !== "asset" || !chunk.fileName.endsWith(".css")) continue;
-				await optimizeCSS(chunk, optimizeCSSOptions);
+				if (chunk.type !== "chunk") continue;
+				graph.set(chunk.fileName, {
+					name: chunk.name,
+					isEntry: chunk.isEntry,
+					imports: [...chunk.imports]
+				});
 			}
+		},
+		async writeBundle(options, bundle) {
+			const { dir } = options;
+			if (!dir) return;
+			if (workspace.cssOptions?.inject) return;
+			const targets = declaredStylesheets(workspace);
+			if (!targets.size) return;
+			const emitted = new Set(Object.values(bundle).filter((chunk) => chunk.type === "asset" && chunk.fileName.endsWith(".css")).map((chunk) => chunk.fileName));
+			if (!emitted.size) return;
+			/** The stylesheet a chunk owns, if the build emitted one. */
+			const cssOf = (fileName) => {
+				const css = toCssFileName(fileName);
+				return css !== fileName && emitted.has(css) ? css : void 0;
+			};
+			/** Stylesheets an entry needs, dependencies first, each listed once. */
+			const collect = (entryFileName) => {
+				const visited = /* @__PURE__ */ new Set();
+				const ordered = [];
+				const walk = (fileName) => {
+					if (visited.has(fileName)) return;
+					visited.add(fileName);
+					const node = graph.get(fileName);
+					if (!node) return;
+					for (const imported of node.imports) walk(imported);
+					const css = cssOf(fileName);
+					if (css && !ordered.includes(css)) ordered.push(css);
+				};
+				walk(entryFileName);
+				return ordered;
+			};
+			const folded = /* @__PURE__ */ new Set();
+			await Promise.all([...graph].map(async ([fileName, node]) => {
+				if (!node.isEntry) return;
+				const target = `${node.name}.css`;
+				if (!targets.has(target)) return;
+				const sources = collect(fileName);
+				if (!sources.length) return;
+				sources.forEach((source) => folded.add(source));
+				if (sources.length === 1 && sources[0] === target) return;
+				const css = (await Promise.all(sources.map((source) => fs$1.readFile(path.join(dir, source), "utf8").catch(() => "")))).filter(Boolean).join("\n");
+				if (!css) return;
+				await fs$1.writeFile(path.join(dir, target), css);
+				folded.add(target);
+			}));
+			await Promise.all([...folded].filter((css) => !targets.has(css)).map((css) => fs$1.rm(path.join(dir, css), { force: true })));
 		}
-	};
+	});
 }
 //#endregion
 //#region src/workspace/plugins/raw-loader.ts
@@ -1131,20 +1265,34 @@ const rawLoaderPlugin = {
 //#endregion
 //#region src/workspace/plugins/preserve-css-imports.ts
 /**
-* Plugin to preserve external CSS `@import` statements.
+* Plugin to preserve what tsdown's CSS pipeline would rewrite away at the top of
+* a stylesheet: external `@import` statements and the authored `@layer` order.
 *
-* rolldown / tsdown's CSS pipeline (lightningcss) resolves and inlines every
-* `@import` it can. For bare package specifiers (e.g.
+* **External `@import`s.** rolldown / tsdown's CSS pipeline (lightningcss)
+* resolves and inlines every `@import` it can. For bare package specifiers (e.g.
 * `@import url('material-symbols/rounded.css') layer(...)`) that is wrong for a
 * library build: it bloats the output and rebases the imported package's own
 * relative asset URLs (fonts) against our `dist`, breaking them. Such imports
 * should stay external so the consumer's bundler resolves them.
 *
-* We can't intercept this in a `transform` hook — by then tsdown has already
-* inlined the imports. Instead we strip them in `load` (which runs before the
-* CSS transform), remember them, and re-emit them in `writeBundle`, after every
-* other CSS producer (including vanilla-extract's merge) has written the final
-* file to disk.
+* **Layer order.** lightningcss drops a name from an `@layer a, b, c;` statement
+* when a block for it follows in the same stylesheet, since the block establishes
+* the same order. That holds for a standalone document, but not for a library
+* stylesheet whose statement also orders layers belonging to *other* packages:
+* once the name is gone, its position is decided by wherever its block happens to
+* land relative to those, and the authored order is lost. `@fastkit/vui` declares
+* `@layer vui-normalize, vui-color-scheme, …, vui;`, and losing `vui-normalize`
+* from it promoted the reset layer above the packages it is supposed to lose to.
+*
+* Both are captured from a `transform` hook declared `order: 'pre'`, which runs
+* ahead of tsdown's CSS handling even though that is registered as a *pre plugin*
+* — hook order wins over plugin order. It is the only point that sees the CSS of
+* **every** stylesheet in the graph, including a virtual one another plugin
+* supplies from `load`: vanilla-extract generates its `@layer` statements into
+* such a module, so a `load`-based capture would miss exactly the case where the
+* generated statement is the only record of the intended order. The captured
+* values are re-emitted in `writeBundle`, after every CSS producer has written
+* its final file to disk.
 */
 /**
 * Matches a single `@import` statement, capturing the quote (group 1) and the
@@ -1162,47 +1310,133 @@ function isInternalImportSpecifier(spec) {
 }
 /** Matches a top-level `@layer <names>;` statement (declaration, not a block). */
 const LAYER_STATEMENT_RE = /@layer\s+([^{};]+);[ \t]*\n?/g;
-function createPreserveCssImportsPlugin() {
+/** Stylesheet ids, with any query (`?source=…`, `?inline`) still attached. */
+const STYLE_ID_RE = /\.(?:css|scss|sass|less|styl|stylus)(?:$|\?)/;
+/** The layer names a stylesheet declares, in the order it declares them. */
+function collectLayerNames(css) {
+	const names = [];
+	for (const [, group] of css.matchAll(LAYER_STATEMENT_RE)) for (const name of group.split(",")) {
+		const trimmed = name.trim();
+		if (trimmed && !names.includes(trimmed)) names.push(trimmed);
+	}
+	return names;
+}
+/**
+* Merge several declaration orders into one that contradicts none of them.
+*
+* Concatenating them and dropping repeats does not work, because a name's first
+* appearance is rarely where its order is decided: vanilla-extract re-declares a
+* layer at the top of *every* stylesheet that puts a rule in it, so a single
+* `@layer that-one;` from some component is seen before the module that declares
+* how all the layers relate — and once the component's name is in the list, the
+* declaring module's order is silently dropped for it.
+*
+* Each sequence is therefore read as a set of "must come before" constraints and
+* the result is a topological sort of them, preferring the earliest-seen name when
+* several are free. Earlier sequences win: a constraint that would contradict one
+* already recorded is skipped, so a stylesheet's own surviving statement — whose
+* order tsdown may have rewritten — can add names without reordering anything.
+*/
+function mergeLayerOrder(sequences) {
+	const nodes = [];
+	const next = /* @__PURE__ */ new Map();
+	const add = (name) => {
+		if (next.has(name)) return;
+		nodes.push(name);
+		next.set(name, /* @__PURE__ */ new Set());
+	};
+	/** Whether `to` already has to come after `from`. */
+	const precedes = (from, to) => {
+		const seen = /* @__PURE__ */ new Set();
+		const stack = [from];
+		while (stack.length) {
+			const current = stack.pop();
+			if (current === to) return true;
+			if (seen.has(current)) continue;
+			seen.add(current);
+			stack.push(...next.get(current) ?? []);
+		}
+		return false;
+	};
+	for (const sequence of sequences) {
+		sequence.forEach(add);
+		for (let i = 0; i + 1 < sequence.length; i++) {
+			const from = sequence[i];
+			const to = sequence[i + 1];
+			if (from === to || precedes(to, from)) continue;
+			next.get(from).add(to);
+		}
+	}
+	const incoming = new Map(nodes.map((name) => [name, 0]));
+	for (const [, targets] of next) for (const target of targets) incoming.set(target, (incoming.get(target) ?? 0) + 1);
+	const remaining = new Set(nodes);
+	const merged = [];
+	while (remaining.size) {
+		const name = nodes.find((it) => remaining.has(it) && incoming.get(it) === 0) ?? nodes.find((it) => remaining.has(it));
+		remaining.delete(name);
+		merged.push(name);
+		for (const target of next.get(name) ?? []) incoming.set(target, (incoming.get(target) ?? 1) - 1);
+	}
+	return merged;
+}
+function createPreserveCssImportsPlugin(workspace) {
 	const externalImports = [];
+	const layersByModule = /* @__PURE__ */ new Map();
+	const declaredLayers = [];
 	const processed = /* @__PURE__ */ new Set();
 	return definePlugin({
 		name: "preserve-css-imports",
 		buildStart() {
 			externalImports.length = 0;
+			layersByModule.clear();
+			declaredLayers.length = 0;
 			processed.clear();
 		},
-		async load(id) {
-			const file = id.split("?")[0];
-			if (!file.endsWith(".css")) return null;
-			let code;
-			try {
-				code = await fs$1.readFile(file, "utf8");
-			} catch {
-				return null;
+		transform: {
+			order: "pre",
+			filter: { id: STYLE_ID_RE },
+			handler(code, id) {
+				const file = id.split("?")[0];
+				if (!STYLE_ID_RE.test(file)) return null;
+				const names = collectLayerNames(code);
+				if (names.length) layersByModule.set(id, names);
+				if (!file.endsWith(".css") || !code.includes("@import")) return null;
+				let changed = false;
+				const stripped = code.replace(IMPORT_RE, (statement, _quote, spec) => {
+					if (isInternalImportSpecifier(spec)) return statement;
+					changed = true;
+					const normalized = statement.trim();
+					if (!externalImports.includes(normalized)) externalImports.push(normalized);
+					return "";
+				});
+				if (!changed) return null;
+				return {
+					code: stripped,
+					map: null
+				};
+			}
+		},
+		generateBundle(_options, bundle) {
+			if (!layersByModule.size) return;
+			const sequences = [];
+			for (const chunk of Object.values(bundle)) {
+				if (chunk.type !== "chunk") continue;
+				for (const id of chunk.moduleIds) {
+					const names = layersByModule.get(id);
+					if (names) sequences.push(names);
+				}
 			}
-			if (!code.includes("@import")) return null;
-			let changed = false;
-			const stripped = code.replace(IMPORT_RE, (statement, _quote, spec) => {
-				if (isInternalImportSpecifier(spec)) return statement;
-				changed = true;
-				const normalized = statement.trim();
-				if (!externalImports.includes(normalized)) externalImports.push(normalized);
-				return "";
-			});
-			if (!changed) return null;
-			return {
-				code: stripped,
-				map: null
-			};
+			declaredLayers.length = 0;
+			declaredLayers.push(...mergeLayerOrder(sequences));
 		},
 		async writeBundle(options, bundle) {
-			if (!externalImports.length) return;
+			if (!externalImports.length && !declaredLayers.length) return;
 			const { dir } = options;
 			if (!dir) return;
-			const importBlock = `${externalImports.join("\n")}\n`;
-			await Promise.all(Object.values(bundle).map(async (chunk) => {
-				if (chunk.type !== "asset" || !chunk.fileName.endsWith(".css")) return;
-				const filePath = path.join(dir, chunk.fileName);
+			const importBlock = externalImports.length ? `${externalImports.join("\n")}\n` : "";
+			const stylesheets = await listEmittedStylesheets(workspace, dir, bundle);
+			await Promise.all(stylesheets.map(async (fileName) => {
+				const filePath = path.join(dir, fileName);
 				if (processed.has(filePath)) return;
 				let css;
 				try {
@@ -1211,14 +1445,10 @@ function createPreserveCssImportsPlugin() {
 					return;
 				}
 				processed.add(filePath);
-				const layerNames = [];
-				for (const [, names] of css.matchAll(LAYER_STATEMENT_RE)) for (const name of names.split(",")) {
-					const trimmed = name.trim();
-					if (trimmed && !layerNames.includes(trimmed)) layerNames.push(trimmed);
-				}
+				const layerNames = mergeLayerOrder([declaredLayers, collectLayerNames(css)]);
 				const body = css.replace(LAYER_STATEMENT_RE, "");
-				const layerStatement = layerNames.length ? `@layer ${layerNames.join(", ")};\n` : "";
-				await fs$1.writeFile(filePath, `${layerStatement}${importBlock}${body}`);
+				const next = `${layerNames.length ? `@layer ${layerNames.join(", ")};\n` : ""}${importBlock}${body}`;
+				if (next !== css) await fs$1.writeFile(filePath, next);
 			}));
 		}
 	});
@@ -1389,10 +1619,11 @@ var PlugboyWorkspace = class {
 			createExternalImportsPlugin(this),
 			createSuppressDtsSourcemapWarningPlugin(),
 			...plugins,
+			createAssembleEntryCssPlugin(this),
 			OptimizeCSSPlugin(this),
 			WorkspaceEnvPlugin(this),
 			rawLoaderPlugin,
-			createPreserveCssImportsPlugin()
+			createPreserveCssImportsPlugin(this)
 		];
 		this.hooks = hooks;
 		this.dts = dts;
@@ -1556,6 +1787,11 @@ async function getWorkspace(searchDir, allowMissing) {
 		...project.config.optimizeCSS,
 		...optimizeCSS
 	};
+	const css = config.css || project?.config.css ? {
+		...project?.config.css,
+		...config.css
+	} : void 0;
+	config.target ??= project?.config.target;
 	const ctx = {
 		dir,
 		json,
@@ -1569,6 +1805,7 @@ async function getWorkspace(searchDir, allowMissing) {
 		plugins,
 		hooks,
 		dts,
+		css,
 		optimizeCSS,
 		mergeExternals: (override) => {
 			config.deps ??= {};
@@ -1708,4 +1945,4 @@ export default defineWorkspaceConfig({
 //#endregion
 export { resolveOptimizeCSSOptions as $, resolveRawExposeEntriesSettings as A, resolveBundledConfigOutputFile as B, findProjectPlugin as C, loadProjectConfig as D, isProjectPackageJson as E, getFilename as F, mergeChunkAddons as G, stripDanglingDTSSourceMaps as H, isFileNotFoundException as I, isPromise as J, mergeExternals as K, pathExists as L, findConfig as M, findFile as N, resolveUserProjectConfig as O, getDirname as P, WORKSPACE_REQUIRED_FIELDS as Q, rmrf as R, extractProjectPlugins as S, defineProjectConfig as T, exitHook as U, DANGLING_DTS_SOURCE_MAP_RE as V, collectExternalStringPrefixes as W, PROJECT_REQUIRED_FIELDS as X, resolveListable as Y, TSDOWN_SYNC_OPTIONS as Z, loadWorkspaceConfig as _, syncWorkspacePackageFields as a, resolveUserWorkspaceConfig as b, Builder as c, getWorkspacePackageJson as d, mergeDTSSettingsList as et, Path as f, isWorkspacePackageJson as g, defineWorkspaceConfig as h, getWorkspace as i, createHooksDefaults as it, copyDirSync as j, exposeEntries as k, findWorkspacePackages as l, resolveUserHooks as m, PlugboyWorkspace as n, normalizeDTSPreserveTypeTarget as nt, PlugboyProject as o, buildHooks as p, mergeNoExternals as q, WORKSPACE_PACKAGE_SYNC_FIELDS as r, normalizeDTSSettings as rt, getProject as s, generateWorkspace as t, normalizeDTSPreserveTypeSettings as tt, getProjectPackageJson as u, resolveRawWorkspaceEntries as v, resolveUserPluginOption as w, definePlugin as x, resolveRawWorkspaceEntry as y, writeFileAtomic as z };
 
-//# sourceMappingURL=workspace-B66AR1T-.mjs.map
+//# sourceMappingURL=workspace-B6BoRqWL.mjs.map