migrate to vite bundler and split tailwind classes

Author: piotrkulpinski

.storybook/preview.ts

@@ -1,5 +1,6 @@
 import { withThemeByClassName } from "@storybook/addon-themes"
 import "../src/styles/tailwind.css"
+import "../src/styles/styles.css"
 
 const preview = {
   parameters: {

build.ts

@@ -13,21 +13,29 @@
     "type": "git",
     "url": "https://github.com/piotrkulpinski/design-system.git"
   },
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "files": ["dist"],
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
   "scripts": {
     "dev": "storybook dev -p 6006 --no-open",
     "test": "bun test",
     "clean": "rimraf ./dist",
-    "build": "bun run ./build.ts && tsc --emitDeclarationOnly",
+    "build": "vite build && tsc --emitDeclarationOnly",
     "prebuild": "bun run clean",
     "release": "auto shipit --no-changelog",
     "build-storybook": "storybook build --test -o dist/storybook",
     "lint": "bun biome lint --apply .",
     "format": "bun biome format --write ."
   },
   "dependencies": {
-    "@curiousleaf/utils": "^1.0.41",
+    "@curiousleaf/utils": "^1.1.1",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-alert-dialog": "^1.1.4",
     "@radix-ui/react-avatar": "^1.1.2",
@@ -66,7 +74,7 @@
     "@storybook/theming": "^8.5.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.16",
-    "@types/bun": "^1.1.16",
+    "@types/bun": "^1.1.17",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",

bun.lockb

@@ -1,3 +1,5 @@
+import "./styles/styles.css"
+
 export * from "./shared/classes"
 export * from "./shared/cva"
 export * from "./shared/helpers"

package.json

@@ -0,0 +1,32 @@
+@tailwind components;
+@tailwind utilities;
+
+a,
+button,
+label[for],
+[class*="group-hover"] {
+  @apply transition;
+  @apply ease-out;
+  @apply duration-150;
+  @apply cursor-pointer;
+}
+
+svg[stroke="currentColor"]:not([class*="stroke"]) {
+  @apply stroke-[1.5];
+}
+
+svg[stroke="currentColor"]:not([class*="size"]) {
+  @apply size-icon;
+}
+
+.dark {
+  @apply bg-gray-900;
+  @apply text-white;
+}
+
+@supports (mask-image: paint(smooth-corners)) {
+  .squircle {
+    mask-image: paint(smooth-corners);
+    --smooth-corners: 3;
+  }
+}

src/index.ts

@@ -1,33 +1 @@
 @tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-a,
-button,
-label[for],
-[class*="group-hover"] {
-  @apply transition;
-  @apply ease-out;
-  @apply duration-150;
-  @apply cursor-pointer;
-}
-
-svg[stroke="currentColor"]:not([class*="stroke"]) {
-  @apply stroke-[1.5];
-}
-
-svg[stroke="currentColor"]:not([class*="size"]) {
-  @apply size-icon;
-}
-
-.dark {
-  @apply bg-gray-900;
-  @apply text-white;
-}
-
-@supports (mask-image: paint(smooth-corners)) {
-  .squircle {
-    mask-image: paint(smooth-corners);
-    --smooth-corners: 3;
-  }
-}

src/styles/styles.css

@@ -19,6 +19,8 @@
     "strictNullChecks": true,
     "strict": true,
     "jsx": "react-jsx",
+    "baseUrl": ".",
+    "outDir": "./dist",
     "paths": { "~/*": ["./src/*"] }
   }
 }

src/styles/tailwind.css

@@ -1,11 +1,26 @@
+import { resolve } from "node:path"
 import react from "@vitejs/plugin-react"
 import { defineConfig } from "vite"
 import tsconfigPaths from "vite-tsconfig-paths"
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [tsconfigPaths(), react()],
-  resolve: {
-    extensions: [".mdx", ".mjs", ".ts", ".tsx", ".js", ".jsx"],
+  build: {
+    lib: {
+      entry: resolve(__dirname, "./src/index.ts"),
+      name: "@curiousleaf/design",
+      fileName: "index",
+    },
+    rollupOptions: {
+      external: ["react", "react-dom", "react/jsx-runtime"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+          "react/jsx-runtime": "react/jsx-runtime",
+        },
+      },
+    },
   },
 })