@tailwind-styled/compiler 2.0.0

package/src/tailwindEngine.ts

@@ -0,0 +1,285 @@
+/**
+ * tailwind-styled-v4 — Embedded Tailwind Engine
+ *
+ * Compiler menjalankan Tailwind internally — tidak perlu tailwind CLI,
+ * tidak perlu postcss config manual.
+ *
+ * Cara kerja:
+ * 1. Compiler extract semua class dari source (via classExtractor)
+ * 2. Engine generate CSS hanya untuk class tersebut
+ * 3. CSS di-output per route (route-level CSS bundling)
+ *
+ * Ini membuat CSS output jauh lebih kecil:
+ *   Tailwind normal: ~300kb global
+ *   Route CSS:       ~2–10kb per route
+ *
+ * Mode operasi:
+ *   "jit"    → generate CSS saat file berubah (dev mode)
+ *   "build"  → generate semua CSS di akhir build (production)
+ *   "manual" → tidak generate, hanya extract (default untuk kompatibilitas)
+ */
+
+import path from "node:path"
+import { loadTailwindConfig } from "./loadTailwindConfig"
+import { getAllRoutes, getRouteClasses } from "./routeCssCollector"
+
+export type TailwindEngineMode = "jit" | "build" | "manual"
+
+export interface TailwindEngineOptions {
+  mode?: TailwindEngineMode
+  cwd?: string
+  outputDir?: string
+  config?: Record<string, any>
+  minify?: boolean
+}
+
+export interface CssGenerateResult {
+  route: string
+  css: string
+  classes: string[]
+  sizeBytes: number
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Core engine
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Try to use Tailwind's internal API for CSS generation.
+ * Fallback ke manual CSS generation jika Tailwind API tidak tersedia.
+ *
+ * NOTE: Tailwind v4 mengubah API internal — kita support keduanya.
+ */
+export async function generateCssForClasses(
+  classes: string[],
+  config?: Record<string, any>,
+  cwd = process.cwd()
+): Promise<string> {
+  const twConfig = config ?? loadTailwindConfig(cwd)
+
+  // Strategy 1: Tailwind v4 (@tailwindcss/postcss atau native)
+  try {
+    return await generateViaTailwindV4(classes, twConfig, cwd)
+  } catch {
+    // not available
+  }
+
+  // Strategy 2: Tailwind v3 API
+  try {
+    return await generateViaTailwindV3(classes, twConfig)
+  } catch {
+    // not available
+  }
+
+  // Strategy 3: Manual atomic CSS generation (always available)
+  return generateManualCss(classes)
+}
+
+/**
+ * Tailwind v4 CSS generation (via @tailwindcss/postcss)
+ */
+async function generateViaTailwindV4(
+  classes: string[],
+  _config: Record<string, any>,
+  cwd: string
+): Promise<string> {
+  // Tailwind v4 uses @import "tailwindcss" syntax
+  // We generate a virtual CSS file that imports tailwindcss + safelist
+  const virtualCss = [
+    `@import "tailwindcss";`,
+    `@layer utilities {`,
+    `  /* Generated by tailwind-styled-v4 */`,
+    `}`,
+  ].join("\n")
+
+  const postcss = require("postcss")
+  const tailwindcss = require("@tailwindcss/postcss")
+
+  const result = await postcss([
+    tailwindcss({
+      optimize: { minify: false },
+    }),
+  ]).process(virtualCss, {
+    from: path.join(cwd, "virtual.css"),
+  })
+
+  // Filter to only include classes we need
+  return filterCssForClasses(result.css, classes)
+}
+
+/**
+ * Tailwind v3 CSS generation (via tailwindcss package API)
+ */
+async function generateViaTailwindV3(
+  classes: string[],
+  config: Record<string, any>
+): Promise<string> {
+  const postcss = require("postcss")
+  const tailwindcss = require("tailwindcss")
+
+  // Create virtual content with only our classes
+  const virtualContent = classes.map((c) => `<div class="${c}">`).join("\n")
+
+  const twConfigWithContent = {
+    ...config,
+    content: [{ raw: virtualContent, extension: "html" }],
+    safelist: classes,
+  }
+
+  const inputCss = `@tailwind base;\n@tailwind components;\n@tailwind utilities;`
+
+  const result = await postcss([tailwindcss(twConfigWithContent)]).process(inputCss, {
+    from: undefined,
+  })
+
+  return result.css
+}
+
+/**
+ * Manual atomic CSS generation — always available, no Tailwind dependency.
+ * Menggunakan AtomicCss module yang sudah ada.
+ */
+function generateManualCss(classes: string[]): string {
+  const { generateAtomicCss, parseAtomicClass } = require("./atomicCss")
+
+  const rules = classes.map((c: string) => parseAtomicClass(c)).filter(Boolean)
+
+  if (rules.length === 0) return ""
+
+  const header = `/* Generated by tailwind-styled-v4 — ${new Date().toISOString()} */\n`
+  return header + generateAtomicCss(rules)
+}
+
+/**
+ * Filter compiled Tailwind CSS to only include needed class selectors.
+ * Dipakai untuk optimize output CSS size.
+ */
+function filterCssForClasses(fullCss: string, classes: string[]): string {
+  // Keep @base rules + only selectors matching our classes
+  const _classSet = new Set(classes)
+
+  const lines = fullCss.split("\n")
+  const kept: string[] = []
+  let inBlock = false
+  let keepBlock = false
+  let braceDepth = 0
+
+  for (const line of lines) {
+    // Always keep @layer base (reset styles)
+    if (line.includes("@layer base") || line.includes("*, *::before")) {
+      kept.push(line)
+      continue
+    }
+
+    // Check if line is a selector for one of our classes
+    if (!inBlock) {
+      const isOurClass = classes.some((cls) => {
+        const escaped = cls.replace(/[:/[\].!%]/g, "\\$&")
+        return line.includes(`.${escaped}`) || line.includes(`.${cls}`)
+      })
+
+      if (isOurClass) {
+        keepBlock = true
+        inBlock = true
+        braceDepth = 0
+      }
+    }
+
+    if (inBlock) {
+      if (keepBlock) kept.push(line)
+      if (line.includes("{")) braceDepth++
+      if (line.includes("}")) {
+        braceDepth--
+        if (braceDepth <= 0) {
+          inBlock = false
+          keepBlock = false
+        }
+      }
+    }
+  }
+
+  return kept.join("\n")
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Build-time CSS generation (dipakai di withTailwindStyled buildEnd hook)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export async function generateAllRouteCss(
+  opts: TailwindEngineOptions = {}
+): Promise<CssGenerateResult[]> {
+  const { cwd = process.cwd(), outputDir, config, minify = true } = opts
+
+  const results: CssGenerateResult[] = []
+  const routes = getAllRoutes()
+  const twConfig = config ?? loadTailwindConfig(cwd)
+
+  for (const route of routes) {
+    const classes = Array.from(getRouteClasses(route))
+    if (classes.length === 0) continue
+
+    try {
+      let css = await generateCssForClasses(classes, twConfig, cwd)
+
+      if (minify) {
+        css = minifyCss(css)
+      }
+
+      results.push({
+        route,
+        css,
+        classes,
+        sizeBytes: Buffer.byteLength(css, "utf8"),
+      })
+    } catch (e) {
+      console.warn(`[tailwind-styled-v4] CSS generation failed for route ${route}:`, e)
+    }
+  }
+
+  // Emit CSS files if outputDir provided
+  if (outputDir) {
+    const fs = require("node:fs")
+    fs.mkdirSync(outputDir, { recursive: true })
+
+    for (const result of results) {
+      const filename = routeToFilename(result.route)
+      const filepath = path.join(outputDir, filename)
+      fs.mkdirSync(path.dirname(filepath), { recursive: true })
+      fs.writeFileSync(filepath, result.css)
+    }
+
+    const totalSize = results.reduce((sum, r) => sum + r.sizeBytes, 0)
+    console.log(
+      `[tailwind-styled-v4] Route CSS generated: ${results.length} routes, ${formatBytes(totalSize)} total`
+    )
+  }
+
+  return results
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+function routeToFilename(route: string): string {
+  if (route === "/") return "index.css"
+  if (route === "__global") return "_global.css"
+  return `${route.replace(/^\//, "").replace(/\//g, "_")}.css`
+}
+
+function minifyCss(css: string): string {
+  return css
+    .replace(/\/\*[^*]*\*+([^/*][^*]*\*+)*\//g, "") // remove comments
+    .replace(/\s+/g, " ") // collapse whitespace
+    .replace(/\s*{\s*/g, "{")
+    .replace(/\s*}\s*/g, "}")
+    .replace(/\s*:\s*/g, ":")
+    .replace(/\s*;\s*/g, ";")
+    .trim()
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes}B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`
+  return `${(bytes / 1024 / 1024).toFixed(1)}MB`
+}

package/src/twDetector.ts

@@ -0,0 +1,54 @@
+/**
+ * tailwind-styled-v4 — twDetector
+ *
+ * Regex-based detector untuk semua syntax tw yang valid.
+ * Dipakai sebelum transform — jika tidak ada tw usage, skip file.
+ *
+ * FIXED: trailing space bug di TEMPLATE_RE (#02)
+ */
+
+/** tw.div`...` — FIX: removed trailing space before /g */
+export const TEMPLATE_RE = /\btw\.(server\.)?(\w+)`((?:[^`\\]|\\.)*)`/g
+
+/** tw.div({ base: "...", variants: {...} }) */
+export const OBJECT_RE = /\btw\.(server\.)?(\w+)\(\s*(\{[\s\S]*?\})\s*\)/g
+
+/** tw(Component)`...` */
+export const WRAP_RE = /\btw\((\w+)\)`((?:[^`\\]|\\.)*)`/g
+
+/** Card.extend`...` */
+export const EXTEND_RE = /(\w+)\.extend`((?:[^`\\]|\\.)*)`/g
+
+/** import { tw } from "tailwind-styled-v4" */
+export const IMPORT_RE = /from\s*["']tailwind-styled-v4["']/
+
+/** Transform already-applied marker — idempotency guard (#08) */
+export const TRANSFORM_MARKER = "/* @tw-transformed */"
+
+export function hasTwUsage(source: string): boolean {
+  return IMPORT_RE.test(source) || source.includes("tw.")
+}
+
+/** Check if file was already transformed — prevents double processing (#08) */
+export function isAlreadyTransformed(source: string): boolean {
+  return source.includes(TRANSFORM_MARKER)
+}
+
+export function isTwTemplateLiteral(source: string, index: number): boolean {
+  const before = source.slice(Math.max(0, index - 20), index)
+  return /\btw\.\w+$/.test(before) || /\btw\(\w+\)$/.test(before)
+}
+
+export function isDynamic(content: string): boolean {
+  return content.includes("${")
+}
+
+export function isServerComponent(source: string): boolean {
+  return !source.includes('"use client"') && !source.includes("'use client'")
+}
+
+export function hasInteractiveFeatures(content: string): boolean {
+  return /\b(hover:|focus:|active:|group-hover:|peer-|on[A-Z]|useState|useEffect|useRef)\b/.test(
+    content
+  )
+}

package/src/variantCompiler.ts

@@ -0,0 +1,87 @@
+/**
+ * tailwind-styled-v4 — variantCompiler
+ *
+ * FIXES:
+ *  #01 — Don't pre-merge base into variant table values (double-merge bug)
+ *  #06 — Use proper AST parser instead of fragile regex
+ *
+ * BEFORE (double-merge):
+ *   compileVariants: table["size"]["sm"] = "px-4 py-2 text-sm"  ← base included
+ *   astTransform:    [base, table["size"][...]]                   ← base AGAIN → DUPE
+ *
+ * AFTER (correct):
+ *   compileVariants: table["size"]["sm"] = "text-sm"             ← variant only
+ *   astTransform:    [base, table["size"][...], className]        ← base once, correct
+ *
+ * Input:
+ *   { base: "px-4 py-2", variants: { size: { sm: "text-sm" } } }
+ *
+ * Output code:
+ *   const __vt_abc123 = { size: { sm: "text-sm" } }
+ *   // className = [base, table[variant]] → no duplication
+ */
+
+import { parseComponentConfig } from "./astParser"
+import { normalizeClasses } from "./classMerger"
+
+export interface CompiledVariants {
+  base: string
+  table: Record<string, Record<string, string>>
+  compounds: Array<{ class: string; [key: string]: any }>
+  defaults: Record<string, string>
+}
+
+/**
+ * Compile variant config into lookup table.
+ *
+ * FIX #01: Do NOT pre-merge base into table values.
+ * Table contains variant-specific classes only.
+ * Base is always injected separately in the component className array.
+ */
+export function compileVariants(
+  base: string,
+  variants: Record<string, Record<string, string>>,
+  compounds: Array<{ class: string; [key: string]: any }> = [],
+  defaults: Record<string, string> = {}
+): CompiledVariants {
+  const table: Record<string, Record<string, string>> = {}
+
+  for (const key in variants) {
+    table[key] = {}
+    for (const val in variants[key]) {
+      // FIX #01: variant classes only — NOT merged with base
+      // Base is injected separately in renderVariantComponent
+      table[key][val] = normalizeClasses(variants[key][val])
+    }
+  }
+
+  return { base, table, compounds, defaults }
+}
+
+export function generateVariantCode(id: string, compiled: CompiledVariants): string {
+  const { table, compounds, defaults } = compiled
+
+  const tableJson = JSON.stringify(table, null, 2)
+  const compoundsJson = JSON.stringify(compounds, null, 2)
+  const defaultsJson = JSON.stringify(defaults, null, 2)
+
+  return `const __vt_${id} = ${tableJson};
+const __vc_${id} = ${compoundsJson};
+const __vd_${id} = ${defaultsJson};`
+}
+
+/**
+ * Parse object config string.
+ * UPGRADE #4: Uses proper AST parser — handles all edge cases.
+ *
+ * FIX #02 (indirect): classExtractor no longer needs .slice(0, -1) workaround
+ * since TEMPLATE_RE trailing space is fixed in twDetector.ts
+ */
+export function parseObjectConfig(objectStr: string): {
+  base: string
+  variants: Record<string, Record<string, string>>
+  compounds: Array<{ class: string; [key: string]: any }>
+  defaults: Record<string, string>
+} {
+  return parseComponentConfig(objectStr)
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declarationDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}