docs: add vite-plugin to readmes

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

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