@yak/react 10.0.0-rc.1 → 10.0.0

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
@@ -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 {
@@ -455,7 +473,7 @@ 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);
 	};
 }
@@ -683,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) {
@@ -719,22 +735,23 @@ async function viteYakImpl(library, userOptions) {
 			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);
@@ -783,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,
@@ -808,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");
@@ -852,7 +873,7 @@ function transform$1(data, modulePath, rootPath, yakSwcPath, yakOptions, reactRe
 					...reactRefreshReg ? { reactRefreshReg: true } : {},
 					...emitCssComments === false ? { emitCssComments: false } : {},
 					importMode: {
-						value: "virtual:yak-css:{{__MODULE_PATH__}}.css",
+						value: "./{{__BASE_NAME__}}.yak.css",
 						encoding: "None"
 					}
 				}]]