an unofficial stylex vite plugin
npm install vite-plugin-stylex-dev> [!WARNING]
> This is an unofficial repo.
> This plugin is dedicated to providing stable stylex integration.
- [x] CSS automatic injection
- [x] Support HMR
- [x] Control css order by manually
- [x] Support Vite-based SSR framework
``bash`
$ yarn add vite-plugin-stylex-dev -D
`ts
// vite.config.ts
import { defineConfig } from 'vite'
import { stylex } from 'vite-plugin-stylex-dev'
export default defineConfig({
plugins: [stylex()]
})
// then find your project entry(If you don't using manuallyControlCssOrder option)
import 'virtual:stylex.css'
`
| params | type | default | description |
| --------------------------- | --------------------------------------------- | ---------------------------------------------- | ---------------------------------------------------- |
| include | string \| RegExp \| Array | /\.(mjs\|js\|ts\|vue\|jsx\|tsx)(\?.*\|)$/ | Include all assets matching any of these conditions. |exclude
| | string \| RegExp \| Array | - | Exclude all assets matching any of these conditions. |importSources
| | string[] | ['stylex', '@stylexjs/stylex'] | See stylex document. |babelConfig
| | object | {} | Babel config for stylex |unstable_moduleResolution
| | Record | { type: 'commonJS', rootDir: process.cwd() } | See stylex document |useCSSLayers
| | boolean | false | See stylex document |optimizedDeps
| | Array | [] | Work with external stylex files or libraries |manuallyControlCssOrder
| | boolean \|object | false | control css order by manually |enableStylexExtend
| | boolean \| StylexExtendOptions | false | see @stylex-extend/babel-plugin` docss |
Kanno