diff --git a/README.md b/README.md index c312eea85..3332a6030 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,7 @@ This repository is a `mono-repo` containing multiple `packages` that together co | [webpack-plugin](./packages/webpack-plugin) | `@stylable/webpack-plugin` | [![npm version](https://img.shields.io/npm/v/@stylable/webpack-plugin.svg)](https://www.npmjs.com/package/@stylable/webpack-plugin) | `webpack` (`^5.30.0`) integration plugin | | [experimental-loader](./packages/experimental-loader) | `@stylable/experimental-loader` | [![npm version](https://img.shields.io/npm/v/@stylable/experimental-loader.svg)](https://www.npmjs.com/package/@stylable/experimental-loader) | experimental `webpack` loader - not recommended for production use | | [rollup-plugin](./packages/rollup-plugin) | `@stylable/rollup-plugin` | [![npm version](https://img.shields.io/npm/v/@stylable/rollup-plugin.svg)](https://www.npmjs.com/package/@stylable/rollup-plugin) | Rollup (`v2.x`) integration plugin | +| [vite-plugin](./packages/vite-plugin) | `@stylable/vite-plugin` | [![npm version](https://img.shields.io/npm/v/@stylable/vite-plugin.svg)](https://www.npmjs.com/package/@stylable/vite-plugin) | Vite (`v4.x`) integration plugin | | [esbuild](./packages/esbuild) | `@stylable/esbuild` | [![npm version](https://img.shields.io/npm/v/@stylable/rollup-plugin.svg)](https://www.npmjs.com/package/@stylable/esbuild) | esbuild integration plugin | ### Test-kits diff --git a/packages/vite-plugin/README.md b/packages/vite-plugin/README.md new file mode 100644 index 000000000..13e85457b --- /dev/null +++ b/packages/vite-plugin/README.md @@ -0,0 +1,55 @@ + +# @stylable/vite-plugin + +[![npm version](https://img.shields.io/npm/v/@stylable/vite-plugin.svg)](https://www.npmjs.com/package/@stylable/vite-plugin) + +### Installation + +`npm i @stylable/vite-plugin -D` + +or + +`yarn add @stylable/vite-plugin --dev` + +### Example Usage +```js +// vite.config.js +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import { viteStylable } from '@stylable/vite'; + +export default defineConfig({ + plugins: [react(), viteStylable({})], +}); + + +``` +> If you use any other vite CSS plugins you should exclude Stylable files (`*.st.css`) from them. + + +### Plugin Options + +```ts +export interface StylableVitePluginOptions { + optimization?: { + minify?: boolean; + }; + inlineAssets?: boolean | ((filepath: string, buffer: Buffer) => boolean); + fileName?: string; + mode?: 'development' | 'production'; + diagnosticsMode?: DiagnosticsMode; + resolveNamespace?: typeof resolveNamespaceNode; + /** + * Runs "stc" programmatically with the webpack compilation. + * true - it will automatically detect the closest "stylable.config.js" file and use it. + * string - it will use the provided string as the "stcConfig" file path. + */ + stcConfig?: boolean | string; + projectRoot?: string; +} +``` + +> This package provides a **naive** Stylable vite plugin. It is in early development stages and may not behave expectedly in all cases. Please open a PR/issue if you encounter any problems. + +## License +Copyright (c) 2024 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by an [MIT license](./LICENSE).