feat(themes): Add shadcn.css export (#6415)

Co-authored-by: Bryce Kalow <[email protected]>

Author: alexcarpenter

.changeset/puny-hounds-eat.md

@@ -0,0 +1,5 @@
+---
+'@clerk/themes': patch
+---
+
+Add `shadcn.css` export for importing within stylesheets to resolve Tailwind not picking up the elements class names used within the shadcn theme.

packages/themes/package.json

@@ -24,26 +24,36 @@
   },
   "license": "MIT",
   "author": "Clerk",
-  "main": "dist/themes/src/index.js",
-  "source": "src/index.js",
-  "typings": "dist/themes/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./shadcn.css": "./dist/themes/shadcn.css"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
+    "build": "tsup",
     "clean": "rimraf ./dist",
-    "dev": "tsc -p tsconfig.build.json --watch",
+    "dev": "tsup --watch",
     "format": "node ../../scripts/format-package.mjs",
     "format:check": "node ../../scripts/format-package.mjs --check",
     "lint": "eslint src",
-    "lint:attw": "attw --pack . --profile node16"
+    "lint:attw": "attw --pack . --exclude-entrypoints shadcn.css --profile node16"
   },
   "dependencies": {
     "@clerk/types": "workspace:^",
     "tslib": "catalog:repo"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "tsup": "catalog:repo"
+  },
   "engines": {
     "node": ">=18.17.0"
   },

packages/themes/src/themes/shadcn.css

@@ -0,0 +1 @@
+@source "./shadcn.js";

packages/themes/tsup.config.ts

@@ -0,0 +1,39 @@
+import { cp, mkdir, readdir } from 'fs/promises';
+import { extname, join } from 'path';
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['./src/**/*.{ts,tsx}'],
+  format: ['cjs', 'esm'],
+  bundle: false,
+  clean: true,
+  minify: false,
+  sourcemap: false,
+  dts: true,
+  tsconfig: './tsconfig.build.json',
+  target: 'es2020',
+  onSuccess: async () => {
+    // Ensure dist/themes directory exists
+    await mkdir('./dist/themes', { recursive: true });
+
+    // Copy all CSS files from src/themes to dist/themes
+    try {
+      const files = await readdir('./src/themes');
+      const cssFiles = files.filter(file => extname(file) === '.css');
+
+      for (const cssFile of cssFiles) {
+        await cp(join('./src/themes', cssFile), join('./dist/themes', cssFile));
+        console.log(`✓ Copied ${cssFile}`);
+      }
+    } catch (error) {
+      // Handle specific errors gracefully, log unexpected ones
+      if (error instanceof Error && 'code' in error && error.code === 'ENOENT') {
+        // Directory doesn't exist or no CSS files found, that's ok
+        console.log('ℹ No themes directory or CSS files found, skipping copy');
+      } else {
+        // Log unexpected errors to avoid hiding real issues
+        console.warn('⚠ Warning: Failed to copy CSS files:', error);
+      }
+    }
+  },
+});