https://github.com/nonzzz/vite-plugin-stylex

an unofficial @stylexjs vite support
https://github.com/nonzzz/vite-plugin-stylex

ssr stylexjs vite-plugin

Last synced: 5 days ago
JSON representation

an unofficial @stylexjs vite support

• Host: GitHub
• URL: https://github.com/nonzzz/vite-plugin-stylex
• Owner: nonzzz
• License: mit
• Created: 2023-12-07T08:54:21.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-07-08T03:24:22.000Z (6 months ago)
• Last Synced: 2024-12-30T09:12:27.383Z (12 days ago)
• Topics: ssr, stylexjs, vite-plugin
• Language: TypeScript
• Homepage:
• Size: 2.77 MB
• Stars: 51
• Watchers: 3
• Forks: 4
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![vite-plugin-stylex](https://socialify.git.ci/nonzzz/vite-plugin-stylex/image?description=1&font=Jost&language=1&logo=https%3A%2F%2Fvitejs.dev%2Flogo-with-shadow.png&name=1&owner=1&theme=Auto)

> [!WARNING]

> This is an unofficial repo.

> This plugin is dedicated to providing stable stylex integration.

## Features

- [x] CSS automatic injection

- [x] Support HMR

- [x] Control css order by manually

- [x] Support Vite-based SSR framework

## Usage

```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'

```

## Options

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

## Q & A

[Q&A](./Q&A.md)

## Author

Kanno

## LICENSE

[MIT](./LICENSE)