feat: add Vite plugin

package.json

@@ -47,10 +47,12 @@
     "@nrwl/web": "15.3.3",
     "@nrwl/workspace": "15.3.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
+    "@rspack/cli": "^0.3.6",
     "@storybook/addon-essentials": "6.5.15",
     "@storybook/builder-webpack5": "6.5.15",
     "@storybook/manager-webpack5": "6.5.15",
     "@storybook/react": "6.5.15",
+    "@swc/core": "^1.3.19",
     "@testing-library/jest-dom": "5.16.1",
     "@testing-library/react": "13.4.0",
     "@tsconfig/docusaurus": "^1.0.4",
@@ -74,7 +76,6 @@
     "@typescript-eslint/eslint-plugin": "5.47.0",
     "@typescript-eslint/parser": "5.47.0",
     "@uifabric/merge-styles": "7.19.1",
-    "@wyw-in-js/processor-utils": "^0.2.2",
     "babel-jest": "28.1.3",
     "babel-loader": "8.1.0",
     "babel-plugin-annotate-pure-calls": "^0.4.0",
@@ -111,6 +112,7 @@
     "lz-string": "1.4.4",
     "memfs": "3.4.12",
     "mini-css-extract-plugin": "2.6.0",
+    "module-alias": "^2.2.3",
     "monosize": "0.0.9",
     "monosize-storage-upstash": "0.0.8",
     "nano-staged": "0.5.0",
@@ -137,6 +139,7 @@
     "tsconfig-paths": "4.1.1",
     "typescript": "4.8.4",
     "url-loader": "^4.1.1",
+    "vite": "^4.5.1",
     "webpack": "^5.76.0",
     "webpack-merge": "^5.8.0",
     "yargs": "^17.5.1"
@@ -151,9 +154,9 @@
     "@emotion/hash": "^0.9.0",
     "@linaria/babel-preset": "^3.0.0-beta.24",
     "@linaria/shaker": "^3.0.0-beta.22",
-    "@rspack/cli": "^0.3.6",
-    "@swc/core": "^1.3.19",
     "@typescript-eslint/utils": "^5.47.0",
+    "@wyw-in-js/processor-utils": "^0.2.2",
+    "@wyw-in-js/vite": "^0.2.2",
     "ajv": "^8.4.0",
     "browserslist": "^4.19.1",
     "csstype": "^3.1.3",

packages/react/package.json

@@ -8,6 +8,12 @@
     "url": "https://github.com/microsoft/griffel"
   },
   "sideEffects": false,
+  "wyw-in-js": {
+    "tags": {
+      "makeStyles": "@griffel/tag-processor/make-styles",
+      "makeResetStyles": "@griffel/tag-processor/make-reset-styles"
+    }
+  },
   "dependencies": {
     "@griffel/core": "^1.15.1",
     "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/jest.config.ts

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

packages/vite-plugin/package.json

@@ -0,0 +1,16 @@
+{
+  "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.2"
+  },
+  "peerDependencies": {
+    "vite": ">=4"
+  }
+}

packages/vite-plugin/project.json

@@ -0,0 +1,44 @@
+{
+  "name": "@griffel/vite-plugin",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/vite-plugin/src",
+  "projectType": "library",
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["packages/vite-plugin/**/*.ts"]
+      }
+    },
+    "test": {
+      "executor": "nx:run-commands",
+      "outputs": ["{workspaceRoot}/coverage/packages/vite-plugin"],
+      "options": {
+        "commands": [{ "command": "node --test **/*.test.mjs" }],
+        "passWithNoTests": true
+      }
+    },
+    "build": {
+      "executor": "@nrwl/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/vite-plugin",
+        "tsConfig": "packages/vite-plugin/tsconfig.lib.json",
+        "packageJson": "packages/vite-plugin/package.json",
+        "main": "packages/vite-plugin/src/index.ts",
+        "updateBuildableProjectDepsInPackageJson": false,
+        "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/make-styles": ["packages/tag-processor/src/MakeStylesProcessor.ts"],
       "@griffel/tag-processor/make-reset-styles": ["packages/tag-processor/src/MakeResetStylesProcessor.ts"],
       "@griffel/react": ["packages/react/src/index.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"]
     },

workspace.json

@@ -15,6 +15,7 @@
     "@griffel/react": "packages/react",
     "@griffel/style-types": "packages/style-types",
     "@griffel/tag-processor": "packages/tag-processor",
+    "@griffel/vite-plugin": "packages/vite-plugin",
     "@griffel/webpack-extraction-plugin": "packages/webpack-extraction-plugin",
     "@griffel/webpack-loader": "packages/webpack-loader",
     "@griffel/website": "apps/website"