https://github.com/eryue0220/unplugin-stylex

StyleX integration for Vite, esbuild, webpack, rollup and rspack.
https://github.com/eryue0220/unplugin-stylex

Last synced: 2 months ago
JSON representation

StyleX integration for Vite, esbuild, webpack, rollup and rspack.

• Host: GitHub
• URL: https://github.com/eryue0220/unplugin-stylex
• Owner: eryue0220
• License: mit
• Created: 2023-12-22T14:47:46.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-29T04:56:30.000Z (2 months ago)
• Last Synced: 2024-10-29T05:30:53.447Z (2 months ago)
• Language: TypeScript
• Homepage:
• Size: 762 KB
• Stars: 18
• Watchers: 2
• Forks: 2
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-rspack - unplugin-stylex

README

        
# unplugin-stylex · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/eryue0220/unplugin-stylex/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/unplugin-stylex.svg?style=flat)](https://www.npmjs.com/package/unplugin-stylex)

> [!WARNING]  

> This plugin is in early development and may not work as expected. Please report any issues you find.

## Installation

Install the package from the following command

```shell

npm install unplugin-stylex --save-dev

```

or with yarn:

```shell

yarn add unplugin-stylex --save-dev

```

or with pnpm:

```shell

pnpm i unplugin-stylex --save-dev

```

## Configuration

Vite


```js

// vite.config.js

import { defineConfig } from 'vite'

import stylexPlugin from 'unplugin-stylex/vite'

export default defineConfig({

  plugins: [

    stylexPlugin({ /* options */}),

  ],

})

```

esbuild


```js

// esbuild.config.js

import { build } from 'esbuild'

import stylexPlugin from 'unplugin-stylex/esbuild'

export default {

  plugins: [

    stylexPlugin({ /* options */ }),

  ],

}

```

farm


```js

// farm.config.js

import { defineConfig } from '@farmfe/core'

import stylexPlugin from 'unplugin-stylex/farm'

export default defineConfig({

  // other rollup config

  plugins: [

    stylexPlugin({ /* options */}),

  ],

})

```

rspack


```js

// rspack.config.js

import stylexPlugin from 'unplugin-stylex/rspack'

module.exports = {

  // other rspack config

  plugins: [

    stylexPlugin({ /* options */}),

  ],

}

```

rollup


```js

// rollup.config.js

import stylexRollupPlugin from 'unplugin-stylex/rollup'

export default {

  // other rollup config

  plugins: [

    stylexRollupPlugin({ /* options */}),

  ],

}

```

webpack


```js

// webpack.config.js

import stylexWebpackPlugin from 'unplugin-stylex/webpack'

module.exports = {

  // other webpack config

  plugins: [

    stylexWebpackPlugin({ /* options */}),

  ],

}

```

## Usage

More detail usage can check [examples](https://github.com/eryue0220/unplugin-stylex/tree/main/examples)

## Options

Current support argument, which may have change in the future

### options.dev

#### options.stylex.runtimeInjection

#### options.stylex.classNamePrefix

#### options.stylex.useCSSLayers

#### options.stylex.babelConfig

#### options.stylex.stylexImports

#### options.stylex.unstable_moduleResolution

# Acknowledgments

- [@stylexjs/rollup-plugin](https://github.com/facebook/stylex/tree/main/packages/rollup-plugin)

- [vite-plugin-stylex](https://github.com/HorusGoul/vite-plugin-stylex)