fix: compile the standalone styles.css export instead of shipping raw Tailwind source

README.md

@@ -6,6 +6,10 @@
 
 React UI component library for [Deepgram Voice Agent](https://developers.deepgram.com/docs/voice-agent) — Tailwind v4, shadcn/ui, fully themeable.
 
+## Status
+
+This library is pre-1.0. Interfaces may change between minor versions, and releases are cut as the library evolves rather than on a fixed schedule. This package and its siblings — [`@deepgram/agents`](https://github.com/deepgram/agent), [`@deepgram/react`](https://github.com/deepgram/react), and [`@deepgram/agents-widget`](https://github.com/deepgram/agent) — build on the [Deepgram Voice Agent API](https://developers.deepgram.com/docs/voice-agent) to provide embeddable browser components.
+
 ## Install
 
 ```bash
@@ -22,9 +26,21 @@ import {
   AgentMessage,
   AgentTextInput,
   AgentStatus,
+  useAgentConversation,
 } from "@deepgram/ui";
 import "@deepgram/ui/styles.css";
 
+function Conversation() {
+  const { conversation } = useAgentConversation();
+  return (
+    <AgentConversation>
+      {conversation.map((entry) => (
+        <AgentMessage key={entry.id} entry={entry} />
+      ))}
+    </AgentConversation>
+  );
+}
+
 function App() {
   return (
     <AgentProvider
@@ -35,11 +51,7 @@ function App() {
     >
       <div data-dg-agent>
         <AgentStatus />
-        <AgentConversation>
-          {conversation.map((entry) => (
-            <AgentMessage key={entry.id} entry={entry} />
-          ))}
-        </AgentConversation>
+        <Conversation />
         <AgentTextInput />
         <AgentStartButton />
       </div>

packages/ui/README.md

@@ -2,8 +2,18 @@
 
 Pre-built, styled React components for the [Deepgram Voice Agent API](https://developers.deepgram.com/docs/voice-agent). Fully customizable via CSS variables. Re-exports all hooks from [`@deepgram/react`](../react/) so you only need one import.
 
+## Status
+
+This package is pre-1.0. Interfaces may change between minor versions.
+
 ## Install
 
+```bash
+npm install @deepgram/ui react react-dom
+```
+
+or with Bun:
+
 ```bash
 bun add @deepgram/ui react react-dom
 ```

packages/ui/package.json

@@ -27,7 +27,7 @@
     "url": "https://github.com/deepgram/ui/issues"
   },
   "scripts": {
-    "build": "tsc --noEmit && vite build",
+    "build": "tsc --noEmit && vite build && vite build --config vite.styles.config.ts",
     "typecheck": "tsc --noEmit",
     "dev": "vite build --watch",
     "test": "bun test",

packages/ui/vite.config.ts

@@ -1,6 +1,4 @@
 import { defineConfig } from "vite";
-import { copyFileSync, mkdirSync } from "node:fs";
-import { resolve } from "node:path";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import cssInjected from "vite-plugin-css-injected-by-js";
@@ -34,16 +32,10 @@ export default defineConfig({
     // when it imports @deepgram/ui/dist/index.js.
     cssInjected(),
     dts({ rollupTypes: true }),
-    // Copy standalone styles.css to dist for @deepgram/ui/styles.css
-    {
-      name: "copy-styles",
-      closeBundle() {
-        mkdirSync(resolve(__dirname, "dist"), { recursive: true });
-        copyFileSync(
-          resolve(__dirname, "src/styles.css"),
-          resolve(__dirname, "dist/styles.css"),
-        );
-      },
-    },
+    // The standalone stylesheet for the `@deepgram/ui/styles.css` export is
+    // built by a second Vite pass (vite.styles.config.ts) that compiles
+    // src/styles.css through Tailwind. It was previously copied verbatim,
+    // which shipped raw Tailwind source (@import/@plugin directives) that
+    // consumer bundlers reject.
   ],
 });

packages/ui/vite.styles.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+
+// Compiles the standalone stylesheet for the `@deepgram/ui/styles.css`
+// export. The main build (vite.config.ts) embeds compiled CSS into the JS
+// bundle via vite-plugin-css-injected-by-js, so no CSS asset leaves that
+// pass; this second pass exists solely to turn src/styles.css (Tailwind v4
+// source with @import/@plugin directives) into plain compiled CSS at
+// dist/styles.css. Previously the raw source file was copied verbatim,
+// which broke consumer builds (lightningcss rejects `@media prefix(dg)`)
+// and served no styles to consumers who imported it.
+export default defineConfig({
+  plugins: [tailwindcss()],
+  build: {
+    outDir: "dist",
+    emptyOutDir: false,
+    rollupOptions: {
+      input: "src/styles.css",
+      output: {
+        assetFileNames: "styles[extname]",
+      },
+    },
+  },
+});