@yak/react 10.0.0-rc.0 → 10.0.0-rc.2

package/dist/loaders/vite-plugin.js

@@ -1,10 +1,10 @@
 import { createRequire } from "node:module";
 import { transform } from "@swc/core";
 import { existsSync, readFileSync } from "node:fs";
-import path, { dirname, relative, resolve } from "node:path";
+import path, { basename, dirname, extname, posix, resolve, win32 } from "node:path";
 import { isFileLoadingAllowed, normalizePath } from "vite";
 import { createEvaluator } from "../isolated-source-eval/index.js";
-import { relative as relative$1 } from "path";
+import { relative } from "path";
 import { parse } from "@babel/parser";
 
 //#region ../yak-internals/cross-file-resolver/parseModule.ts
@@ -47,7 +47,7 @@ async function uncachedParseModule(context, modulePath) {
 		path: modulePath,
 		js: transformed,
 		exports,
-		styledComponents: parseStyledComponents(transformed.code, context.transpilationMode),
+		styledComponents: parseStyledComponents(transformed.code),
 		mixins
 	};
 }
@@ -66,7 +66,7 @@ function parseMixins(sourceContents) {
 	}
 	return mixins;
 }
-function parseStyledComponents(sourceContents, transpilationMode) {
+function parseStyledComponents(sourceContents) {
 	const styledParts = sourceContents.split("/*YAK EXPORTED STYLED:");
 	let styledComponents = {};
 	for (let i = 1; i < styledParts.length; i++) {
@@ -75,7 +75,7 @@ function parseStyledComponents(sourceContents, transpilationMode) {
 		styledComponents[componentName] = {
 			type: "styled-component",
 			nameParts: componentName.split("."),
-			value: transpilationMode === "Css" ? `.${className}` : `:global(.${className})`
+			value: `.${className}`
 		};
 	}
 	return styledComponents;
@@ -97,6 +97,23 @@ function objectToModuleExport(object) {
 	}));
 }
 
+//#endregion
+//#region ../yak-internals/cross-file-resolver/rewriteRelativeCssUrls.ts
+function rewriteRelativeCssUrls(css, source, consumer) {
+	if (!css.includes("url(")) return css;
+	const path = /^[a-z]:[\\/]/i.test(consumer) ? win32 : posix;
+	const prefix = path.relative(path.dirname(consumer), path.dirname(source.split("?")[0]));
+	if (path.isAbsolute(prefix)) return css;
+	return css.replace(cssUrlRegex, (match, double, single, bare) => {
+		const url = double ?? single ?? bare ?? "";
+		if (!url.startsWith("./") && !url.startsWith("../")) return match;
+		const quote = double !== void 0 ? "\"" : single !== void 0 ? "'" : "";
+		const rewritten = path.join(prefix, url).replace(/\\/g, "/");
+		return `url(${quote}${rewritten.startsWith("../") ? "" : "./"}${rewritten}${quote})`;
+	});
+}
+const cssUrlRegex = /url\(\s*(?:"([^"*]*)"|'([^'*]*)'|([^'"()\s*]*))\s*\)/g;
+
 //#endregion
 //#region ../yak-internals/cross-file-resolver/Errors.ts
 var CauseError = class CauseError extends Error {
@@ -161,6 +178,7 @@ async function uncachedResolveCrossFileConstant(context, filePath, css) {
 				}
 				replacement = resolved.type === "styled-component" ? resolved.value : resolved.value + (["}", ";"].includes(String(resolved.value).trimEnd().slice(-1)) ? "" : semicolon);
 			}
+			if (resolved.type !== "unresolved-tag" && resolved.source !== filePath) replacement = rewriteRelativeCssUrls(String(replacement), resolved.source, filePath);
 			result = result.slice(0, position) + String(replacement) + result.slice(position + size);
 		}
 		return {
@@ -444,7 +462,6 @@ function resolveYakContext(contextPath, cwd) {
 //#region ../yak-internals/loaders/lib/debugLogger.ts
 function createDebugLogger(debugOptions, rootPath) {
 	if (!debugOptions) return () => {};
-	throwOnDeprecatedDebugOptions(debugOptions);
 	const pattern = debugOptions === true ? void 0 : debugOptions.pattern;
 	const typesArray = debugOptions === true ? void 0 : debugOptions.types;
 	let compiledPattern = null;
@@ -456,32 +473,14 @@ function createDebugLogger(debugOptions, rootPath) {
 	const types = typesArray ? new Set(typesArray) : null;
 	return (messageType, message, filePath) => {
 		if (types && !types.has(messageType)) return;
-		const relativePath = relative$1(rootPath, filePath);
+		const relativePath = relative(rootPath, filePath);
 		if (!compiledPattern || compiledPattern.test(relativePath)) console.log("🐮 Yak", `[${messageType}]`, relativePath, "\n\n", message);
 	};
 }
-function throwOnDeprecatedDebugOptions(debugOptions) {
-	if (typeof debugOptions === "string") {
-		const suggestion = suggestTypesForExtensionPattern(debugOptions) ?? `debug: { pattern: "${debugOptions}" }`;
-		throw new Error(`The debug option no longer accepts a string. Please update your config:\n  Before: debug: "${debugOptions}"\n  After:  ${suggestion}`);
-	}
-	if (typeof debugOptions === "object" && "filter" in debugOptions) throw new Error("The debug option no longer accepts { filter, type }. Please update your config:\n  Before: debug: { filter: ..., type: \"...\" }\n  After:  debug: { pattern: \"...\", types: [\"ts\", \"css\", \"css-resolved\"] }");
-	if (typeof debugOptions === "object" && debugOptions.pattern) {
-		const suggestion = suggestTypesForExtensionPattern(debugOptions.pattern);
-		if (suggestion) throw new Error(`The debug pattern "${debugOptions.pattern}" looks like it's filtering by output type using the old file extension convention.\nThe pattern now only matches file paths. Use the "types" option to filter by output type:\n  Before: debug: { pattern: "${debugOptions.pattern}" }\n  After:  ${suggestion}`);
-	}
-}
-function suggestTypesForExtensionPattern(pattern) {
-	const extensionMatch = pattern.match(/\.\(?(?:css-resolved|css)\)?\$?$/);
-	if (!extensionMatch) return null;
-	const type = extensionMatch[0].includes("css-resolved") ? "css-resolved" : "css";
-	const remaining = pattern.slice(0, extensionMatch.index);
-	return remaining ? `debug: { pattern: "${remaining}", types: ["${type}"] }` : `debug: { types: ["${type}"] }`;
-}
 
 //#endregion
 //#region ../yak-internals/loaders/lib/extractCss.ts
-function extractCss(code, transpilationMode) {
+function extractCss(code) {
 	let codeString;
 	if (typeof code === "string") codeString = code;
 	else if (code instanceof Buffer) codeString = code.toString("utf-8");
@@ -493,7 +492,6 @@ function extractCss(code, transpilationMode) {
 		const codeUntilEnd = codeParts[i].split("*/")[0];
 		result += codeUntilEnd;
 	}
-	if (result && transpilationMode !== "Css") result = "/* cssmodules-pure-no-check */\n" + result;
 	return result;
 }
 
@@ -515,8 +513,26 @@ async function parseExports(sourceContents) {
 			all: []
 		};
 		const variableDeclarations = {};
+		const importBindings = {};
+		const localExportSpecifiers = [];
 		let defaultIdentifier = null;
 		for (const node of ast.program.body) {
+			if (node.type === "ImportDeclaration") {
+				for (const specifier of node.specifiers) if (specifier.type === "ImportSpecifier") importBindings[specifier.local.name] = {
+					type: "re-export",
+					from: node.source.value,
+					name: specifier.imported.type === "Identifier" ? specifier.imported.name : specifier.imported.value
+				};
+				else if (specifier.type === "ImportDefaultSpecifier") importBindings[specifier.local.name] = {
+					type: "re-export",
+					from: node.source.value,
+					name: "default"
+				};
+				else if (specifier.type === "ImportNamespaceSpecifier") importBindings[specifier.local.name] = {
+					type: "namespace-re-export",
+					from: node.source.value
+				};
+			}
 			if (node.type === "VariableDeclaration") {
 				for (const decl of node.declarations) if (decl.id.type === "Identifier" && decl.init) variableDeclarations[decl.id.name] = decl.init;
 			}
@@ -532,7 +548,12 @@ async function parseExports(sourceContents) {
 						from: node.source.value
 					};
 				}
-				else if (node.declaration?.type === "VariableDeclaration") {
+				else if (!node.declaration) {
+					for (const specifier of node.specifiers) if (specifier.type === "ExportSpecifier" && specifier.exported.type === "Identifier" && specifier.local.type === "Identifier") localExportSpecifiers.push({
+						local: specifier.local.name,
+						exported: specifier.exported.name
+					});
+				} else if (node.declaration.type === "VariableDeclaration") {
 					for (const declaration of node.declaration.declarations) if (declaration.id.type === "Identifier" && declaration.init) {
 						variableDeclarations[declaration.id.name] = declaration.init;
 						const parsed = parseExportValueExpression(declaration.init, sourceContents);
@@ -551,7 +572,18 @@ async function parseExports(sourceContents) {
 			}
 			if (node.type === "ExportAllDeclaration") moduleExports.all.push(node.source.value);
 		}
-		if (defaultIdentifier && variableDeclarations[defaultIdentifier]) moduleExports.named["default"] = parseExportValueExpression(variableDeclarations[defaultIdentifier], sourceContents);
+		const resolveIdentifier = (name) => {
+			if (variableDeclarations[name]) return parseExportValueExpression(variableDeclarations[name], sourceContents);
+			return importBindings[name];
+		};
+		for (const { local, exported } of localExportSpecifiers) {
+			const resolved = resolveIdentifier(local);
+			if (resolved) moduleExports.named[exported] = resolved;
+		}
+		if (defaultIdentifier) {
+			const resolved = resolveIdentifier(defaultIdentifier);
+			if (resolved) moduleExports.named["default"] = resolved;
+		}
 		return moduleExports;
 	} catch (error) {
 		throw new Error(`Error parsing exports: ${error.message}`);
@@ -659,11 +691,7 @@ function createViteYakPlugin(library) {
 }
 async function viteYakImpl(library, userOptions) {
 	const yakOptions = {
-		experiments: {
-			transpilationMode: "Css",
-			suppressDeprecationWarnings: false,
-			...userOptions.experiments
-		},
+		debug: userOptions.debug,
 		minify: userOptions.minify ?? process.env.NODE_ENV === "production",
 		prefix: userOptions.prefix,
 		foldStatic: userOptions.foldStatic ?? library.foldStatic,
@@ -673,12 +701,10 @@ async function viteYakImpl(library, userOptions) {
 	};
 	yakOptions.displayNames = userOptions.displayNames ?? yakOptions.displayNames ?? !yakOptions.minify;
 	let basePath = userOptions.basePath ?? "";
-	let hasWarnedAboutBasePath = false;
 	let debugLog = () => {};
 	let isServe = false;
 	const sourceFileRegex = /\.(tsx?|m?jsx?)\??/;
-	const virtualModuleRegex = /^virtual:yak-css:/;
-	const virtualCssModuleRegex = /^\0virtual:yak-css:/;
+	const yakCssRegex = /\.yak\.css(?:\?|$)/;
 	const yakSwcPath = await findYakSwcPlugin();
 	const evaluator = await createEvaluator();
 	function checkFileAccess(filePath, config) {
@@ -705,37 +731,37 @@ async function viteYakImpl(library, userOptions) {
 		},
 		configResolved(config) {
 			basePath = basePath ? resolve(config.root, basePath) : config.root;
-			debugLog = createDebugLogger(yakOptions.experiments?.debug, basePath);
+			debugLog = createDebugLogger(yakOptions.debug, basePath);
 			isServe = config.command === "serve";
 		},
 		resolveId: {
-			filter: { id: virtualModuleRegex },
-			handler(id) {
-				return "\0" + id;
+			filter: { id: yakCssRegex },
+			async handler(id, importer) {
+				const { path, query } = splitYakCssId(id);
+				if (importer && path.startsWith("./")) {
+					const source = importer.split("?")[0];
+					if (path === `./${basename(source, extname(source))}`) return source + ".yak.css" + query;
+				}
+				const resolved = await this.resolve(path, importer, { skipSelf: true });
+				return resolved && !resolved.external ? resolved.id + ".yak.css" + query : null;
 			}
 		},
 		load: {
-			filter: { id: virtualCssModuleRegex },
+			filter: { id: yakCssRegex },
 			async handler(id) {
 				const config = this.environment.getTopLevelConfig();
-				const queryStringStart = id.indexOf("?");
-				const queryString = queryStringStart === -1 ? "" : id.slice(queryStringStart);
-				const idWithoutQuery = id.slice(0, id.length - queryString.length);
-				if (!idWithoutQuery.startsWith("\0virtual:yak-css:") || !idWithoutQuery.endsWith(".css")) this.error(`[${library.name}] Invalid yak CSS module`);
-				const relativeId = idWithoutQuery.slice(17, -4);
-				if (!relativeId) this.error(`[${library.name}] Invalid yak CSS module`);
-				const originalId = resolve(basePath, relativeId);
+				const { path: originalId, query: queryString } = splitYakCssId(id);
+				if (!originalId) this.error(`[${library.name}] Invalid yak CSS module`);
 				const readSource = async (filePath) => this.fs.readFile(checkFileAccess(filePath, config), { encoding: "utf8" });
 				const sourceContent = await readSource(originalId);
 				this.addWatchFile(originalId);
 				const code = await transform$1(sourceContent, originalId, basePath, yakSwcPath, yakOptions);
 				debugLog("ts", code.code, originalId);
-				const extractedCss = extractCss(code.code, "Css");
+				const extractedCss = extractCss(code.code);
 				debugLog("css", extractedCss, originalId);
 				const { resolved } = await resolveCrossFileConstant({
 					parse: (modulePath) => {
 						return parseModule({
-							transpilationMode: "Css",
 							extractExports: async (modulePath) => {
 								const sourceContent = await readSource(modulePath);
 								this.addWatchFile(modulePath);
@@ -774,19 +800,13 @@ async function viteYakImpl(library, userOptions) {
 			filter: {
 				id: {
 					include: sourceFileRegex,
-					exclude: [library.excludePattern]
+					exclude: [library.excludePattern, yakCssRegex]
 				},
 				code: library.name
 			},
 			async handler(code, id) {
 				try {
 					const filePath = id.split("?")[0];
-					if (!hasWarnedAboutBasePath) {
-						if (relative(basePath, filePath).startsWith("..")) {
-							hasWarnedAboutBasePath = true;
-							console.warn(`[${library.name}] Source file "${filePath}" is outside the project root "${basePath}".\nThis may cause CSS resolution issues in monorepo setups.\nSet the "basePath" plugin option to your monorepo root:\n\n  { basePath: "/absolute/path/to/monorepo/root" }\n`);
-						}
-					}
 					const result = await transform$1(code, filePath, basePath, yakSwcPath, yakOptions, isServe && library.reactRefreshReg, false);
 					return {
 						code: result.code,
@@ -799,16 +819,26 @@ async function viteYakImpl(library, userOptions) {
 		},
 		hotUpdate({ modules, file, type }) {
 			if (type !== "update" && type !== "create") return;
-			if (!sourceFileRegex.test(file)) return;
-			const virtualId = "\0virtual:yak-css:" + normalizePath(relative(basePath, file)) + ".css";
-			const mod = this.environment.moduleGraph.getModuleById(virtualId);
-			if (mod) {
-				this.environment.moduleGraph.invalidateModule(mod);
-				return [...modules, mod];
+			if (!sourceFileRegex.test(file) || yakCssRegex.test(file)) return;
+			const { moduleGraph } = this.environment;
+			const cssFiles = /* @__PURE__ */ new Set([normalizePath(file) + ".yak.css"]);
+			for (const mod of modules) for (const importer of mod.importers) if (importer.file && yakCssRegex.test(importer.file)) cssFiles.add(importer.file);
+			const cssModules = new Set([...cssFiles].flatMap((cssFile) => [...moduleGraph.getModulesByFile(cssFile) ?? []]));
+			if (cssModules.size) {
+				for (const mod of cssModules) moduleGraph.invalidateModule(mod);
+				return [.../* @__PURE__ */ new Set([...modules, ...cssModules])];
 			}
 		}
 	};
 }
+function splitYakCssId(id) {
+	const queryStart = id.indexOf("?");
+	const query = queryStart === -1 ? "" : id.slice(queryStart);
+	return {
+		path: id.slice(0, id.length - query.length).slice(0, -8),
+		query
+	};
+}
 async function findYakSwcPlugin() {
 	try {
 		const packageJsonPath = require.resolve("@yak/swc/package.json");
@@ -840,12 +870,10 @@ function transform$1(data, modulePath, rootPath, yakSwcPath, yakOptions, reactRe
 					displayNames: yakOptions.displayNames,
 					foldStatic: yakOptions.foldStatic ?? true,
 					strictCssProp: yakOptions.strictCssProp ?? true,
-					suppressDeprecationWarnings: yakOptions.experiments?.suppressDeprecationWarnings,
 					...reactRefreshReg ? { reactRefreshReg: true } : {},
 					...emitCssComments === false ? { emitCssComments: false } : {},
 					importMode: {
-						value: "virtual:yak-css:{{__MODULE_PATH__}}.css",
-						transpilation: "Css",
+						value: "./{{__BASE_NAME__}}.yak.css",
 						encoding: "None"
 					}
 				}]]