feat: add Vite plugin

apps/website/docs/react/ahead-of-time-compilation/with-vite.md

@@ -0,0 +1,41 @@
+---
+sidebar_position: 2
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# With Webpack
+
+## Install
+
+<Tabs>
+<TabItem value="yarn" label="Yarn">
+
+```shell
+yarn add --dev @griffel/tag-processor @griffel/vite-plugin
+```
+
+</TabItem>
+<TabItem value="npm" label="NPM">
+
+```shell
+npm install --save-dev @griffel/tag-processor @griffel/vite-plugin
+```
+
+</TabItem>
+</Tabs>
+
+## Usage
+
+After installation, add the plugin to your `vite.config.js`:
+
+```js
+import { defineConfig } from 'vite';
+import griffel from '@griffel/vite-plugin';
+
+export default defineConfig({
+  // ...
+  plugins: [griffel()],
+});
+```

change/@griffel-tag-processor-a06f06b2-52aa-4ba3-ab1b-ffe6098ea909.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: bump @wyw-in-js/processor-utils",
+  "packageName": "@griffel/tag-processor",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@griffel-vite-plugin-59a866c1-5134-4a4d-b18e-9fa4e832d0e3.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: initial release",
+  "packageName": "@griffel/vite-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -76,7 +76,6 @@
     "@typescript-eslint/eslint-plugin": "6.18.1",
     "@typescript-eslint/parser": "6.18.1",
     "@uifabric/merge-styles": "7.19.1",
-    "@wyw-in-js/processor-utils": "^0.2.2",
     "babel-jest": "29.4.3",
     "babel-loader": "8.1.0",
     "babel-plugin-annotate-pure-calls": "0.4.0",
@@ -137,6 +136,7 @@
     "ts-node": "10.9.1",
     "tsconfig-paths": "4.1.1",
     "typescript": "5.2.2",
+    "vite": "^4.5.2",
     "webpack": "5.89.0",
     "webpack-merge": "5.10.0",
     "yargs": "^17.5.1"
@@ -152,6 +152,8 @@
     "@linaria/babel-preset": "^3.0.0-beta.24",
     "@linaria/shaker": "^3.0.0-beta.22",
     "@typescript-eslint/utils": "^6.18.1",
+    "@wyw-in-js/processor-utils": "^0.2.3",
+    "@wyw-in-js/vite": "^0.2.3",
     "ajv": "^8.4.0",
     "browserslist": "^4.19.1",
     "csstype": "^3.1.3",

packages/tag-processor/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@griffel/core": "^1.15.2",
-    "@wyw-in-js/processor-utils": "^0.2.2",
+    "@wyw-in-js/processor-utils": "^0.2.3",
     "stylis": "^4.2.0",
     "tslib": "^2.1.0"
   },

packages/vite-plugin/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "__fixtures__/*/output.ts"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/vite-plugin/README.md

@@ -0,0 +1,36 @@
+# @griffel/vite-plugin
+
+The package contains a plugin for [Vite](https://vitejs.dev/).
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Installation](#installation)
+- [Usage](#usage)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Installation
+
+```shell
+# npm
+npm i -D @griffel/tag-processor @griffel/vite-plugin
+# yarn
+yarn add --dev @griffel/tag-processor @griffel/vite-plugin
+```
+
+## Usage
+
+After installation, add the plugin to your `vite.config.js`:
+
+```js
+import { defineConfig } from 'vite';
+import griffel from '@griffel/vite-plugin';
+
+export default defineConfig({
+  // ...
+  plugins: [griffel()],
+});
+```
+
+

packages/vite-plugin/jest.config.ts

@@ -0,0 +1,17 @@
+/* eslint-disable */
+export default {
+  displayName: 'vite-plugin',
+  preset: '../../jest.preset.js',
+  globals: {},
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]sx?$': [
+      'ts-jest',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+      },
+    ],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  coverageDirectory: '../../coverage/packages/vite-plugin',
+};

packages/vite-plugin/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@griffel/vite-plugin",
+  "version": "0.0.1",
+  "description": "Vite plugin for Griffel",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/griffel"
+  },
+  "dependencies": {
+    "@wyw-in-js/vite": "^0.2.3"
+  },
+  "peerDependencies": {
+    "@griffel/tag-processor": "*",
+    "vite": ">=4"
+  }
+}

packages/vite-plugin/project.json

@@ -0,0 +1,47 @@
+{
+  "name": "@griffel/vite-plugin",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/vite-plugin/src",
+  "projectType": "library",
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/packages/vite-plugin"],
+      "options": {
+        "jestConfig": "packages/vite-plugin/jest.config.ts"
+      }
+    },
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/vite-plugin",
+        "tsConfig": "packages/vite-plugin/tsconfig.lib.json",
+        "skipTypeField": true,
+        "packageJson": "packages/vite-plugin/package.json",
+        "main": "packages/vite-plugin/src/index.ts",
+        "assets": [
+          "packages/vite-plugin/README.md",
+          {
+            "glob": "LICENSE.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "type-check": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "packages/vite-plugin",
+        "commands": [{ "command": "tsc -b --pretty" }],
+        "outputPath": []
+      }
+    }
+  },
+  "tags": []
+}

packages/vite-plugin/src/index.ts

@@ -0,0 +1 @@
+export { vitePlugin as default } from './vitePlugin';

packages/vite-plugin/src/vitePlugin.ts

@@ -0,0 +1 @@
+export { default as vitePlugin } from '@wyw-in-js/vite';

packages/vite-plugin/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

packages/vite-plugin/tsconfig.lib.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node", "environment"]
+  },
+  "exclude": ["__fixtures__/*/*.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"],
+  "include": ["**/*.ts"]
+}

packages/vite-plugin/tsconfig.spec.json

@@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "environment"]
+  },
+  "include": [
+    "__fixtures__/*/code.ts",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts",
+    "jest.config.ts"
+  ]
+}

tsconfig.base.json

@@ -28,6 +28,7 @@
       "@griffel/tag-processor": ["packages/tag-processor/src/index.ts"],
       "@griffel/tag-processor/make-reset-styles": ["packages/tag-processor/src/MakeResetStylesProcessor.ts"],
       "@griffel/tag-processor/make-styles": ["packages/tag-processor/src/MakeStylesProcessor.ts"],
+      "@griffel/vite-plugin": ["packages/vite-plugin/src/index.ts"],
       "@griffel/webpack-extraction-plugin": ["packages/webpack-extraction-plugin/src/index.ts"],
       "@griffel/webpack-loader": ["packages/webpack-loader/src/index.ts"]
     },