@tailwind-styled/compiler 2.0.0

package/src/astTransform.ts

@@ -0,0 +1,359 @@
+/**
+ * tailwind-styled-v4 v2 — AST Transform (RSC-Aware)
+ *
+ * FIXES:
+ *  #01 — Double-merge base in variant component className array
+ *  #08 — Idempotency guard — skip if already transformed
+ *
+ * Pipeline:
+ *   source code
+ *     ↓ idempotency check (new)
+ *     ↓ analyze RSC context
+ *     ↓ hoist components (if needed)
+ *     ↓ detect tw.server.* vs tw.*
+ *     ↓ extract + merge classes
+ *     ↓ compile variants → lookup table (variant-only, no base dupe)
+ *     ↓ generate React.forwardRef component
+ *     ↓ auto "use client" if interactive
+ *     ↓ strip tw import
+ *     ↓ inject transform marker
+ */
+
+import { normalizeClasses } from "./classMerger"
+import { hoistComponents } from "./componentHoister"
+import { analyzeFile, injectClientDirective } from "./rscAnalyzer"
+import { hasTwUsage, isAlreadyTransformed, isDynamic, TRANSFORM_MARKER } from "./twDetector"
+import { compileVariants, generateVariantCode, parseObjectConfig } from "./variantCompiler"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface TransformOptions {
+  mode?: "zero-runtime" | "runtime" | "extract-only"
+  autoClientBoundary?: boolean
+  addDataAttr?: boolean
+  hoist?: boolean
+  filename?: string
+}
+
+export interface TransformResult {
+  code: string
+  classes: string[]
+  rsc?: {
+    isServer: boolean
+    needsClientDirective: boolean
+    clientReasons: string[]
+  }
+  changed: boolean
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Patterns — updated to include server. group
+// ─────────────────────────────────────────────────────────────────────────────
+
+const TEMPLATE_RE = /\btw\.(server\.)?(\w+)`((?:[^`\\]|\\.)*)`/g
+const OBJECT_RE = /\btw\.(server\.)?(\w+)\(\s*(\{[\s\S]*?\})\s*\)/g
+const EXTEND_RE = /(\w+)\.extend`((?:[^`\\]|\\.)*)`/g
+const WRAP_RE = /\btw\((\w+)\)`((?:[^`\\]|\\.)*)`/g
+
+let _idCounter = 0
+function genId(): string {
+  return `c${(++_idCounter).toString(36)}`
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Static component output
+// ─────────────────────────────────────────────────────────────────────────────
+
+function renderStaticComponent(
+  tag: string,
+  classes: string,
+  opts: { addDataAttr: boolean; isServer: boolean; compName?: string }
+): string {
+  const { addDataAttr, compName } = opts
+  const fnName = compName ? `_Tw_${compName}` : `_Tw_${tag}`
+  const dataAttr = addDataAttr
+    ? `, "data-tw": "${fnName}:${classes.split(" ").slice(0, 3).join(" ")}${classes.split(" ").length > 3 ? "..." : ""}"`
+    : ""
+
+  return `React.forwardRef(function ${fnName}(props, ref) {
+  var _c = props.className;
+  var _r = Object.assign({}, props);
+  delete _r.className;
+  return React.createElement("${tag}", Object.assign({ ref }, _r${dataAttr}, { className: [${JSON.stringify(classes)}, _c].filter(Boolean).join(" ") }));
+})`
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Variant component output
+//
+// FIX #01: base is injected here in className array.
+//          lookup table contains ONLY variant-specific classes (not base).
+//          Previously: compileVariants pre-merged base into table → double base.
+// ─────────────────────────────────────────────────────────────────────────────
+
+function renderVariantComponent(
+  tag: string,
+  id: string,
+  base: string,
+  variantKeys: string[],
+  defaults: Record<string, string>,
+  opts: { addDataAttr: boolean; isServer: boolean }
+): string {
+  const { addDataAttr } = opts
+  const fnName = `_TwV_${tag}_${id}`
+  const dataAttr = addDataAttr ? `, "data-tw": "${fnName}"` : ""
+
+  // Destructure variant props to prevent leaking to DOM
+  const vKeys = variantKeys.map((k) => `"${k}"`).join(", ")
+  const destructure =
+    variantKeys.length > 0
+      ? `var _vp = {}; [${vKeys}].forEach(function(k){ _vp[k] = props[k]; delete _rest[k]; });`
+      : ""
+
+  // FIX #01: table values are variant-only (no base pre-merged).
+  // base is injected separately as first element — correct, no duplication.
+  const variantLookup =
+    variantKeys.length > 0
+      ? variantKeys
+          .map(
+            (k) =>
+              `(__vt_${id}["${k}"] && __vt_${id}["${k}"][_vp["${k}"] ?? ${JSON.stringify(defaults[k] ?? "")}] || "")`
+          )
+          .join(", ")
+      : ""
+
+  // FIX #01: [base, ...variantClasses, className] — base appears exactly once
+  const classParts =
+    variantKeys.length > 0
+      ? `[${JSON.stringify(base)}, ${variantLookup}, _rest.className]`
+      : `[${JSON.stringify(base)}, _rest.className]`
+
+  return `React.forwardRef(function ${fnName}(props, ref) {
+  var _rest = Object.assign({}, props);
+  delete _rest.className;
+  ${destructure}
+  return React.createElement("${tag}", Object.assign({ ref }, _rest${dataAttr}, { className: ${classParts}.filter(Boolean).join(" ") }));
+})`
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main transform — RSC-Aware pipeline
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function transformSource(source: string, opts: TransformOptions = {}): TransformResult {
+  const {
+    mode = "zero-runtime",
+    autoClientBoundary = true,
+    addDataAttr = false,
+    hoist = true,
+    filename = "",
+  } = opts
+
+  // ── Fast exits ────────────────────────────────────────────────────────
+  if (!hasTwUsage(source)) {
+    return { code: source, classes: [], changed: false }
+  }
+
+  // FIX #08: Idempotency guard — do not transform already-transformed code
+  if (isAlreadyTransformed(source)) {
+    return { code: source, classes: [], changed: false }
+  }
+
+  if (mode === "runtime" || mode === "extract-only") {
+    return { code: source, classes: [], changed: false }
+  }
+
+  // ── STEP 1: RSC Analysis ───────────────────────────────────────────────
+  const rscAnalysis = analyzeFile(source, filename)
+
+  // ── STEP 2: Component Hoisting ─────────────────────────────────────────
+  let code = source
+  if (hoist) {
+    const hoistResult = hoistComponents(source)
+    if (hoistResult.hoisted.length > 0) {
+      code = hoistResult.code
+      if (process.env.NODE_ENV !== "production") {
+        for (const w of hoistResult.warnings) {
+          console.warn(w)
+        }
+      }
+    }
+  }
+
+  let changed = false
+  const allClasses: string[] = []
+  const prelude: string[] = []
+  let needsReact = false
+
+  // ── STEP 3a: tw.tag`classes` → static forwardRef ───────────────────────
+  code = code.replace(
+    TEMPLATE_RE,
+    (match, serverMark: string | undefined, tag: string, content: string) => {
+      if (isDynamic(content)) return match
+
+      const classes = normalizeClasses(content)
+      if (!classes) return match
+
+      const isServerOnly = !!serverMark
+      allClasses.push(...classes.split(/\s+/).filter(Boolean))
+      changed = true
+      needsReact = true
+
+      const rendered = renderStaticComponent(tag, classes, {
+        addDataAttr,
+        isServer: rscAnalysis.isServer || isServerOnly,
+      })
+
+      return isServerOnly ? `/* @server-only */ ${rendered}` : rendered
+    }
+  )
+
+  // ── STEP 3b: tw.tag({...}) → lookup table + variant forwardRef ─────────
+  code = code.replace(
+    OBJECT_RE,
+    (match, serverMark: string | undefined, tag: string, objectStr: string) => {
+      const { base, variants, compounds, defaults } = parseObjectConfig(objectStr)
+      if (!base && Object.keys(variants).length === 0) return match
+
+      const isServerOnly = !!serverMark
+
+      allClasses.push(...base.split(/\s+/).filter(Boolean))
+      for (const vMap of Object.values(variants)) {
+        for (const cls of Object.values(vMap)) {
+          allClasses.push(...cls.split(/\s+/).filter(Boolean))
+        }
+      }
+
+      changed = true
+      needsReact = true
+
+      const id = genId()
+      // FIX #01: compileVariants no longer merges base into table
+      const compiled = compileVariants(base, variants, compounds, defaults)
+      prelude.push(generateVariantCode(id, compiled))
+
+      const variantKeys = Object.keys(variants)
+      const rendered = renderVariantComponent(tag, id, base, variantKeys, defaults, {
+        addDataAttr,
+        isServer: rscAnalysis.isServer || isServerOnly,
+      })
+
+      return isServerOnly ? `/* @server-only */ ${rendered}` : rendered
+    }
+  )
+
+  // ── STEP 3c: tw(Component)`classes` ─────────────────────────────────────
+  code = code.replace(WRAP_RE, (match, compName: string, content: string) => {
+    if (isDynamic(content)) return match
+
+    const classes = normalizeClasses(content)
+    if (!classes) return match
+
+    allClasses.push(...classes.split(/\s+/).filter(Boolean))
+    changed = true
+    needsReact = true
+
+    return `React.forwardRef(function _TwWrap_${compName}(props, ref) {
+  var _c = [${JSON.stringify(classes)}, props.className].filter(Boolean).join(" ");
+  return React.createElement(${compName}, Object.assign({}, props, { ref, className: _c }));
+})`
+  })
+
+  // ── STEP 3d: Component.extend`classes` ──────────────────────────────────
+  code = code.replace(EXTEND_RE, (match, compName: string, content: string) => {
+    if (isDynamic(content)) return match
+
+    const extra = normalizeClasses(content)
+    if (!extra) return match
+
+    allClasses.push(...extra.split(/\s+/).filter(Boolean))
+    changed = true
+    needsReact = true
+
+    return `React.forwardRef(function _TwExt_${compName}(props, ref) {
+  var _c = [${JSON.stringify(extra)}, props.className].filter(Boolean).join(" ");
+  return React.createElement(${compName}, Object.assign({}, props, { ref, className: _c }));
+})`
+  })
+
+  if (!changed) {
+    return { code: source, classes: [], rsc: rscAnalysis, changed: false }
+  }
+
+  // ── STEP 4: Inject variant lookup tables (prelude) ─────────────────────
+  if (prelude.length > 0) {
+    const importEnd = findAfterImports(code)
+    code = `${code.slice(0, importEnd)}\n${prelude.join("\n")}\n${code.slice(importEnd)}`
+  }
+
+  // ── STEP 5: Ensure React import ─────────────────────────────────────────
+  if (needsReact && !hasReactImport(source)) {
+    code = `import React from "react";\n${code}`
+  }
+
+  // ── STEP 6: RSC auto client boundary ────────────────────────────────────
+  if (autoClientBoundary && rscAnalysis.needsClientDirective) {
+    code = injectClientDirective(code)
+  }
+
+  // ── STEP 7: Strip tw import when fully transformed ──────────────────────
+  const stillUsesTw = /\btw\.(server\.)?\w+[`(]/.test(code) || /\btw\(\w+\)/.test(code)
+  if (!stillUsesTw) {
+    code = code.replace(
+      /import\s*\{[^}]*\btw\b[^}]*\}\s*from\s*["']tailwind-styled-v4["'];?\n?/g,
+      ""
+    )
+  }
+
+  // ── STEP 8: Inject transform marker (FIX #08 — idempotency) ─────────────
+  code = `${TRANSFORM_MARKER}\n${code}`
+
+  return {
+    code,
+    classes: Array.from(new Set(allClasses)),
+    rsc: {
+      isServer: rscAnalysis.isServer,
+      needsClientDirective: rscAnalysis.needsClientDirective,
+      clientReasons: rscAnalysis.clientReasons,
+    },
+    changed: true,
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+function hasReactImport(source: string): boolean {
+  return (
+    source.includes("import React") ||
+    source.includes("from 'react'") ||
+    source.includes('from "react"')
+  )
+}
+
+function findAfterImports(source: string): number {
+  const lines = source.split("\n")
+  let lastImportIdx = 0
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].trim()
+    if (
+      line.startsWith("import ") ||
+      line.startsWith('"use client"') ||
+      line.startsWith("'use client'") ||
+      line.startsWith(TRANSFORM_MARKER) ||
+      line === ""
+    ) {
+      lastImportIdx = i
+    } else if (line && !line.startsWith("//") && !line.startsWith("/*")) {
+      break
+    }
+  }
+
+  return lines.slice(0, lastImportIdx + 1).join("\n").length + 1
+}
+
+export { hasTwUsage as shouldProcess }

package/src/atomicCss.ts

@@ -0,0 +1,275 @@
+/**
+ * tailwind-styled-v4 — Atomic CSS Mode (Optional)
+ *
+ * Mode opsional yang mengubah Tailwind classes menjadi atomic CSS rules.
+ * Mirip konsep StyleX dari Meta — setiap class menghasilkan satu CSS rule.
+ *
+ * Keuntungan:
+ * - CSS global deduplicated (p-4 hanya satu rule di seluruh app)
+ * - Bundle CSS lebih kecil untuk app besar
+ * - Zero duplicate styles
+ *
+ * Mode ini TIDAK mengganti Tailwind — tetap pakai Tailwind utilities,
+ * hanya menambahkan layer extraction untuk SSR streaming.
+ *
+ * Usage:
+ *   withTailwindStyled({ atomic: true })(nextConfig)
+ */
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Atomic class registry (singleton per build)
+// ─────────────────────────────────────────────────────────────────────────────
+
+const REGISTRY = new Map<string, AtomicRule>()
+
+export interface AtomicRule {
+  /** Original Tailwind class */
+  twClass: string
+  /** Generated atomic class name */
+  atomicName: string
+  /** CSS property */
+  property: string
+  /** CSS value */
+  value: string
+  /** Modifier (hover:, md:, etc.) */
+  modifier?: string
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Tailwind → CSS property mapping
+// (subset — full mapping lebih baik generate dari Tailwind JIT)
+// ─────────────────────────────────────────────────────────────────────────────
+
+const TW_PROPERTY_MAP: Record<string, { prop: string; transform?: (val: string) => string }> = {
+  // Spacing
+  p: { prop: "padding", transform: (v) => `${Number(v) * 0.25}rem` },
+  px: { prop: "padding-inline", transform: (v) => `${Number(v) * 0.25}rem` },
+  py: { prop: "padding-block", transform: (v) => `${Number(v) * 0.25}rem` },
+  pt: { prop: "padding-top", transform: (v) => `${Number(v) * 0.25}rem` },
+  pb: { prop: "padding-bottom", transform: (v) => `${Number(v) * 0.25}rem` },
+  pl: { prop: "padding-left", transform: (v) => `${Number(v) * 0.25}rem` },
+  pr: { prop: "padding-right", transform: (v) => `${Number(v) * 0.25}rem` },
+  m: { prop: "margin", transform: (v) => `${Number(v) * 0.25}rem` },
+  mx: { prop: "margin-inline", transform: (v) => `${Number(v) * 0.25}rem` },
+  my: { prop: "margin-block", transform: (v) => `${Number(v) * 0.25}rem` },
+  mt: { prop: "margin-top", transform: (v) => `${Number(v) * 0.25}rem` },
+  mb: { prop: "margin-bottom", transform: (v) => `${Number(v) * 0.25}rem` },
+  ml: { prop: "margin-left", transform: (v) => `${Number(v) * 0.25}rem` },
+  mr: { prop: "margin-right", transform: (v) => `${Number(v) * 0.25}rem` },
+  gap: { prop: "gap", transform: (v) => `${Number(v) * 0.25}rem` },
+  // Sizing
+  w: { prop: "width", transform: sizeValue },
+  h: { prop: "height", transform: sizeValue },
+  // Typography
+  text: { prop: "font-size", transform: textSize },
+  font: { prop: "font-weight", transform: fontWeight },
+  leading: { prop: "line-height", transform: leadingValue },
+  // Misc
+  opacity: { prop: "opacity", transform: (v) => String(Number(v) / 100) },
+  z: { prop: "z-index" },
+  rounded: { prop: "border-radius", transform: (v) => roundedValue(v) },
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+function sizeValue(v: string): string {
+  const num = Number(v)
+  if (!Number.isNaN(num)) return `${num * 0.25}rem`
+  const special: Record<string, string> = {
+    full: "100%",
+    screen: "100vw",
+    auto: "auto",
+    min: "min-content",
+    max: "max-content",
+    fit: "fit-content",
+    svw: "100svw",
+    svh: "100svh",
+  }
+  return special[v] ?? v
+}
+
+function textSize(v: string): string {
+  const map: Record<string, string> = {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem",
+    "6xl": "3.75rem",
+    "7xl": "4.5rem",
+    "8xl": "6rem",
+    "9xl": "8rem",
+  }
+  return map[v] ?? v
+}
+
+function fontWeight(v: string): string {
+  const map: Record<string, string> = {
+    thin: "100",
+    extralight: "200",
+    light: "300",
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+    extrabold: "800",
+    black: "900",
+  }
+  return map[v] ?? v
+}
+
+function leadingValue(v: string): string {
+  const map: Record<string, string> = {
+    none: "1",
+    tight: "1.25",
+    snug: "1.375",
+    normal: "1.5",
+    relaxed: "1.625",
+    loose: "2",
+  }
+  return map[v] ?? v
+}
+
+function roundedValue(v: string): string {
+  const map: Record<string, string> = {
+    "": "0.25rem",
+    sm: "0.125rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px",
+    none: "0",
+  }
+  return map[v] ?? `${v}rem`
+}
+
+function sanitizeClassName(cls: string): string {
+  return cls.replace(/[/:[\].!%]/g, "_")
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main: parse a Tailwind class into atomic rule
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function parseAtomicClass(twClass: string): AtomicRule | null {
+  if (REGISTRY.has(twClass)) return REGISTRY.get(twClass)!
+
+  // Strip modifier (hover:, md:, etc.)
+  const colonIdx = twClass.lastIndexOf(":")
+  const modifier = colonIdx > -1 ? twClass.slice(0, colonIdx) : undefined
+  const base = colonIdx > -1 ? twClass.slice(colonIdx + 1) : twClass
+
+  // Parse prefix and value
+  const dashIdx = base.indexOf("-")
+  if (dashIdx === -1) return null
+
+  const prefix = base.slice(0, dashIdx)
+  const value = base.slice(dashIdx + 1)
+
+  const mapping = TW_PROPERTY_MAP[prefix]
+  if (!mapping) return null
+
+  const cssValue = mapping.transform ? mapping.transform(value) : value
+  const atomicName = `_tw_${sanitizeClassName(twClass)}`
+
+  const rule: AtomicRule = {
+    twClass,
+    atomicName,
+    property: mapping.prop,
+    value: cssValue,
+    modifier,
+  }
+
+  REGISTRY.set(twClass, rule)
+  return rule
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Generate CSS string for a set of atomic rules
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function generateAtomicCss(rules: AtomicRule[]): string {
+  const lines: string[] = []
+
+  for (const rule of rules) {
+    const selector = `.${rule.atomicName}`
+
+    if (rule.modifier) {
+      // Responsive modifiers
+      const breakpoints: Record<string, string> = {
+        sm: "640px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px",
+        "2xl": "1536px",
+      }
+      if (breakpoints[rule.modifier]) {
+        lines.push(
+          `@media (min-width: ${breakpoints[rule.modifier]}) {`,
+          `  ${selector} { ${rule.property}: ${rule.value}; }`,
+          `}`
+        )
+        continue
+      }
+      // Pseudo-class modifiers
+      lines.push(`${selector}:${rule.modifier} { ${rule.property}: ${rule.value}; }`)
+    } else {
+      lines.push(`${selector} { ${rule.property}: ${rule.value}; }`)
+    }
+  }
+
+  return lines.join("\n")
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Convert class string → atomic class string
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function toAtomicClasses(twClasses: string): {
+  atomicClasses: string
+  rules: AtomicRule[]
+  unknownClasses: string[]
+} {
+  const parts = twClasses.split(/\s+/).filter(Boolean)
+  const atomicNames: string[] = []
+  const rules: AtomicRule[] = []
+  const unknownClasses: string[] = []
+
+  for (const cls of parts) {
+    const rule = parseAtomicClass(cls)
+    if (rule) {
+      atomicNames.push(rule.atomicName)
+      rules.push(rule)
+    } else {
+      // Unknown class — keep as-is (Tailwind will handle it)
+      unknownClasses.push(cls)
+      atomicNames.push(cls)
+    }
+  }
+
+  return {
+    atomicClasses: atomicNames.join(" "),
+    rules,
+    unknownClasses,
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Export registry for safelist / CSS file generation
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function getAtomicRegistry(): Map<string, AtomicRule> {
+  return REGISTRY
+}
+
+export function clearAtomicRegistry(): void {
+  REGISTRY.clear()
+}