feat: react-ui tailwindcss plugin (#413)

assistant-ui · Jul 6, 2024 · 07a3a42 · 07a3a42
1 parent bb9241b
commit 07a3a42
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 43 deletions.
diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx
@@ -6,9 +6,6 @@ import React from "react";
 
 import "./styles.css";
 import "@radix-ui/themes/styles.css";
-import "@assistant-ui/react-ui/styles.css";
-import "@assistant-ui/react-ui/markdown-styles.css";
-import "@assistant-ui/react-ui/themes/default.css";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   return (

diff --git a/apps/www/tailwind.config.ts b/apps/www/tailwind.config.ts
@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss";
+import auiPlugin from "@assistant-ui/react-ui/tailwindcss";
 
 const config = {
   darkMode: "class",
@@ -76,7 +77,13 @@ const config = {
       },
     },
   },
-  plugins: [require("@tailwindcss/typography"), require("tailwindcss-animate")],
+  plugins: [
+    require("@tailwindcss/typography"),
+    require("tailwindcss-animate"),
+    auiPlugin({
+      components: ["thread", "assistant-modal", "markdown"],
+    }),
+  ],
 } satisfies Config;
 
 export default config;
diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json
@@ -13,6 +13,16 @@
         "default": "./dist/index.js"
       }
     },
+    "./tailwindcss": {
+      "import": {
+        "types": "./dist/tailwindcss.d.mts",
+        "default": "./dist/tailwindcss.mjs"
+      },
+      "require": {
+        "types": "./dist/tailwindcss.d.ts",
+        "default": "./dist/tailwindcss.js"
+      }
+    },
     "./styles.css": {
       "types": "./dist/styles.css.d.ts",
       "default": "./dist/styles.css"
@@ -39,7 +49,7 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsup"
+    "build": "tsup && tsup --config tsup.plugin.config.ts"
   },
   "dependencies": {
     "@assistant-ui/react-markdown": "workspace:*",

diff --git a/packages/react-ui/src/tailwindcss.ts b/packages/react-ui/src/tailwindcss.ts
@@ -0,0 +1,82 @@
+import plugin from "tailwindcss/plugin";
+
+type AssisstantTailwindPluginOptions = {
+  components?: ("markdown" | "thread" | "assistant-modal")[];
+  shadcn?: boolean;
+};
+
+const auiPlugin = plugin.withOptions<AssisstantTailwindPluginOptions>(
+  ({ components = [], shadcn = false } = {}) =>
+    ({ addComponents }) => {
+      const markdown = components.includes("markdown");
+      const assistantModal = components.includes("assistant-modal");
+      const thread =
+        markdown || assistantModal || components.includes("thread");
+
+      if (thread) {
+        addComponents({
+          '@import "@assistant-ui/react-ui/styles.css"': "",
+        });
+
+        if (!shadcn) {
+          addComponents({
+            '@import "@assistant-ui/react-ui/themes/default.css"': "",
+          });
+        }
+      }
+
+      if (markdown) {
+        addComponents({
+          '@import "@assistant-ui/react-ui/markdown-styles.css"': "",
+        });
+      }
+    },
+  ({ shadcn = false } = {}) => {
+    const prefix = shadcn ? "--aui-" : "--";
+    return {
+      theme: {
+        extend: {
+          colors: {
+            aui: {
+              border: `hsl(var(${prefix}border))`,
+              input: `hsl(var(${prefix}input))`,
+              ring: `hsl(var(${prefix}ring))`,
+              background: `hsl(var(${prefix}background))`,
+              foreground: `hsl(var(${prefix}foreground))`,
+              primary: {
+                DEFAULT: `hsl(var(${prefix}primary))`,
+                foreground: `hsl(var(${prefix}primary-foreground))`,
+              },
+              //   secondary: {
+              //     DEFAULT: "hsl(var(--aui-secondary))",
+              //     foreground: "hsl(var(--aui-secondary-foreground))",
+              //   },
+              //   destructive: {
+              //     DEFAULT: "hsl(var(--aui-destructive))",
+              //     foreground: "hsl(var(--aui-destructive-foreground))",
+              //   },
+              muted: {
+                DEFAULT: `hsl(var(${prefix}muted))`,
+                foreground: `hsl(var(${prefix}muted-foreground))`,
+              },
+              accent: {
+                DEFAULT: `hsl(var(${prefix}accent))`,
+                foreground: `hsl(var(${prefix}accent-foreground))`,
+              },
+              popover: {
+                DEFAULT: `hsl(var(${prefix}popover))`,
+                foreground: `hsl(var(${prefix}popover-foreground))`,
+              },
+              card: {
+                DEFAULT: `hsl(var(${prefix}card))`,
+                foreground: `hsl(var(${prefix}card-foreground))`,
+              },
+            },
+          },
+        },
+      },
+    };
+  },
+);
+
+export default auiPlugin;
diff --git a/packages/react-ui/tailwind.config.ts b/packages/react-ui/tailwind.config.ts
@@ -41,51 +41,14 @@ const config = {
       },
     },
     extend: {
-      colors: {
-        aui: {
-          border: "hsl(var(--aui-border))",
-          input: "hsl(var(--aui-input))",
-          ring: "hsl(var(--aui-ring))",
-          background: "hsl(var(--aui-background))",
-          foreground: "hsl(var(--aui-foreground))",
-          primary: {
-            DEFAULT: "hsl(var(--aui-primary))",
-            foreground: "hsl(var(--aui-primary-foreground))",
-          },
-          //   secondary: {
-          //     DEFAULT: "hsl(var(--aui-secondary))",
-          //     foreground: "hsl(var(--aui-secondary-foreground))",
-          //   },
-          //   destructive: {
-          //     DEFAULT: "hsl(var(--aui-destructive))",
-          //     foreground: "hsl(var(--aui-destructive-foreground))",
-          //   },
-          muted: {
-            DEFAULT: "hsl(var(--aui-muted))",
-            foreground: "hsl(var(--aui-muted-foreground))",
-          },
-          accent: {
-            DEFAULT: "hsl(var(--aui-accent))",
-            foreground: "hsl(var(--aui-accent-foreground))",
-          },
-          popover: {
-            DEFAULT: "hsl(var(--aui-popover))",
-            foreground: "hsl(var(--aui-popover-foreground))",
-          },
-          card: {
-            DEFAULT: "hsl(var(--aui-card))",
-            foreground: "hsl(var(--aui-card-foreground))",
-          },
-        },
-      },
       borderRadius: {
         lg: "var(--aui-radius)",
         md: "calc(var(--aui-radius) - 2px)",
         sm: "calc(var(--aui-radius) - 4px)",
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require("./src/tailwindcss")],
 } satisfies Config;
 
 export default config;
diff --git a/packages/react-ui/tsup.plugin.config.ts b/packages/react-ui/tsup.plugin.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig(() => {
+  return {
+    entry: ["src/tailwindcss.ts"],
+    format: ["cjs", "esm"],
+    dts: true,
+    sourcemap: true,
+    external: ["tailwindcss/plugin"],
+  };
+});