Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eryue0220/unplugin-stylex
StyleX integration for Vite, esbuild, webpack, rollup and rspack.
https://github.com/eryue0220/unplugin-stylex
Last synced: about 1 month 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 (6 months ago)
- Default Branch: main
- Last Pushed: 2024-05-10T11:09:03.000Z (about 1 month ago)
- Last Synced: 2024-05-10T12:26:07.531Z (about 1 month ago)
- Language: TypeScript
- Homepage:
- Size: 377 KB
- Stars: 16
- Watchers: 2
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-rspack - unplugin-stylex
README
# unplugin-stylex · [](https://github.com/eryue0220/unplugin-stylex/blob/main/LICENSE) [](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 */ }),
],
}
```
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)