open-index/open-npm huggingface dataset:
npm package: @flairjs/parcel-transformer
Description: Parcel transformer for Flair CSS-in-JSX.
Latest version: 0.1.0

# @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
npm package: @flairjs/rollup-plugin
Description: Rollup plugin for Flair CSS-in-JSX.
Latest version: 0.1.0

# @flairjs/rollup-plugin

Rollup plugin for Flair CSS-in-JSX.

## Installation

```bash
npm install @flairjs/rollup-plugin
```

## Usage

```js
// rollup.config.js
import flairjs from '@flairjs/rollup-plugin'
import { nodeResolve } from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import babel from '@rollup/plugin-babel'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    flairjs(), // Add before babel
    babel({
      babelHelpers: 'bundled',
      presets: ['@babel/preset-react']
    }),
    nodeResolve(),
    commonjs()
  ]
}
```

## Configuration

```typescript
interface FlairJsRollupPluginOptions {
  /**
   * 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[]
}
```

### Example with Options

```js
// rollup.config.js
import flairjs from '@flairjs/rollup-plugin'

export default {
  plugins: [
    flairjs({
      // Only process source files
      include: ['src/**/*.{tsx,jsx}'],
      
      // Exclude test files
      exclude: ['**/*.test.{tsx,jsx}'],
      
    })
  ]
}
```

## Plugin Order

Ensure the Flair plugin runs before JSX transformation:

```js
export default {
  plugins: [
    flairjs(),     // 1. Process Flair styles first
    babel({        // 2. Then transform JSX
      presets: ['@babel/preset-react']
    }),
    nodeResolve(), // 3. Resolve imports
    commonjs()     // 4. Handle CommonJS
  ]
}
```

## CSS Handling

The plugin generates CSS files that need to be handled by your build process:

```js
// rollup.config.js
import css from 'rollup-plugin-css-only'

export default {
  plugins: [
    flairjs(),
    css({ output: 'dist/styles.css' }), // Handle generated CSS
    // other plugins...
  ]
}
```

## 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 CSS in your application:

```js
// src/index.js
import '@flairjs/client/theme.css'
// your app code...
```

## License

MIT
npm package: @flairjs/vite-plugin
Description: Vite plugin for Flair CSS-in-JSX.
Latest version: 0.1.0

# @flairjs/vite-plugin

Vite plugin for Flair CSS-in-JSX.

## Installation

```bash
npm install @flairjs/vite-plugin
```

## Usage

```js
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import flairjs from '@flairjs/vite-plugin'

export default defineConfig({
  plugins: [
    react(),
    flairjs({
      // Optional configuration
    })
  ]
})
```

## Configuration

```typescript
interface FlairJsVitePluginOptions {
  /**
   * 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[]
}
```

### Example with Options

```js
// vite.config.js
import flairjs from '@flairjs/vite-plugin'

export default {
  plugins: [
    flairjs({
      // Only process files in src directory
      include: ['src/**/*.{tsx,jsx}'],
      
      // Exclude test files
      exclude: ['**/*.test.{tsx,jsx}', '**/*.spec.{tsx,jsx}'],
      
      // Specify known class names for optimization
      classNameList: ["className", "class"]
    })
  ]
}
```

## Features

- **Hot Module Replacement** - Styles update instantly during development
- **Theme File Watching** - Automatically rebuilds when `flair.theme.ts` changes
- **CSS Import Resolution** - Handles `@flairjs/client/theme.css` imports
- **Development Optimization** - Fast rebuilds with intelligent caching


## Theme Integration

The plugin automatically detects and processes your `flair.theme.ts` file:

```typescript
// flair.theme.ts
import { defineConfig } from '@flairjs/client'

export default defineConfig({
  tokens: {
    colors: {
      primary: '#3b82f6'
    }
  }
})
```

The theme CSS is available via:

```js
import '@flairjs/client/theme.css'
```


## License

MIT
npm package: @flairjs/webpack-loader
Description: Webpack loader for Flair CSS-in-JSX.
Latest version: 0.1.0

# @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