@flairjs/webpack-loader 0.0.1-beta.5 → 0.0.1-beta.7

package/dist/cjs/index.js

@@ -71,8 +71,33 @@ function tokensToCSSVars(tokens, prefix = []) {
 	}
 	return css$1;
 }
+var Store = class {
+	fileNameToGeneratedCssNameMap = /* @__PURE__ */ new Map();
+	lastThemeUpdate = Date.now();
+	userTheme = /* @__PURE__ */ new Map();
+	getUserTheme() {
+		return this.userTheme.get(this.lastThemeUpdate) ?? null;
+	}
+	setUserTheme(theme) {
+		this.userTheme.set(this.lastThemeUpdate, theme);
+	}
+	getLastThemeUpdate() {
+		return this.lastThemeUpdate;
+	}
+	setLastThemeUpdate(timestamp) {
+		this.lastThemeUpdate = timestamp;
+	}
+	setFileNameToGeneratedCssNameMap(fileName, generatedCssName) {
+		this.fileNameToGeneratedCssNameMap.set(fileName, generatedCssName);
+	}
+	getGeneratedCssName(fileName) {
+		return this.fileNameToGeneratedCssNameMap.get(fileName);
+	}
+};
+const store = new Store();
 const __dirname$1 = (0, node_path.dirname)((0, node_url.fileURLToPath)(require("url").pathToFileURL(__filename).href));
-const getUserTheme = async () => {
+const getUserTheme = async (options) => {
+	if (store.getUserTheme() && !options?.ignoreCache) return store.getUserTheme();
 	try {
 		let userThemeFilePath = path.default.resolve(process.cwd(), "flair.theme.ts");
 		if (!(0, fs.existsSync)(userThemeFilePath)) userThemeFilePath = path.default.resolve(process.cwd(), "flair.theme.js");
@@ -88,10 +113,17 @@ const getUserTheme = async () => {
 		});
 		const cacheBuster = Date.now();
 		const userTheme = await import(`${(0, url.pathToFileURL)(outFile).href}?update=${cacheBuster}`);
-		if (userTheme.default) return {
-			theme: userTheme.default,
-			originalPath: userThemeFilePath
-		};
+		if (userTheme.default) {
+			store.setUserTheme({
+				theme: userTheme.default,
+				originalPath: userThemeFilePath
+			});
+			return {
+				theme: userTheme.default,
+				originalPath: userThemeFilePath
+			};
+		}
+		store.setUserTheme(null);
 		return null;
 	} catch (error) {
 		console.error("Error loading user theme:", error);
@@ -99,57 +131,73 @@ const getUserTheme = async () => {
 	}
 };
 const require$1 = node_module.default.createRequire(require("url").pathToFileURL(__filename).href);
-/**
-* Initialize the shared plugin context
-*/
-async function initializeSharedContext(options = {}) {
-	const { buildThemeFile } = options;
-	const fileNameToGeneratedCssNameMap = /* @__PURE__ */ new Map();
+const getGeneratedCssDir = () => {
 	const flairThemeFile = require$1.resolve("@flairjs/client/theme.css");
-	const flairGeneratedCssDir = node_path.default.resolve(flairThemeFile, "../generated-css");
-	if (!(0, node_fs.existsSync)(flairGeneratedCssDir)) await (0, node_fs_promises.mkdir)(flairGeneratedCssDir);
-	else {
-		await (0, node_fs_promises.rm)(flairGeneratedCssDir, {
-			recursive: true,
-			force: true
-		});
-		await (0, node_fs_promises.mkdir)(flairGeneratedCssDir);
+	return node_path.default.resolve(flairThemeFile, "../generated-css");
+};
+const setupGeneratedCssDir = async (options) => {
+	const flairGeneratedCssDir = getGeneratedCssDir();
+	const { clearExisting = true } = options ?? {};
+	try {
+		if (!(0, node_fs.existsSync)(flairGeneratedCssDir)) await (0, node_fs_promises.mkdir)(flairGeneratedCssDir);
+		else if (clearExisting) {
+			await (0, node_fs_promises.rm)(flairGeneratedCssDir, {
+				recursive: true,
+				force: true
+			});
+			await (0, node_fs_promises.mkdir)(flairGeneratedCssDir);
+		}
+	} catch (err) {
+		if (err?.code === "EEXIST") return flairGeneratedCssDir;
+		else if ((0, node_fs.existsSync)(flairGeneratedCssDir)) return flairGeneratedCssDir;
+		console.error(`[flairjs] Could not create generated CSS directory: ${flairGeneratedCssDir}`, err);
+		return null;
 	}
+	return flairGeneratedCssDir;
+};
+const setupUserThemeFile = async ({ buildThemeFile, onThemeFileChange }) => {
+	const flairThemeFile = require$1.resolve("@flairjs/client/theme.css");
 	let userTheme = await getUserTheme();
 	const buildThemeCSS = buildThemeFile ?? buildThemeTokens;
 	if (userTheme) {
 		const themeCSS = buildThemeCSS(userTheme.theme);
+		store.setLastThemeUpdate(Date.now());
 		await (0, node_fs_promises.writeFile)(flairThemeFile, themeCSS, "utf-8");
 		(0, node_fs.watch)(userTheme.originalPath, async () => {
 			userTheme = await getUserTheme();
+			store.setLastThemeUpdate(Date.now());
 			if (!userTheme) return;
 			const themeCSS$1 = buildThemeCSS(userTheme.theme);
+			onThemeFileChange?.();
 			await (0, node_fs_promises.writeFile)(flairThemeFile, themeCSS$1, "utf-8");
 		});
 	}
-	const refreshCssFile = (filePath) => {
-		if (fileNameToGeneratedCssNameMap.has(filePath)) {
-			const previousGeneratedCssName = fileNameToGeneratedCssNameMap.get(filePath);
-			setTimeout(() => {
-				(0, node_fs_promises.rm)(node_path.default.join(flairGeneratedCssDir, previousGeneratedCssName));
-			}, 2e3);
+	return userTheme;
+};
+const removeOutdatedCssFiles = async (sourceFilePath, cssFilePath, { flairGeneratedCssDir, clearInstantly = false }) => {
+	const previousGeneratedCssName = store.getGeneratedCssName(sourceFilePath);
+	if (previousGeneratedCssName && previousGeneratedCssName !== cssFilePath) {
+		if (clearInstantly) {
+			await (0, node_fs_promises.rm)(node_path.default.join(flairGeneratedCssDir, previousGeneratedCssName), { force: true });
+			store.setFileNameToGeneratedCssNameMap(sourceFilePath, cssFilePath);
+			return;
 		}
-	};
-	return {
-		flairThemeFile,
-		flairGeneratedCssDir,
-		userTheme,
-		buildThemeCSS,
-		refreshCssFile
-	};
-}
+		setTimeout(() => {
+			(0, node_fs_promises.rm)(node_path.default.join(flairGeneratedCssDir, previousGeneratedCssName), { force: true });
+		}, 2e3);
+	}
+	store.setFileNameToGeneratedCssNameMap(sourceFilePath, cssFilePath);
+};
 function shouldProcessFile(id, include, exclude) {
-	const isIncluded = (0, picomatch.default)(include || ["**/*.{js,ts,jsx,tsx}"]);
-	const isExcluded = (0, picomatch.default)(exclude || ["node_modules/**"]);
-	if (!isIncluded(id)) return false;
-	if (isExcluded(id)) return false;
+	const isIncluded = (0, picomatch.default)(include ?? ["**/*.{js,ts,jsx,tsx}"]);
+	const isExcluded = (0, picomatch.default)(exclude ?? ["**/node_modules/**"]);
+	if (!isIncluded(normalizeFilePath(id))) return false;
+	if (isExcluded(normalizeFilePath(id))) return false;
 	return true;
 }
+function normalizeFilePath(filePath) {
+	return filePath.replace(/\\/g, "/");
+}
 const colors = {
 	reset: "\x1B[0m",
 	fg: {
@@ -191,28 +239,42 @@ const transformCode = (code, filePath, options) => {
 
 //#endregion
 //#region src/index.ts
+let initialized = false;
 async function flairJsLoader(source, sourceMap) {
 	const callback = this.async();
+	const options = this.getOptions() || {};
 	if (!callback) {
 		console.error("@flairjs/webpack-loader requires async support");
 		return;
 	}
-	const options = this.getOptions() || {};
-	const context = await initializeSharedContext(options);
 	const fileName = this.resourcePath;
 	if (!shouldProcessFile(fileName, options?.include, options?.exclude)) return callback(null, source, sourceMap);
+	let cssGeneratedDir = null;
+	let userTheme = null;
+	if (!initialized) {
+		cssGeneratedDir = await setupGeneratedCssDir();
+		userTheme = await setupUserThemeFile({ buildThemeFile: options.buildThemeFile });
+		initialized = true;
+	} else {
+		cssGeneratedDir = getGeneratedCssDir();
+		userTheme = await getUserTheme();
+	}
+	if (!cssGeneratedDir) {
+		console.error("[flairjs] Could not find generated CSS directory. Skipping processing.");
+		return callback(null, source, sourceMap);
+	}
 	try {
 		const result = transformCode(source, fileName, {
 			appendTimestampToCssFile: true,
 			classNameList: options?.classNameList,
 			cssPreprocessor: options?.cssPreprocessor ? (css) => options.cssPreprocessor(css, fileName) : void 0,
-			theme: context.userTheme?.theme,
-			useTheme: !!context.userTheme,
-			cssOutDir: context.flairGeneratedCssDir
+			theme: userTheme?.theme,
+			useTheme: !!userTheme,
+			cssOutDir: cssGeneratedDir
 		});
 		if (!result) return callback(null, source, sourceMap);
-		if (result.generatedCssName) context.refreshCssFile(result.generatedCssName);
-		callback(null, result.code, result.map ? JSON.parse(result.map ?? "{}") : sourceMap);
+		if (result.generatedCssName) removeOutdatedCssFiles(fileName, result.generatedCssName, { flairGeneratedCssDir: cssGeneratedDir });
+		callback(null, result.code, result.sourcemap ? JSON.parse(result.sourcemap ?? "{}") : sourceMap);
 	} catch (error) {
 		console.error("[@flairjs/webpack-loader]", error);
 		callback(error, source, sourceMap);

package/dist/esm/index.js

@@ -37,8 +37,33 @@ function tokensToCSSVars(tokens, prefix = []) {
 	}
 	return css$1;
 }
+var Store = class {
+	fileNameToGeneratedCssNameMap = /* @__PURE__ */ new Map();
+	lastThemeUpdate = Date.now();
+	userTheme = /* @__PURE__ */ new Map();
+	getUserTheme() {
+		return this.userTheme.get(this.lastThemeUpdate) ?? null;
+	}
+	setUserTheme(theme) {
+		this.userTheme.set(this.lastThemeUpdate, theme);
+	}
+	getLastThemeUpdate() {
+		return this.lastThemeUpdate;
+	}
+	setLastThemeUpdate(timestamp) {
+		this.lastThemeUpdate = timestamp;
+	}
+	setFileNameToGeneratedCssNameMap(fileName, generatedCssName) {
+		this.fileNameToGeneratedCssNameMap.set(fileName, generatedCssName);
+	}
+	getGeneratedCssName(fileName) {
+		return this.fileNameToGeneratedCssNameMap.get(fileName);
+	}
+};
+const store = new Store();
 const __dirname = dirname(fileURLToPath(import.meta.url));
-const getUserTheme = async () => {
+const getUserTheme = async (options) => {
+	if (store.getUserTheme() && !options?.ignoreCache) return store.getUserTheme();
 	try {
 		let userThemeFilePath = path$1.resolve(process.cwd(), "flair.theme.ts");
 		if (!existsSync$1(userThemeFilePath)) userThemeFilePath = path$1.resolve(process.cwd(), "flair.theme.js");
@@ -54,10 +79,17 @@ const getUserTheme = async () => {
 		});
 		const cacheBuster = Date.now();
 		const userTheme = await import(`${pathToFileURL(outFile).href}?update=${cacheBuster}`);
-		if (userTheme.default) return {
-			theme: userTheme.default,
-			originalPath: userThemeFilePath
-		};
+		if (userTheme.default) {
+			store.setUserTheme({
+				theme: userTheme.default,
+				originalPath: userThemeFilePath
+			});
+			return {
+				theme: userTheme.default,
+				originalPath: userThemeFilePath
+			};
+		}
+		store.setUserTheme(null);
 		return null;
 	} catch (error) {
 		console.error("Error loading user theme:", error);
@@ -65,57 +97,73 @@ const getUserTheme = async () => {
 	}
 };
 const require = module.createRequire(import.meta.url);
-/**
-* Initialize the shared plugin context
-*/
-async function initializeSharedContext(options = {}) {
-	const { buildThemeFile } = options;
-	const fileNameToGeneratedCssNameMap = /* @__PURE__ */ new Map();
+const getGeneratedCssDir = () => {
 	const flairThemeFile = require.resolve("@flairjs/client/theme.css");
-	const flairGeneratedCssDir = path.resolve(flairThemeFile, "../generated-css");
-	if (!existsSync(flairGeneratedCssDir)) await mkdir(flairGeneratedCssDir);
-	else {
-		await rm(flairGeneratedCssDir, {
-			recursive: true,
-			force: true
-		});
-		await mkdir(flairGeneratedCssDir);
+	return path.resolve(flairThemeFile, "../generated-css");
+};
+const setupGeneratedCssDir = async (options) => {
+	const flairGeneratedCssDir = getGeneratedCssDir();
+	const { clearExisting = true } = options ?? {};
+	try {
+		if (!existsSync(flairGeneratedCssDir)) await mkdir(flairGeneratedCssDir);
+		else if (clearExisting) {
+			await rm(flairGeneratedCssDir, {
+				recursive: true,
+				force: true
+			});
+			await mkdir(flairGeneratedCssDir);
+		}
+	} catch (err) {
+		if (err?.code === "EEXIST") return flairGeneratedCssDir;
+		else if (existsSync(flairGeneratedCssDir)) return flairGeneratedCssDir;
+		console.error(`[flairjs] Could not create generated CSS directory: ${flairGeneratedCssDir}`, err);
+		return null;
 	}
+	return flairGeneratedCssDir;
+};
+const setupUserThemeFile = async ({ buildThemeFile, onThemeFileChange }) => {
+	const flairThemeFile = require.resolve("@flairjs/client/theme.css");
 	let userTheme = await getUserTheme();
 	const buildThemeCSS = buildThemeFile ?? buildThemeTokens;
 	if (userTheme) {
 		const themeCSS = buildThemeCSS(userTheme.theme);
+		store.setLastThemeUpdate(Date.now());
 		await writeFile(flairThemeFile, themeCSS, "utf-8");
 		watch(userTheme.originalPath, async () => {
 			userTheme = await getUserTheme();
+			store.setLastThemeUpdate(Date.now());
 			if (!userTheme) return;
 			const themeCSS$1 = buildThemeCSS(userTheme.theme);
+			onThemeFileChange?.();
 			await writeFile(flairThemeFile, themeCSS$1, "utf-8");
 		});
 	}
-	const refreshCssFile = (filePath) => {
-		if (fileNameToGeneratedCssNameMap.has(filePath)) {
-			const previousGeneratedCssName = fileNameToGeneratedCssNameMap.get(filePath);
-			setTimeout(() => {
-				rm(path.join(flairGeneratedCssDir, previousGeneratedCssName));
-			}, 2e3);
+	return userTheme;
+};
+const removeOutdatedCssFiles = async (sourceFilePath, cssFilePath, { flairGeneratedCssDir, clearInstantly = false }) => {
+	const previousGeneratedCssName = store.getGeneratedCssName(sourceFilePath);
+	if (previousGeneratedCssName && previousGeneratedCssName !== cssFilePath) {
+		if (clearInstantly) {
+			await rm(path.join(flairGeneratedCssDir, previousGeneratedCssName), { force: true });
+			store.setFileNameToGeneratedCssNameMap(sourceFilePath, cssFilePath);
+			return;
 		}
-	};
-	return {
-		flairThemeFile,
-		flairGeneratedCssDir,
-		userTheme,
-		buildThemeCSS,
-		refreshCssFile
-	};
-}
+		setTimeout(() => {
+			rm(path.join(flairGeneratedCssDir, previousGeneratedCssName), { force: true });
+		}, 2e3);
+	}
+	store.setFileNameToGeneratedCssNameMap(sourceFilePath, cssFilePath);
+};
 function shouldProcessFile(id, include, exclude) {
-	const isIncluded = picomatch(include || ["**/*.{js,ts,jsx,tsx}"]);
-	const isExcluded = picomatch(exclude || ["node_modules/**"]);
-	if (!isIncluded(id)) return false;
-	if (isExcluded(id)) return false;
+	const isIncluded = picomatch(include ?? ["**/*.{js,ts,jsx,tsx}"]);
+	const isExcluded = picomatch(exclude ?? ["**/node_modules/**"]);
+	if (!isIncluded(normalizeFilePath(id))) return false;
+	if (isExcluded(normalizeFilePath(id))) return false;
 	return true;
 }
+function normalizeFilePath(filePath) {
+	return filePath.replace(/\\/g, "/");
+}
 const colors = {
 	reset: "\x1B[0m",
 	fg: {
@@ -157,28 +205,42 @@ const transformCode$1 = (code, filePath, options) => {
 
 //#endregion
 //#region src/index.ts
+let initialized = false;
 async function flairJsLoader(source, sourceMap) {
 	const callback = this.async();
+	const options = this.getOptions() || {};
 	if (!callback) {
 		console.error("@flairjs/webpack-loader requires async support");
 		return;
 	}
-	const options = this.getOptions() || {};
-	const context = await initializeSharedContext(options);
 	const fileName = this.resourcePath;
 	if (!shouldProcessFile(fileName, options?.include, options?.exclude)) return callback(null, source, sourceMap);
+	let cssGeneratedDir = null;
+	let userTheme = null;
+	if (!initialized) {
+		cssGeneratedDir = await setupGeneratedCssDir();
+		userTheme = await setupUserThemeFile({ buildThemeFile: options.buildThemeFile });
+		initialized = true;
+	} else {
+		cssGeneratedDir = getGeneratedCssDir();
+		userTheme = await getUserTheme();
+	}
+	if (!cssGeneratedDir) {
+		console.error("[flairjs] Could not find generated CSS directory. Skipping processing.");
+		return callback(null, source, sourceMap);
+	}
 	try {
 		const result = transformCode$1(source, fileName, {
 			appendTimestampToCssFile: true,
 			classNameList: options?.classNameList,
 			cssPreprocessor: options?.cssPreprocessor ? (css) => options.cssPreprocessor(css, fileName) : void 0,
-			theme: context.userTheme?.theme,
-			useTheme: !!context.userTheme,
-			cssOutDir: context.flairGeneratedCssDir
+			theme: userTheme?.theme,
+			useTheme: !!userTheme,
+			cssOutDir: cssGeneratedDir
 		});
 		if (!result) return callback(null, source, sourceMap);
-		if (result.generatedCssName) context.refreshCssFile(result.generatedCssName);
-		callback(null, result.code, result.map ? JSON.parse(result.map ?? "{}") : sourceMap);
+		if (result.generatedCssName) removeOutdatedCssFiles(fileName, result.generatedCssName, { flairGeneratedCssDir: cssGeneratedDir });
+		callback(null, result.code, result.sourcemap ? JSON.parse(result.sourcemap ?? "{}") : sourceMap);
 	} catch (error) {
 		console.error("[@flairjs/webpack-loader]", error);
 		callback(error, source, sourceMap);

package/dist/types/index.d.ts

@@ -1,6 +1,33 @@
-import { SharedPluginOptions } from "@flairjs/bundler-shared";
-import { LoaderContext } from "webpack";
-interface FlairJsWebpackLoaderOptions extends SharedPluginOptions {
-}
-export default function flairJsLoader(this: LoaderContext<FlairJsWebpackLoaderOptions>, source: string, sourceMap: string): Promise<void>;
-export {};
+import { FlairThemeConfig } from '@flairjs/client';
+import { LoaderContext } from 'webpack';
+
+declare function flairJsLoader(this: LoaderContext<FlairJsWebpackLoaderOptions>, source: string, sourceMap: string): Promise<void>;
+export default flairJsLoader;
+
+declare interface FlairJsWebpackLoaderOptions extends SharedPluginOptions {
+}
+
+declare interface SharedPluginOptions {
+    /**
+     * Preprocess the extracted CSS before it is passed to lightningcss
+     * @experimental
+     * @param css the extracted css
+     * @param id the id of the file being processed
+     * @returns the processed css
+     */
+    cssPreprocessor?: (css: string, id: string) => string;
+    include?: string | string[];
+    exclude?: string | string[];
+    /**
+     * Override the default theme file content based on the user theme
+     * @param theme the user theme
+     * @returns the theme file content
+     */
+    buildThemeFile?: (theme: FlairThemeConfig) => string;
+    /**
+     * List of class names used in the project. Supports regex.
+     */
+    classNameList?: string[];
+}
+
+export { }

package/package.json

@@ -1,17 +1,6 @@
 {
   "name": "@flairjs/webpack-loader",
-  "version": "0.0.1-beta.5",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
-    },
-    "./cached-css/*": {
-      "import": "./dist/.cache/*"
-    }
-  },
+  "version": "0.0.1-beta.7",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
@@ -24,20 +13,25 @@
   },
   "peerDependencies": {
     "webpack": ">=5.0.0",
-    "@flairjs/core": "0.0.1-beta.4"
+    "@flairjs/core": "0.0.1-beta.6"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.9.4",
-    "@rollup/plugin-typescript": "^12.1.4",
+    "@biomejs/biome": "^2.2.4",
+    "@microsoft/api-extractor": "^7.52.13",
     "@types/node": "^22.8.1",
+    "rimraf": "^6.0.1",
     "rolldown": "1.0.0-beta.37",
     "typescript": "^5.8.2",
     "webpack": "^5.101.0",
-    "@flairjs/bundler-shared": "0.0.1-beta.4",
-    "@flairjs/core": "0.0.1-beta.4"
+    "@flairjs/bundler-shared": "0.0.1-beta.10",
+    "@flairjs/core": "0.0.1-beta.6"
+  },
+  "dependencies": {
+    "esbuild": "^0.25.10",
+    "picomatch": "^4.0.3"
   },
   "scripts": {
-    "build": "rolldown -c",
+    "build": "rimraf dist && tsc && api-extractor run --local && rolldown -c && rimraf dist/types-temp",
     "check": "biome check --write",
     "dev": "rolldown -w -c",
     "format": "biome format --write"