feat: inject Crosswind CSS into dashboard pages

chrisbbreuer · claude · chrisbbreuer · commit 89399fabe7f6 · 2026-03-06T17:36:36.000-08:00
Uses @cwcss/crosswind to extract Tailwind utility classes from rendered
HTML and generate actual CSS. Injects a &lt;style data-crosswind&gt; tag into
&lt;head&gt; with preflight reset + all utility styles. Dashboard pages now
render with proper styling without needing Tailwind CDN.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/bun.lock b/bun.lock
diff --git a/packages/registry/package.json b/packages/registry/package.json
@@ -25,7 +25,9 @@
     "test:commit-publish": "bun test src/commit-publish.test.ts",
     "typecheck": "bun --bun tsc --noEmit"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@cwcss/crosswind": "^0.1.6"
+  },
   "devDependencies": {
     "bun-types": "latest",
     "typescript": "^5.7.0"
diff --git a/packages/registry/src/server.ts b/packages/registry/src/server.ts
@@ -6,6 +6,7 @@ import { createAnalytics, type AnalyticsStorage, type AnalyticsCategory } from '
 import { handleZigRoutes, createZigStorage } from './zig-routes'
 import type { ZigPackageStorage } from './zig'
 import { S3Client } from './storage/aws-client'
+import { CSSGenerator, defaultConfig } from '@cwcss/crosswind'
 
 /**
  * Lightweight .stx template renderer — processes server scripts, directives and expressions.
@@ -46,9 +47,42 @@ async function stxRender(filePath: string, props: Record<string, unknown> = {}):
 
   // 2. Process directives
   templateContent = processBlock(templateContent, ctx)
+
+  // 3. Generate and inject Crosswind CSS from Tailwind utility classes
+  templateContent = injectCrosswindCSS(templateContent)
+
   return templateContent
 }
 
+/**
+ * Extract Tailwind class names from HTML, generate CSS via Crosswind, and inject <style> into <head>
+ */
+function injectCrosswindCSS(html: string): string {
+  const classRegex = /class\s*=\s*["']([^"']+)["']/gi
+  const classNames = new Set<string>()
+  let m: RegExpExecArray | null
+  while ((m = classRegex.exec(html)) !== null) {
+    for (const cls of m[1].split(/\s+/)) {
+      if (cls) classNames.add(cls)
+    }
+  }
+  if (classNames.size === 0) return html
+
+  const gen = new CSSGenerator(defaultConfig)
+  for (const cls of classNames) {
+    try { gen.generate(cls) }
+    catch { /* skip unknown classes */ }
+  }
+  const css = gen.toCSS(true, true)
+  if (!css) return html
+
+  const styleTag = `<style data-crosswind="generated">${css}</style>`
+  if (html.includes('</head>')) {
+    return html.replace('</head>', `${styleTag}\n</head>`)
+  }
+  return `${styleTag}\n${html}`
+}
+
 function processBlock(template: string, ctx: Record<string, any>): string {
   let output = ''
   const lines = template.split('\n')
