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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flairjs/webpack-loader",
-  "version": "0.0.1-beta.8",
+  "version": "0.0.1-beta.9",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
@@ -13,7 +13,7 @@
   },
   "peerDependencies": {
     "webpack": ">=5.0.0",
-    "@flairjs/core": "0.0.1-beta.7"
+    "@flairjs/core": "0.0.1-beta.8"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.2.4",
@@ -23,8 +23,8 @@
     "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-beta.13",
+    "@flairjs/core": "0.0.1-beta.8"
   },
   "dependencies": {
     "esbuild": "^0.25.10",