@flairjs/webpack-loader 0.0.1-beta.8 → 0.0.1

package/README.md

@@ -0,0 +1,146 @@
+# @flairjs/webpack-loader
+
+Webpack loader for Flair CSS-in-JSX.
+
+## Installation
+
+```bash
+npm install @flairjs/webpack-loader
+```
+
+## Usage
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(tsx|jsx)$/,
+        use: [
+          '@flairjs/webpack-loader'
+        ],
+        exclude: /node_modules/
+      }
+    ]
+  }
+}
+```
+
+## Configuration
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(tsx|jsx)$/,
+        use: [
+          'babel-loader',
+          {
+            loader: '@flairjs/webpack-loader',
+            options: {
+              // Configuration options
+              cssPreprocessor: (css, id) => {
+                // Custom CSS preprocessing
+                return css
+              },
+              include: ['src/**/*.{tsx,jsx}'],
+              exclude: ['**/*.test.{tsx,jsx}'],
+              classNameList: ["className", "class"]
+            }
+          },
+        ]
+      }
+    ]
+  }
+}
+```
+
+### Configuration Options
+
+```typescript
+interface FlairJsWebpackLoaderOptions {
+  /**
+   * 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[]
+}
+```
+
+## CSS Handling
+
+Ensure your webpack configuration can handle CSS files:
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      // Flair loader
+      {
+        test: /\.(tsx|jsx)$/,
+        use: ['@flairjs/webpack-loader']
+      },
+      // CSS loader for generated styles
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      }
+    ]
+  }
+}
+```
+
+
+## Theme Integration
+
+Create a `flair.theme.ts` in your project root:
+
+```typescript
+// flair.theme.ts
+import { defineConfig } from '@flairjs/client'
+
+export default defineConfig({
+  tokens: {
+    colors: {
+      primary: '#3b82f6',
+      secondary: '#64748b'
+    }
+  }
+})
+```
+
+Import the theme in your entry file:
+
+```js
+// src/index.js
+import '@flairjs/client/theme.css'
+import './App'
+```
+
+## License
+
+MIT

package/dist/cjs/index.js

@@ -239,7 +239,7 @@ async function flairJsLoader(source, sourceMap) {
 	let cssGeneratedDir = null;
 	let userTheme = null;
 	if (!initialized) {
-		cssGeneratedDir = await setupGeneratedCssDir();
+		cssGeneratedDir = await setupGeneratedCssDir({ clearExisting: this.mode !== "production" });
 		userTheme = await setupUserThemeFile({
 			buildThemeFile: options.buildThemeFile,
 			deleteBeforeWrite: true
@@ -265,7 +265,11 @@ async function flairJsLoader(source, sourceMap) {
 		if (!result) return callback(null, source, sourceMap);
 		if (!result.generatedCssName) return callback(null, source, sourceMap);
 		this.addDependency(path.resolve(result.generatedCssName));
-		callback(null, result.code, result.sourcemap ? JSON.parse(result.sourcemap ?? "{}") : sourceMap);
+		let resultSourcemap = null;
+		if (result.sourcemap) try {
+			resultSourcemap = JSON.parse(result.sourcemap);
+		} catch {}
+		callback(null, result.code, resultSourcemap ?? sourceMap);
 	} catch (error) {
 		console.error("[@flairjs/webpack-loader]", error);
 		callback(error, source, sourceMap);

package/dist/esm/index.js

@@ -206,7 +206,7 @@ async function flairJsLoader(source, sourceMap) {
 	let cssGeneratedDir = null;
 	let userTheme = null;
 	if (!initialized) {
-		cssGeneratedDir = await setupGeneratedCssDir();
+		cssGeneratedDir = await setupGeneratedCssDir({ clearExisting: this.mode !== "production" });
 		userTheme = await setupUserThemeFile({
 			buildThemeFile: options.buildThemeFile,
 			deleteBeforeWrite: true
@@ -232,7 +232,11 @@ async function flairJsLoader(source, sourceMap) {
 		if (!result) return callback(null, source, sourceMap);
 		if (!result.generatedCssName) return callback(null, source, sourceMap);
 		this.addDependency(path$2.resolve(result.generatedCssName));
-		callback(null, result.code, result.sourcemap ? JSON.parse(result.sourcemap ?? "{}") : sourceMap);
+		let resultSourcemap = null;
+		if (result.sourcemap) try {
+			resultSourcemap = JSON.parse(result.sourcemap);
+		} catch {}
+		callback(null, result.code, resultSourcemap ?? sourceMap);
 	} catch (error) {
 		console.error("[@flairjs/webpack-loader]", error);
 		callback(error, source, sourceMap);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flairjs/webpack-loader",
-  "version": "0.0.1-beta.8",
+  "version": "0.0.1",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
@@ -12,8 +12,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "webpack": ">=5.0.0",
-    "@flairjs/core": "0.0.1-beta.7"
+    "webpack": ">=5.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.2.4",
@@ -23,12 +22,12 @@
     "rolldown": "1.0.0-beta.37",
     "typescript": "^5.8.2",
     "webpack": "^5.101.0",
-    "@flairjs/bundler-shared": "0.0.1-beta.11",
-    "@flairjs/core": "0.0.1-beta.7"
+    "@flairjs/bundler-shared": "0.0.1"
   },
   "dependencies": {
     "esbuild": "^0.25.10",
-    "picomatch": "^4.0.3"
+    "picomatch": "^4.0.3",
+    "@flairjs/core": "0.0.1"
   },
   "scripts": {
     "build": "rimraf dist && tsc && api-extractor run --local && rolldown -c && rimraf dist/types-temp",