Setup dependencies

package.json

@@ -11,6 +11,8 @@
   "dependencies": {
     "@styled-system/css": "^5.1.5",
     "@styled-system/should-forward-prop": "^5.1.5",
+    "@vanilla-extract/css": "^1.14.1",
+    "@vanilla-extract/recipes": "^0.5.1",
     "react-select": "^5.8.0",
     "styled-system": "^5.1.5"
   },
@@ -46,9 +48,11 @@
     "@types/react-dom": "^18.2.19",
     "@types/styled-system": "^5.1.22",
     "@types/styled-system__css": "^5.0.21",
+    "@vanilla-extract/vite-plugin": "^4.0.4",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-styled-components": "^2.1.4",
     "cheerio": "^1.0.0-rc.12",
+    "css-loader": "^6.10.0",
     "gh-pages": "^6.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -67,6 +71,7 @@
     "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "storybook": "^7.6.17",
+    "style-loader": "^3.3.4",
     "styled-components": "^6.1.8",
     "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",

vite.config.ts

@@ -1,7 +1,8 @@
-import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vite'
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  plugins: [react(), vanillaExtractPlugin()],
+});