@tailwind-styled/compiler 2.0.0

package/src/index.ts

@@ -0,0 +1,100 @@
+// ── Core transform pipeline ──────────────────────────────────────────────────
+
+export type { TransformOptions, TransformResult } from "./astTransform"
+export { shouldProcess, transformSource } from "./astTransform"
+export type { AtomicRule } from "./atomicCss"
+// ── Atomic CSS ────────────────────────────────────────────────────────────────
+export {
+  clearAtomicRegistry,
+  generateAtomicCss,
+  getAtomicRegistry,
+  parseAtomicClass,
+  toAtomicClasses,
+} from "./atomicCss"
+// ── Class utilities ───────────────────────────────────────────────────────────
+export { extractAllClasses } from "./classExtractor"
+export { mergeClassesStatic, normalizeClasses } from "./classMerger"
+export type { HoistResult } from "./componentHoister"
+// ── Component hoisting ────────────────────────────────────────────────────────
+export { hoistComponents } from "./componentHoister"
+export type {
+  EliminationReport,
+  VariantUsage,
+} from "./deadStyleEliminator"
+// ── Dead Style Eliminator ─────────────────────────────────────────────────────
+export {
+  extractComponentUsage,
+  runElimination,
+  scanProjectUsage,
+} from "./deadStyleEliminator"
+export type {
+  CssDiff,
+  FileDependencyGraph,
+  IncrementalEngineOptions,
+  IncrementalStats,
+  ProcessResult,
+  StyleNode,
+} from "./incrementalEngine"
+// ── Incremental CSS Compiler ──────────────────────────────────────────────────
+export {
+  getIncrementalEngine,
+  IncrementalEngine,
+  parseClassesToNodes,
+  resetIncrementalEngine,
+} from "./incrementalEngine"
+// ── Zero-config Tailwind config loader ───────────────────────────────────────
+export {
+  bootstrapZeroConfig,
+  getContentPaths,
+  invalidateConfigCache,
+  isZeroConfig,
+  loadTailwindConfig,
+} from "./loadTailwindConfig"
+export type { RouteClassMap } from "./routeCssCollector"
+// ── Route CSS collector ────────────────────────────────────────────────────────
+export {
+  fileToRoute,
+  getAllRoutes,
+  getCollector,
+  getCollectorSummary,
+  getRouteClasses,
+  registerFileClasses,
+  registerGlobalClasses,
+  resetCollector,
+} from "./routeCssCollector"
+export type { ComponentEnv, RscAnalysis, StaticVariantUsage } from "./rscAnalyzer"
+// ── RSC-Aware ─────────────────────────────────────────────────────────────────
+export {
+  analyzeFile,
+  analyzeVariantUsage,
+  injectClientDirective,
+  injectServerOnlyComment,
+  resolveServerVariant,
+} from "./rscAnalyzer"
+// ── Safelist ──────────────────────────────────────────────────────────────────
+export { generateSafelist, generateSafelistCss, loadSafelist } from "./safelistGenerator"
+export type {
+  BucketStats,
+  ConflictWarning,
+  StyleBucket,
+} from "./styleBucketSystem"
+// ── Style Bucket System ───────────────────────────────────────────────────────
+export {
+  BucketEngine,
+  bucketSort,
+  classifyNode,
+  detectConflicts,
+  getBucketEngine,
+  resetBucketEngine,
+} from "./styleBucketSystem"
+export type { CssGenerateResult, TailwindEngineOptions } from "./tailwindEngine"
+// ── Embedded Tailwind engine ──────────────────────────────────────────────────
+export { generateAllRouteCss, generateCssForClasses } from "./tailwindEngine"
+// ── Detectors ─────────────────────────────────────────────────────────────────
+export {
+  hasInteractiveFeatures,
+  hasTwUsage,
+  isDynamic,
+  isServerComponent,
+} from "./twDetector"
+export { compileVariants } from "./variantCompiler"

package/src/loadTailwindConfig.ts

@@ -0,0 +1,144 @@
+/**
+ * tailwind-styled-v4 — Tailwind Config Loader
+ *
+ * Auto-load tailwind config dari project.
+ * Jika tidak ada → fallback ke defaultPreset (zero-config mode).
+ *
+ * Priority:
+ *   1. tailwind.config.ts  (TypeScript)
+ *   2. tailwind.config.js  (JavaScript)
+ *   3. tailwind.config.mjs (ESM)
+ *   4. defaultPreset       (fallback — zero-config)
+ */
+
+import fs from "node:fs"
+import path from "node:path"
+
+export type TailwindConfig = Record<string, any>
+
+const CONFIG_FILES = [
+  "tailwind.config.ts",
+  "tailwind.config.js",
+  "tailwind.config.mjs",
+  "tailwind.config.cjs",
+]
+
+let _cachedConfig: TailwindConfig | null = null
+let _cachedCwd: string = ""
+
+/**
+ * Load tailwind config. Cached per process.
+ * Returns defaultPreset if no config found (zero-config mode).
+ */
+export function loadTailwindConfig(cwd = process.cwd()): TailwindConfig {
+  // Cache invalidation
+  if (_cachedConfig && _cachedCwd === cwd) return _cachedConfig
+
+  _cachedCwd = cwd
+
+  // Try each config file
+  for (const file of CONFIG_FILES) {
+    const fullPath = path.join(cwd, file)
+    if (fs.existsSync(fullPath)) {
+      try {
+        // For .ts files, we need ts-node or pre-compiled version
+        // In practice, Next.js/Vite already handle this via their config system
+        const mod = require(fullPath)
+        const config = mod.default ?? mod
+        _cachedConfig = config
+        console.log(`[tailwind-styled-v4] Using config: ${file}`)
+        return config
+      } catch {}
+    }
+  }
+
+  // Zero-config fallback
+  console.log("[tailwind-styled-v4] No tailwind config found → using built-in preset")
+  const { defaultPreset } = require("../../preset/src/defaultPreset")
+  _cachedConfig = defaultPreset
+  return defaultPreset
+}
+
+/**
+ * Get content paths dari config (atau default paths)
+ */
+export function getContentPaths(config: TailwindConfig, cwd = process.cwd()): string[] {
+  const paths: string[] = []
+
+  if (Array.isArray(config.content)) {
+    for (const item of config.content) {
+      if (typeof item === "string") paths.push(item)
+      else if (typeof item === "object" && item.raw) {
+        // inline content object — skip
+      }
+    }
+    return paths
+  }
+
+  if (config.content?.files) {
+    return config.content.files.filter((f: any) => typeof f === "string")
+  }
+
+  // Fallback: scan standard dirs
+  return ["src", "app", "pages", "components"]
+    .filter((d) => fs.existsSync(path.join(cwd, d)))
+    .map((d) => `./${d}/**/*.{tsx,ts,jsx,js}`)
+}
+
+/**
+ * Invalidate config cache (useful for watch mode)
+ */
+export function invalidateConfigCache(): void {
+  _cachedConfig = null
+  _cachedCwd = ""
+}
+
+/**
+ * Check if project has zero-config setup (no user tailwind config)
+ */
+export function isZeroConfig(cwd = process.cwd()): boolean {
+  return !CONFIG_FILES.some((f) => fs.existsSync(path.join(cwd, f)))
+}
+
+/**
+ * Auto-generate tailwind.config.ts dan globals.css jika tidak ada
+ * (dipanggil oleh CLI dan withTailwindStyled pada first run)
+ */
+export function bootstrapZeroConfig(cwd = process.cwd()): {
+  generatedConfig: boolean
+  generatedCss: boolean
+} {
+  let generatedConfig = false
+  let generatedCss = false
+
+  // Tailwind v4: CSS-first — tidak perlu tailwind.config.ts
+  // Config dilakukan via CSS (@source, @theme, dsb.)
+  generatedConfig = false
+
+  // Generate globals.css if missing
+  const cssPaths = [
+    "src/app/globals.css",
+    "app/globals.css",
+    "src/index.css",
+    "src/styles/globals.css",
+  ]
+  const hasGlobalCss = cssPaths.some((p) => fs.existsSync(path.join(cwd, p)))
+
+  if (!hasGlobalCss) {
+    const { defaultGlobalCss } = require("../../preset/src/defaultPreset")
+    // Try to find app directory
+    const appDir = fs.existsSync(path.join(cwd, "src/app"))
+      ? "src/app"
+      : fs.existsSync(path.join(cwd, "app"))
+        ? "app"
+        : "src"
+    const cssPath = path.join(cwd, appDir, "globals.css")
+    if (fs.existsSync(path.dirname(cssPath))) {
+      fs.writeFileSync(cssPath, defaultGlobalCss)
+      generatedCss = true
+      console.log(`[tailwind-styled-v4] Generated ${cssPath}`)
+    }
+  }
+
+  return { generatedConfig, generatedCss }
+}

package/src/routeCssCollector.ts

@@ -0,0 +1,188 @@
+/**
+ * tailwind-styled-v4 — Route CSS Collector
+ *
+ * Mengumpulkan Tailwind classes per-route sehingga setiap halaman
+ * hanya memuat CSS yang benar-benar dipakai.
+ *
+ * Tailwind default: ~300kb global CSS
+ * Route CSS: ~2–10kb per halaman
+ *
+ * Cara kerja:
+ * 1. Setiap file yang di-transform oleh compiler melaporkan classnya
+ * 2. Collector memetakan file → route
+ * 3. Di akhir build, CSS di-generate per route
+ *
+ * File structure output:
+ *   .next/static/css/
+ *     _global.css        ← base + reset (sekali load)
+ *     app/page.css       ← hanya class yang dipakai di /
+ *     app/about/page.css ← hanya class untuk /about
+ *     app/dashboard/...
+ */
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface RouteClassMap {
+  /** filepath → array of tw classes */
+  files: Map<string, Set<string>>
+  /** route → Set of files yang dipakai */
+  routes: Map<string, Set<string>>
+  /** Global classes (di-load semua route) */
+  global: Set<string>
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Singleton collector (per build)
+// ─────────────────────────────────────────────────────────────────────────────
+
+let _collector: RouteClassMap = {
+  files: new Map(),
+  routes: new Map(),
+  global: new Set(),
+}
+
+/**
+ * Register classes dari sebuah file setelah compiler transform.
+ * Dipanggil oleh turbopackLoader/webpackLoader setelah setiap file di-transform.
+ */
+export function registerFileClasses(filepath: string, classes: string[]): void {
+  if (!_collector.files.has(filepath)) {
+    _collector.files.set(filepath, new Set())
+  }
+  const fileSet = _collector.files.get(filepath)!
+  classes.forEach((c) => fileSet.add(c))
+
+  // Auto-detect route dari filepath
+  const route = fileToRoute(filepath)
+  if (route) {
+    if (!_collector.routes.has(route)) {
+      _collector.routes.set(route, new Set())
+    }
+    _collector.routes.get(route)!.add(filepath)
+  }
+}
+
+/**
+ * Register global classes (base styles, layout, dsb.)
+ * Global classes dimuat di semua route.
+ */
+export function registerGlobalClasses(classes: string[]): void {
+  classes.forEach((c) => _collector.global.add(c))
+}
+
+/**
+ * Get all classes for a specific route (termasuk global)
+ */
+export function getRouteClasses(route: string): Set<string> {
+  const result = new Set<string>(_collector.global)
+
+  // Tambahkan classes dari semua file yang terkait route ini
+  const routeFiles = _collector.routes.get(route) ?? new Set()
+  for (const filepath of routeFiles) {
+    const fileClasses = _collector.files.get(filepath) ?? new Set()
+    fileClasses.forEach((c) => result.add(c))
+  }
+
+  return result
+}
+
+/**
+ * Get all routes yang sudah ter-register
+ */
+export function getAllRoutes(): string[] {
+  return Array.from(_collector.routes.keys()).sort()
+}
+
+/**
+ * Get complete map (untuk build-time generation)
+ */
+export function getCollector(): RouteClassMap {
+  return _collector
+}
+
+/**
+ * Reset collector (start of each build)
+ */
+export function resetCollector(): void {
+  _collector = {
+    files: new Map(),
+    routes: new Map(),
+    global: new Set(),
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// File → Route mapping
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Konversi filepath ke Next.js App Router route.
+ *
+ * /src/app/page.tsx           → /
+ * /src/app/about/page.tsx     → /about
+ * /src/app/dashboard/page.tsx → /dashboard
+ * /src/components/Button.tsx  → null (shared component, goes to global)
+ * /src/app/layout.tsx         → __layout (global)
+ */
+export function fileToRoute(filepath: string): string | null {
+  const normalized = filepath.replace(/\\/g, "/")
+
+  // Layout files → global
+  if (
+    normalized.includes("/layout.") ||
+    normalized.includes("/loading.") ||
+    normalized.includes("/error.")
+  ) {
+    return "__global"
+  }
+
+  // Page files in App Router
+  const pageMatch = normalized.match(/\/app\/(.+?)\/page\.[tj]sx?$/)
+  if (pageMatch) return `/${pageMatch[1]}`
+
+  const rootPage = normalized.match(/\/app\/page\.[tj]sx?$/)
+  if (rootPage) return "/"
+
+  // Pages Router
+  const pagesMatch = normalized.match(/\/pages\/(.+?)\.[tj]sx?$/)
+  if (pagesMatch) {
+    const route = pagesMatch[1].replace(/\/index$/, "")
+    return `/${route}`
+  }
+
+  // Shared components → global
+  if (
+    normalized.includes("/components/") ||
+    normalized.includes("/ui/") ||
+    normalized.includes("/shared/")
+  ) {
+    return "__global"
+  }
+
+  return null
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Summary for logging
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function getCollectorSummary(): string {
+  const routes = getAllRoutes()
+  const totalFiles = _collector.files.size
+  const totalGlobal = _collector.global.size
+
+  const lines = [
+    `[tailwind-styled-v4] Route CSS Summary:`,
+    `  Files processed: ${totalFiles}`,
+    `  Global classes: ${totalGlobal}`,
+    `  Routes found: ${routes.length}`,
+    ...routes.map((r) => {
+      const cls = getRouteClasses(r).size
+      return `    ${r} → ${cls} classes`
+    }),
+  ]
+
+  return lines.join("\n")
+}

package/src/rscAnalyzer.ts

@@ -0,0 +1,240 @@
+/**
+ * tailwind-styled-v4 — RSC Analyzer
+ *
+ * Inti dari RSC-Aware upgrade.
+ * Menganalisis setiap file untuk menentukan:
+ * - Server Component atau Client Component
+ * - Variant mana yang bisa di-resolve di server
+ * - Class mana yang membutuhkan client runtime
+ * - Auto client boundary injection
+ *
+ * Hasilnya:
+ * - Server Component → pure static className, zero JS ke client
+ * - Client Component → tetap seperti biasa dengan lookup table
+ */
+
+// ─────────────────────────────────────────────────────────────────────────────
+// RSC Analysis Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type ComponentEnv = "server" | "client" | "auto"
+
+export interface RscAnalysis {
+  /** File ini adalah server component */
+  isServer: boolean
+  /** File ini butuh "use client" directive */
+  needsClientDirective: boolean
+  /** Alasan butuh client */
+  clientReasons: string[]
+  /** Classes yang membutuhkan client interaction */
+  interactiveClasses: string[]
+  /** Apakah semua variants bisa di-resolve statically di server */
+  canStaticResolveVariants: boolean
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Interactive class patterns — butuh client-side event handling
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** CSS classes yang TIDAK butuh JS — tetap bisa di server */
+const CSS_INTERACTIVE_OK = [
+  /^hover:/, // CSS :hover — no JS needed
+  /^focus:/, // CSS :focus — no JS needed
+  /^focus-within:/, // CSS :focus-within
+  /^focus-visible:/, // CSS :focus-visible
+  /^active:/, // CSS :active
+  /^group-hover:/, // Tailwind group variant — CSS only
+  /^group-focus:/, // CSS only
+  /^peer-/, // Tailwind peer — CSS only
+  /^first:/, // CSS :first-child
+  /^last:/, // CSS :last-child
+  /^odd:/, // CSS :nth-child(odd)
+  /^even:/, // CSS :nth-child(even)
+  /^disabled:/, // CSS :disabled
+  /^placeholder:/, // CSS ::placeholder
+  /^dark:/, // CSS @media prefers-color-scheme
+  /^print:/, // CSS @media print
+  /^md:|^sm:|^lg:|^xl:|^2xl:/, // Responsive breakpoints — CSS only
+]
+
+/** Patterns yang BENAR-BENAR butuh JS runtime */
+const REQUIRES_JS_PATTERNS = [
+  // React hooks
+  /\buseState\b/,
+  /\buseEffect\b/,
+  /\buseRef\b/,
+  /\buseCallback\b/,
+  /\buseMemo\b/,
+  /\buseReducer\b/,
+  /\buseContext\b/,
+  // Event handlers
+  /\bon[A-Z][a-zA-Z]+\s*[=:]/, // onClick=, onMouseEnter:, etc.
+  // Browser APIs
+  /\bwindow\./,
+  /\bdocument\./,
+  /\blocalStorage\b/,
+  /\bsessionStorage\b/,
+  // Dynamic imports
+  /import\s*\(/,
+]
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main analyzer
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function analyzeFile(source: string, _filename = ""): RscAnalysis {
+  const clientReasons: string[] = []
+  const interactiveClasses: string[] = []
+
+  // 1. Explicit "use client" directive
+  const hasClientDirective =
+    source.trimStart().startsWith('"use client"') || source.trimStart().startsWith("'use client'")
+
+  if (hasClientDirective) {
+    clientReasons.push("explicit 'use client' directive")
+  }
+
+  // 2. React hooks → needs client
+  for (const pattern of REQUIRES_JS_PATTERNS) {
+    if (pattern.test(source)) {
+      const match = source.match(pattern)
+      if (match) clientReasons.push(`uses ${match[0].trim()}`)
+    }
+  }
+
+  // 3. Check for tw.server.* usage — force server
+  const hasServerMarker = source.includes("tw.server.")
+
+  // 4. Collect interactive classes from tw templates
+  const templateRe = /\btw\.(?:server\.)?(\w+)`((?:[^`\\]|\\.)*)`/g
+  const _objectRe = /\btw\.(?:server\.)?(\w+)\(\s*(\{[\s\S]*?\})\s*\)/g
+  let m: RegExpExecArray | null
+
+  while ((m = templateRe.exec(source)) !== null) {
+    const classes = m[2]
+    // CSS-only interaction is fine for server, skip
+    // But collect them for reference
+    const parts = classes.split(/\s+/).filter(Boolean)
+    for (const cls of parts) {
+      const isOk = CSS_INTERACTIVE_OK.some((re) => re.test(cls))
+      if (!isOk && /^[a-z-]+:/.test(cls)) {
+        interactiveClasses.push(cls)
+        clientReasons.push(`uses JS-interactive class: ${cls}`)
+      }
+    }
+  }
+
+  const needsClientDirective = !hasServerMarker && (hasClientDirective || clientReasons.length > 0)
+
+  const isServer = !needsClientDirective || hasServerMarker
+
+  return {
+    isServer,
+    needsClientDirective,
+    clientReasons: [...new Set(clientReasons)],
+    interactiveClasses: [...new Set(interactiveClasses)],
+    canStaticResolveVariants: isServer,
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Server-side static variant resolution
+//
+// Ketika sebuah file adalah server component dan variant value diketahui
+// di compile time (literal string), compiler bisa langsung inline className.
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface StaticVariantUsage {
+  /** Variant prop values yang ditemukan di JSX — bisa di-resolve di server */
+  resolved: Record<string, string>
+  /** Variant props yang dinamis — butuh runtime */
+  dynamic: string[]
+}
+
+/**
+ * Deteksi penggunaan variant dalam JSX:
+ * <Button variant="primary"/> → dapat di-resolve statically
+ * <Button variant={userVariant}/> → dinamis, butuh runtime
+ */
+export function analyzeVariantUsage(
+  source: string,
+  componentName: string,
+  variantKeys: string[]
+): StaticVariantUsage {
+  const resolved: Record<string, string> = {}
+  const dynamic: string[] = []
+
+  for (const key of variantKeys) {
+    // Static: variant="primary"
+    const staticRe = new RegExp(`<${componentName}[^>]*\\b${key}=["']([^"']+)["'][^>]*>`, "g")
+    // Dynamic: variant={someVar}
+    const dynamicRe = new RegExp(`<${componentName}[^>]*\\b${key}=\\{[^"'][^}]*\\}[^>]*>`, "g")
+
+    const staticMatch = source.match(staticRe)
+    const dynamicMatch = source.match(dynamicRe)
+
+    if (dynamicMatch) {
+      dynamic.push(key)
+    } else if (staticMatch) {
+      const valMatch = staticMatch[0].match(new RegExp(`${key}=["']([^"']+)["']`))
+      if (valMatch) resolved[key] = valMatch[1]
+    }
+  }
+
+  return { resolved, dynamic }
+}
+
+/**
+ * Untuk server component dengan variant usage statically known,
+ * resolve langsung ke className string — nol runtime.
+ *
+ * Input:
+ *   base = "px-4 py-2"
+ *   table = { variant: { primary: "px-4 py-2 bg-blue-500" } }
+ *   resolved = { variant: "primary" }
+ *
+ * Output:
+ *   "px-4 py-2 bg-blue-500"  ← langsung inline di server
+ */
+export function resolveServerVariant(
+  base: string,
+  table: Record<string, Record<string, string>>,
+  defaults: Record<string, string>,
+  resolved: Record<string, string>
+): string {
+  const parts: string[] = [base]
+
+  for (const key in table) {
+    const val = resolved[key] ?? defaults[key]
+    if (val && table[key][val]) {
+      parts.push(table[key][val])
+    }
+  }
+
+  // Dedupe dengan last-wins
+  const seen = new Map<string, string>()
+  for (const part of parts) {
+    for (const cls of part.split(/\s+/).filter(Boolean)) {
+      const prefix = cls.replace(/^(?:[\w-]+:)*/, "").split("-")[0]
+      seen.set(prefix, cls)
+    }
+  }
+
+  return Array.from(seen.values()).join(" ")
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Client boundary auto-injection helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function injectClientDirective(code: string): string {
+  if (code.startsWith('"use client"') || code.startsWith("'use client'")) {
+    return code
+  }
+  return `"use client";\n${code}`
+}
+
+export function injectServerOnlyComment(code: string): string {
+  // Hint untuk bundler — RSC optimizer bisa tree-shake client deps
+  return `/* @tw-server-only */\n${code}`
+}