build(theme): generate css file

packages/theme/package.json

@@ -8,6 +8,9 @@
   "exports": {
     ".": "./src/index.ts"
   },
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public",
     "main": "dist/index.umd.cjs",
@@ -17,10 +20,12 @@
         "types": "./dist/index.d.ts",
         "import": "./dist/index.js",
         "require": "./dist/index.umd.cjs"
-      }
+      },
+      "./style.css": "./dist/style.css"
     }
   },
   "devDependencies": {
+    "@vanilla-extract/vite-plugin": "^3.8.0",
     "vite": "^4.3.4",
     "vite-plugin-dts": "^2.3.0"
   }

packages/theme/src/index.css.ts

@@ -0,0 +1,11 @@
+import { globalStyle } from '@vanilla-extract/css';
+
+import { darkCssVariables, lightCssVariables } from './index';
+
+globalStyle(':root', {
+  vars: lightCssVariables,
+});
+
+globalStyle(':root[data-theme="dark"]', {
+  vars: darkCssVariables,
+});

packages/theme/vite.config.ts

@@ -1,5 +1,6 @@
 import { resolve } from 'node:path';
 
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import { fileURLToPath } from 'url';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
@@ -13,13 +14,12 @@ export default defineConfig({
     },
     sourcemap: true,
     lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      fileName: 'index',
+      entry: {
+        index: resolve(__dirname, 'src/index.ts'),
+        css: resolve(__dirname, 'src/index.css.ts'),
+      },
       name: 'ToEverythingTheme',
     },
-    rollupOptions: {
-      external: ['idb', 'yjs'],
-    },
   },
-  plugins: [dts()],
+  plugins: [dts(), vanillaExtractPlugin()],
 });