@flairjs/parcel-transformer 0.0.1-beta.1 → 0.0.1-beta.10

package/README.md

@@ -0,0 +1,154 @@
+# @flairjs/parcel-transformer
+
+Parcel transformer for Flair CSS-in-JSX.
+
+## Installation
+
+```bash
+npm install @flairjs/parcel-transformer
+```
+
+## Usage
+
+Add the transformer to your `.parcelrc` file:
+
+```json
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{tsx,jsx}": ["@flairjs/parcel-transformer", "..."]
+  }
+}
+```
+
+## Configuration
+
+You can configure the transformer by adding options to your `package.json`:
+
+```json
+{
+  "@flairjs/parcel-transformer": {
+    "include": ["src/**/*.{tsx,jsx}"],
+    "exclude": ["**/*.test.{tsx,jsx}"],
+    "classNameList": ["className", "class"]
+  }
+}
+```
+
+### Configuration Options
+
+```typescript
+interface FlairJsParcelTransformerOptions {
+  /**
+   * Preprocess the extracted CSS before it is passed to lightningcss
+   * @experimental
+   */
+  cssPreprocessor?: (css: string, id: string) => string
+  
+  /**
+   * Files to include (default: all .tsx/.jsx files)
+   */
+  include?: string | string[]
+  
+  /**
+   * Files to exclude (default: node_modules)
+   */
+  exclude?: string | string[]
+  
+  /**
+   * Override the default theme file content
+   */
+  buildThemeFile?: (theme: FlairThemeConfig) => string
+  
+  /**
+   * List of class names used in the project. Supports regex.
+   */
+  classNameList?: string[]
+}
+```
+
+## Complete Parcel Setup
+
+### 1. Install Dependencies
+
+```bash
+npm install parcel @flairjs/client @flairjs/core @flairjs/parcel-transformer
+```
+
+### 2. Create .parcelrc
+
+```json
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{tsx,jsx}": ["@flairjs/parcel-transformer", "..."]
+  }
+}
+```
+
+### 3. Package.json Scripts
+
+```json
+{
+  "scripts": {
+    "dev": "parcel src/index.html",
+    "build": "parcel build src/index.html"
+  }
+}
+```
+
+### 4. Create Theme File
+
+```typescript
+// flair.theme.ts
+import { defineConfig } from '@flairjs/client'
+
+export default defineConfig({
+  tokens: {
+    colors: {
+      primary: '#3b82f6',
+      secondary: '#64748b'
+    }
+  }
+})
+```
+
+### 5. Import Theme CSS
+
+```js
+// src/index.js
+import '@flairjs/client/theme.css'
+import { App } from './App'
+
+// Render your app
+```
+
+## React Setup
+
+```jsx
+// src/App.jsx
+import { flair } from '@flairjs/client'
+
+const App = () => {
+  return (
+    <div className="app">
+      <h1>Hello Flair!</h1>
+    </div>
+  )
+}
+
+App.flair = flair({
+  '.app': {
+    fontFamily: 'system-ui, sans-serif',
+    padding: '$space.4',
+    backgroundColor: '$colors.primary',
+    color: 'white'
+  }
+})
+
+export { App }
+```
+
+## License
+
+MIT

package/dist/cjs/index.js

@@ -43,10 +43,10 @@ let picomatch = require("picomatch");
 picomatch = __toESM(picomatch);
 let __flairjs_core = require("@flairjs/core");
 __flairjs_core = __toESM(__flairjs_core);
-let __home_runner_work_flairjs_flairjs_node_modules__pnpm__parcel_plugin_2_16_0__parcel_core_2_16_0__swc_helpers_0_5_17__node_modules__parcel_plugin_lib_PluginAPI_js = require("/home/runner/work/flairjs/flairjs/node_modules/.pnpm/@parcel+plugin@2.16.0_@parcel+core@2.16.0_@swc+helpers@0.5.17_/node_modules/@parcel/plugin/lib/PluginAPI.js");
-__home_runner_work_flairjs_flairjs_node_modules__pnpm__parcel_plugin_2_16_0__parcel_core_2_16_0__swc_helpers_0_5_17__node_modules__parcel_plugin_lib_PluginAPI_js = __toESM(__home_runner_work_flairjs_flairjs_node_modules__pnpm__parcel_plugin_2_16_0__parcel_core_2_16_0__swc_helpers_0_5_17__node_modules__parcel_plugin_lib_PluginAPI_js);
-let __home_runner_work_flairjs_flairjs_node_modules__pnpm__parcel_source_map_2_1_1_node_modules__parcel_source_map_dist_node_js = require("/home/runner/work/flairjs/flairjs/node_modules/.pnpm/@parcel+source-map@2.1.1/node_modules/@parcel/source-map/dist/node.js");
-__home_runner_work_flairjs_flairjs_node_modules__pnpm__parcel_source_map_2_1_1_node_modules__parcel_source_map_dist_node_js = __toESM(__home_runner_work_flairjs_flairjs_node_modules__pnpm__parcel_source_map_2_1_1_node_modules__parcel_source_map_dist_node_js);
+let __parcel_plugin = require("@parcel/plugin");
+__parcel_plugin = __toESM(__parcel_plugin);
+let __parcel_source_map = require("@parcel/source-map");
+__parcel_source_map = __toESM(__parcel_source_map);
 
 //#region ../shared/dist/esm/index.js
 String.raw;
@@ -100,8 +100,8 @@ var Store = class {
 };
 const store = new Store();
 const __dirname$1 = (0, node_path.dirname)((0, node_url.fileURLToPath)(require("url").pathToFileURL(__filename).href));
-const getUserTheme = async () => {
-	if (store.getUserTheme()) return store.getUserTheme();
+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");
@@ -139,11 +139,12 @@ const getGeneratedCssDir = () => {
 	const flairThemeFile = require$1.resolve("@flairjs/client/theme.css");
 	return node_path.default.resolve(flairThemeFile, "../generated-css");
 };
-const setupGeneratedCssDir = async () => {
+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 {
+		else if (clearExisting) {
 			await (0, node_fs_promises.rm)(flairGeneratedCssDir, {
 				recursive: true,
 				force: true
@@ -158,31 +159,26 @@ const setupGeneratedCssDir = async () => {
 	}
 	return flairGeneratedCssDir;
 };
-const setupUserThemeFile = async ({ buildThemeFile }) => {
+const setupUserThemeFile = async ({ buildThemeFile, onThemeFileChange, deleteBeforeWrite = false }) => {
 	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());
+		if (deleteBeforeWrite) await (0, node_fs_promises.rm)(flairThemeFile, { force: true });
 		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");
 		});
 	}
 	return userTheme;
 };
-const removeOutdatedCssFiles = async (sourceFilePath, cssFilePath, { flairGeneratedCssDir }) => {
-	const previousGeneratedCssName = store.getGeneratedCssName(sourceFilePath);
-	if (previousGeneratedCssName && previousGeneratedCssName !== cssFilePath) setTimeout(() => {
-		(0, node_fs_promises.rm)(node_path.default.join(flairGeneratedCssDir, previousGeneratedCssName), { force: true });
-	}, 2e3);
-	else 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/**"]);
@@ -234,15 +230,17 @@ const transformCode = (code, filePath, options) => {
 
 //#endregion
 //#region src/index.ts
-const SourceMap = __home_runner_work_flairjs_flairjs_node_modules__pnpm__parcel_source_map_2_1_1_node_modules__parcel_source_map_dist_node_js.default.default ?? __home_runner_work_flairjs_flairjs_node_modules__pnpm__parcel_source_map_2_1_1_node_modules__parcel_source_map_dist_node_js.default;
-var src_default = new __home_runner_work_flairjs_flairjs_node_modules__pnpm__parcel_plugin_2_16_0__parcel_core_2_16_0__swc_helpers_0_5_17__node_modules__parcel_plugin_lib_PluginAPI_js.Transformer({
+const SourceMap = __parcel_source_map.default.default ?? __parcel_source_map.default;
+let initialized = false;
+const transformer = new __parcel_plugin.Transformer({
 	async loadConfig({ config }) {
-		const getConfigResult = await config.getConfig(["tool.config.js"]);
+		const getConfigResult = await config.getConfig(["flair.config.js"]);
 		const filePath = getConfigResult?.filePath;
 		const configContents = getConfigResult?.contents;
 		if (filePath?.endsWith(".js")) config.invalidateOnStartup();
-		const cssGeneratedDir = await setupGeneratedCssDir();
-		const userTheme = await setupUserThemeFile({ buildThemeFile: configContents?.buildThemeFile });
+		const cssGeneratedDir = await setupGeneratedCssDir({ clearExisting: false });
+		const userTheme = initialized ? await getUserTheme() : await setupUserThemeFile({ buildThemeFile: configContents?.buildThemeFile });
+		if (!initialized) initialized = true;
 		return {
 			...configContents,
 			cssGeneratedDir,
@@ -257,7 +255,7 @@ var src_default = new __home_runner_work_flairjs_flairjs_node_modules__pnpm__par
 		try {
 			const code = await asset.getCode();
 			const result = transformCode(code, asset.filePath, {
-				appendTimestampToCssFile: true,
+				appendTimestampToCssFile: false,
 				classNameList: config?.classNameList,
 				cssPreprocessor: config?.cssPreprocessor ? (css) => config.cssPreprocessor(css, asset.filePath) : void 0,
 				theme: config.userTheme?.theme,
@@ -265,13 +263,14 @@ var src_default = new __home_runner_work_flairjs_flairjs_node_modules__pnpm__par
 				cssOutDir
 			});
 			if (!result) return [asset];
-			if (result.generatedCssName) removeOutdatedCssFiles(asset.filePath, result.generatedCssName, { flairGeneratedCssDir: cssOutDir });
+			if (!result.generatedCssName) return [asset];
+			asset.addURLDependency(node_path.resolve(cssOutDir, result.generatedCssName), { pipeline: "css" });
 			asset.setCode(result.code);
-			if (result.sourcemap) {
+			if (result.sourcemap) try {
 				const sourcemap = new SourceMap(options.projectRoot);
 				sourcemap.addVLQMap(JSON.parse(result.sourcemap));
 				asset.setMap(sourcemap);
-			}
+			} catch {}
 			return [asset];
 		} catch (error) {
 			logger$1.error({
@@ -282,6 +281,7 @@ var src_default = new __home_runner_work_flairjs_flairjs_node_modules__pnpm__par
 		}
 	}
 });
+var src_default = transformer;
 
 //#endregion
 module.exports = src_default;

package/dist/esm/index.js

@@ -1,6 +1,7 @@
 import module from "node:module";
 import { existsSync, watch } from "node:fs";
 import { mkdir, rm, writeFile } from "node:fs/promises";
+import * as path$2 from "node:path";
 import path, { dirname } from "node:path";
 import * as esbuild from "esbuild";
 import { existsSync as existsSync$1 } from "fs";
@@ -9,8 +10,8 @@ import path$1 from "path";
 import { pathToFileURL } from "url";
 import picomatch from "picomatch";
 import { transformCode } from "@flairjs/core";
-import { Transformer } from "/home/runner/work/flairjs/flairjs/node_modules/.pnpm/@parcel+plugin@2.16.0_@parcel+core@2.16.0_@swc+helpers@0.5.17_/node_modules/@parcel/plugin/lib/PluginAPI.js";
-import SourceMapImport from "/home/runner/work/flairjs/flairjs/node_modules/.pnpm/@parcel+source-map@2.1.1/node_modules/@parcel/source-map/dist/node.js";
+import { Transformer } from "@parcel/plugin";
+import SourceMapImport from "@parcel/source-map";
 
 //#region ../shared/dist/esm/index.js
 String.raw;
@@ -64,8 +65,8 @@ var Store = class {
 };
 const store = new Store();
 const __dirname = dirname(fileURLToPath(import.meta.url));
-const getUserTheme = async () => {
-	if (store.getUserTheme()) return store.getUserTheme();
+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");
@@ -103,11 +104,12 @@ const getGeneratedCssDir = () => {
 	const flairThemeFile = require.resolve("@flairjs/client/theme.css");
 	return path.resolve(flairThemeFile, "../generated-css");
 };
-const setupGeneratedCssDir = async () => {
+const setupGeneratedCssDir = async (options) => {
 	const flairGeneratedCssDir = getGeneratedCssDir();
+	const { clearExisting = true } = options ?? {};
 	try {
 		if (!existsSync(flairGeneratedCssDir)) await mkdir(flairGeneratedCssDir);
-		else {
+		else if (clearExisting) {
 			await rm(flairGeneratedCssDir, {
 				recursive: true,
 				force: true
@@ -122,31 +124,26 @@ const setupGeneratedCssDir = async () => {
 	}
 	return flairGeneratedCssDir;
 };
-const setupUserThemeFile = async ({ buildThemeFile }) => {
+const setupUserThemeFile = async ({ buildThemeFile, onThemeFileChange, deleteBeforeWrite = false }) => {
 	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());
+		if (deleteBeforeWrite) await rm(flairThemeFile, { force: true });
 		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");
 		});
 	}
 	return userTheme;
 };
-const removeOutdatedCssFiles = async (sourceFilePath, cssFilePath, { flairGeneratedCssDir }) => {
-	const previousGeneratedCssName = store.getGeneratedCssName(sourceFilePath);
-	if (previousGeneratedCssName && previousGeneratedCssName !== cssFilePath) setTimeout(() => {
-		rm(path.join(flairGeneratedCssDir, previousGeneratedCssName), { force: true });
-	}, 2e3);
-	else store.setFileNameToGeneratedCssNameMap(sourceFilePath, cssFilePath);
-};
 function shouldProcessFile(id, include, exclude) {
 	const isIncluded = picomatch(include ?? ["**/*.{js,ts,jsx,tsx}"]);
 	const isExcluded = picomatch(exclude ?? ["**/node_modules/**"]);
@@ -199,14 +196,16 @@ const transformCode$1 = (code, filePath, options) => {
 //#endregion
 //#region src/index.ts
 const SourceMap = SourceMapImport.default ?? SourceMapImport;
-var src_default = new Transformer({
+let initialized = false;
+const transformer = new Transformer({
 	async loadConfig({ config }) {
-		const getConfigResult = await config.getConfig(["tool.config.js"]);
+		const getConfigResult = await config.getConfig(["flair.config.js"]);
 		const filePath = getConfigResult?.filePath;
 		const configContents = getConfigResult?.contents;
 		if (filePath?.endsWith(".js")) config.invalidateOnStartup();
-		const cssGeneratedDir = await setupGeneratedCssDir();
-		const userTheme = await setupUserThemeFile({ buildThemeFile: configContents?.buildThemeFile });
+		const cssGeneratedDir = await setupGeneratedCssDir({ clearExisting: false });
+		const userTheme = initialized ? await getUserTheme() : await setupUserThemeFile({ buildThemeFile: configContents?.buildThemeFile });
+		if (!initialized) initialized = true;
 		return {
 			...configContents,
 			cssGeneratedDir,
@@ -221,7 +220,7 @@ var src_default = new Transformer({
 		try {
 			const code = await asset.getCode();
 			const result = transformCode$1(code, asset.filePath, {
-				appendTimestampToCssFile: true,
+				appendTimestampToCssFile: false,
 				classNameList: config?.classNameList,
 				cssPreprocessor: config?.cssPreprocessor ? (css) => config.cssPreprocessor(css, asset.filePath) : void 0,
 				theme: config.userTheme?.theme,
@@ -229,13 +228,14 @@ var src_default = new Transformer({
 				cssOutDir
 			});
 			if (!result) return [asset];
-			if (result.generatedCssName) removeOutdatedCssFiles(asset.filePath, result.generatedCssName, { flairGeneratedCssDir: cssOutDir });
+			if (!result.generatedCssName) return [asset];
+			asset.addURLDependency(path$2.resolve(cssOutDir, result.generatedCssName), { pipeline: "css" });
 			asset.setCode(result.code);
-			if (result.sourcemap) {
+			if (result.sourcemap) try {
 				const sourcemap = new SourceMap(options.projectRoot);
 				sourcemap.addVLQMap(JSON.parse(result.sourcemap));
 				asset.setMap(sourcemap);
-			}
+			} catch {}
 			return [asset];
 		} catch (error) {
 			logger$1.error({
@@ -246,6 +246,7 @@ var src_default = new Transformer({
 		}
 	}
 });
+var src_default = transformer;
 
 //#endregion
 export { src_default as default };

package/dist/types/index.d.ts

@@ -1,14 +1,33 @@
-import { Transformer } from "@parcel/plugin";
-declare const _default: Transformer<{
-    cssGeneratedDir: string | null;
-    userTheme: {
-        theme: any;
-        originalPath: string;
-    } | null;
-    cssPreprocessor?: (css: string, id: string) => string;
-    include?: string | string[];
-    exclude?: string | string[];
-    buildThemeFile?: (theme: import("@flairjs/client").FlairThemeConfig) => string;
-    classNameList?: string[];
-}>;
-export default _default;
+import { FlairThemeConfig } from '@flairjs/client';
+import type { Transformer } from '@parcel/plugin';
+
+export declare interface FlairJsParcelTransformerOptions 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[];
+}
+
+declare const transformer: Transformer<FlairJsParcelTransformerOptions>;
+export default transformer;
+
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flairjs/parcel-transformer",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.10",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
@@ -13,26 +13,30 @@
   },
   "peerDependencies": {
     "parcel": ">=2.0.0",
-    "@flairjs/core": "0.0.1-beta.5"
+    "@flairjs/core": "0.0.1-beta.8"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.9.4",
-    "@parcel/plugin": "^2.16.0",
-    "@parcel/source-map": "^2.1.1",
-    "@rollup/plugin-typescript": "^12.1.4",
+    "@biomejs/biome": "^2.2.4",
+    "@microsoft/api-extractor": "^7.52.13",
     "@types/node": "^22.8.1",
     "parcel": "^2.16.0",
+    "rimraf": "^6.0.1",
     "rolldown": "1.0.0-beta.37",
     "typescript": "^5.8.2",
-    "@flairjs/bundler-shared": "0.0.1-beta.8",
-    "@flairjs/core": "0.0.1-beta.5"
+    "@flairjs/bundler-shared": "0.0.1-beta.14",
+    "@flairjs/core": "0.0.1-beta.8"
+  },
+  "engines": {
+    "parcel": ">=2.0.0"
   },
   "dependencies": {
+    "@parcel/plugin": "^2.16.0",
+    "@parcel/source-map": "^2.1.1",
     "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"