@tailwind-styled/compiler 2.0.0

package/src/classExtractor.ts

@@ -0,0 +1,69 @@
+/**
+ * tailwind-styled-v4 — classExtractor
+ *
+ * FIX #02: Remove .slice(0, -1) workaround for broken TEMPLATE_RE.
+ * TEMPLATE_RE trailing space is now fixed in twDetector.ts.
+ *
+ * Ekstrak semua Tailwind class dari source untuk safelist generation.
+ */
+
+import { parseComponentConfig } from "./astParser"
+import { EXTEND_RE, OBJECT_RE, TEMPLATE_RE } from "./twDetector"
+
+const VALID_CLASS_RE = /^[-a-z0-9:/[\]!.()+%]+$/
+
+function parseClasses(raw: string): string[] {
+  return raw
+    .split(/[\n\s]+/)
+    .map((c) => c.trim())
+    .filter((c) => c.length > 0 && VALID_CLASS_RE.test(c))
+}
+
+export function extractAllClasses(source: string): string[] {
+  const classes = new Set<string>()
+  const add = (str: string) => {
+    for (const c of parseClasses(str)) classes.add(c)
+  }
+
+  let m: RegExpExecArray | null
+
+  // FIX #02: Use TEMPLATE_RE directly — no more .slice(0, -1) workaround
+  // because trailing space in TEMPLATE_RE is now fixed in twDetector.ts
+  const re1 = new RegExp(TEMPLATE_RE.source, "g")
+  while ((m = re1.exec(source)) !== null) {
+    add(m[3]) // group 3 = content (after adding server. group to TEMPLATE_RE)
+  }
+
+  // UPGRADE #4: Use proper AST parser for object configs
+  const re2 = new RegExp(OBJECT_RE.source, "g")
+  while ((m = re2.exec(source)) !== null) {
+    const parsed = parseComponentConfig(m[3])
+    if (parsed.base) add(parsed.base)
+    for (const vMap of Object.values(parsed.variants)) {
+      for (const cls of Object.values(vMap)) add(cls)
+    }
+    for (const compound of parsed.compounds) {
+      if (compound.class) add(compound.class)
+    }
+  }
+
+  const re3 = new RegExp(EXTEND_RE.source, "g")
+  while ((m = re3.exec(source)) !== null) add(m[2])
+
+  // className="..." in JSX
+  const classNameRe = /className\s*=\s*["']([^"']+)["']/g
+  while ((m = classNameRe.exec(source)) !== null) add(m[1])
+
+  return Array.from(classes).sort()
+}
+
+export { parseClasses }
+// Re-export for backward compat — now use parseComponentConfig from astParser
+export function extractBaseFromObject(objectStr: string): string {
+  return parseComponentConfig(objectStr).base
+}
+export function extractVariantsFromObject(
+  objectStr: string
+): Record<string, Record<string, string>> {
+  return parseComponentConfig(objectStr).variants
+}

package/src/classMerger.ts

@@ -0,0 +1,45 @@
+/**
+ * tailwind-styled-v4 — classMerger
+ *
+ * FIX #05: Ganti custom UTILITY_GROUPS resolver dengan twMerge.
+ *
+ * WHY: Custom regex resolver memiliki banyak edge case yang salah
+ * (ring-, text- grouping, dll). tailwind-merge sudah jadi dependency,
+ * lebih akurat, dan di-maintain oleh komunitas Tailwind.
+ *
+ * RESULT: Output compile-time dan runtime kini identik — tidak ada
+ * behavior perbedaan antara dev mode dan production build.
+ */
+
+import { twMerge } from "tailwind-merge"
+
+/**
+ * Merge Tailwind classes statically at compile time.
+ * Menggunakan tailwind-merge untuk conflict resolution yang akurat.
+ *
+ * FIX #05: Sebelumnya pakai custom UTILITY_GROUPS regex yang tidak
+ * kompatibel dengan tailwind-merge runtime. Sekarang keduanya identik.
+ *
+ * @example
+ * mergeClassesStatic("p-4 p-2 bg-red-500 bg-blue-500")
+ * → "p-2 bg-blue-500"
+ *
+ * mergeClassesStatic("ring-2 ring-4")
+ * → "ring-4"  ✓ (custom resolver dulu return "ring-2 ring-4" — salah!)
+ */
+export function mergeClassesStatic(classes: string): string {
+  return twMerge(classes)
+}
+
+/**
+ * Normalize raw class string — trim, dedupe whitespace, join lines.
+ */
+export function normalizeClasses(raw: string): string {
+  return raw
+    .split("\n")
+    .map((l) => l.trim())
+    .filter(Boolean)
+    .join(" ")
+    .replace(/\s+/g, " ")
+    .trim()
+}

package/src/componentGenerator.ts

@@ -0,0 +1,91 @@
+/**
+ * tailwind-styled-v4 — componentGenerator
+ *
+ * Mengubah hasil compiler menjadi static React component.
+ * Output tidak butuh runtime variant engine — pure className props.
+ *
+ * Input:  tw.div`p-4 bg-white`
+ * Output: React.forwardRef((props, ref) => <div ref={ref} {...props} className={twMerge("p-4 bg-white", props.className)} />)
+ */
+
+import { normalizeClasses } from "./classMerger"
+
+export interface GenerateOptions {
+  /** tambah RSC boundary hint */
+  rscHint?: boolean
+  /** tambah "use client" jika ada interactive features */
+  autoClientBoundary?: boolean
+  /** tambah data-tw debug attribute */
+  addDataAttr?: boolean
+  /** hash untuk component ID */
+  hash?: string
+}
+
+/**
+ * Generate static component untuk tw.tag`classes`
+ */
+export function generateStaticComponent(
+  varName: string,
+  tag: string,
+  classes: string,
+  opts: GenerateOptions = {}
+): string {
+  const normalized = normalizeClasses(classes)
+  const dataAttr = opts.addDataAttr && opts.hash ? ` "data-tw": "${opts.hash}",` : ""
+
+  return `const ${varName} = /*@tw-static*/ React.forwardRef(function ${varName}(props, ref) {
+  const { className, ...rest } = props;
+  return React.createElement("${tag}", {
+    ref,
+    ...rest,${dataAttr}
+    className: [${JSON.stringify(normalized)}, className].filter(Boolean).join(" "),
+  });
+});`
+}
+
+/**
+ * Generate variant component untuk tw.tag({ base, variants })
+ */
+export function generateVariantComponent(
+  varName: string,
+  tag: string,
+  id: string,
+  base: string,
+  defaultVariants: Record<string, string>,
+  variantKeys: string[],
+  opts: GenerateOptions = {}
+): string {
+  const dataAttr = opts.addDataAttr ? ` "data-tw": "${varName}",` : ""
+  const _defaults = JSON.stringify(defaultVariants)
+
+  const variantResolution = variantKeys
+    .map((k) => `const __v_${k} = props.${k} ?? ${JSON.stringify(defaultVariants[k] ?? null)};`)
+    .join("\n  ")
+
+  const classLookups = variantKeys.map((k) => `(__vt_${id}.${k}?.[__v_${k}] ?? "")`).join(", ")
+
+  return `const ${varName} = /*@tw-variant*/ React.forwardRef(function ${varName}(props, ref) {
+  const { className, ${variantKeys.join(", ")}, ...rest } = props;
+  ${variantResolution}
+  const __cls = [${JSON.stringify(base)}, ${classLookups}, className].filter(Boolean).join(" ");
+  return React.createElement("${tag}", {
+    ref,
+    ...rest,${dataAttr}
+    className: __cls,
+  });
+});`
+}
+
+/**
+ * Generate "use client" directive if interactive features detected
+ */
+export function maybeClientDirective(source: string, classes: string): string {
+  const interactive =
+    /\b(hover:|focus:|active:|group-hover:|peer-|useState|useEffect|useRef|onClick|onChange)\b/
+  if (interactive.test(classes) || interactive.test(source)) {
+    if (!source.startsWith('"use client"') && !source.startsWith("'use client'")) {
+      return '"use client";\n'
+    }
+  }
+  return ""
+}

package/src/componentHoister.ts

@@ -0,0 +1,183 @@
+/**
+ * tailwind-styled-v4 — Component Hoister
+ *
+ * Problem: Component yang didefinisikan di dalam fungsi lain
+ * akan direcreate setiap render — sangat buruk untuk performa.
+ *
+ * BEFORE (buruk):
+ *   export default function Page() {
+ *     const Box = tw.div`p-4`   ← dibuat ulang tiap render!
+ *     return <Box/>
+ *   }
+ *
+ * AFTER (benar):
+ *   const Box = tw.div`p-4`    ← module scope, dibuat sekali
+ *   export default function Page() {
+ *     return <Box/>
+ *   }
+ *
+ * Hoister mendeteksi pola ini dan memindahkan deklarasi ke module scope.
+ */
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Patterns
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Match: const Name = tw.tag`...` atau const Name = tw.tag({...})
+// yang ada di dalam function body (indent > 0)
+const INDENTED_TW_DECL_RE = /^([ \t]+)(const|let)\s+([A-Z]\w*)\s*=\s*tw\.[\w]+[`(]/gm
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Hoist analysis
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface HoistResult {
+  code: string
+  hoisted: string[]
+  warnings: string[]
+}
+
+export function hoistComponents(source: string): HoistResult {
+  const hoisted: string[] = []
+  const warnings: string[] = []
+
+  // Cari semua tw declarations yang indented (di dalam function body)
+  const indentedDecls: Array<{
+    fullMatch: string
+    indent: string
+    keyword: string
+    name: string
+    startIndex: number
+  }> = []
+
+  let m: RegExpExecArray | null
+  const re = new RegExp(INDENTED_TW_DECL_RE.source, "gm")
+
+  while ((m = re.exec(source)) !== null) {
+    const indent = m[1]
+    const keyword = m[2]
+    const name = m[3]
+
+    // Hanya hoist components (PascalCase), bukan variables biasa
+    if (!/^[A-Z]/.test(name)) continue
+    // Hanya hoist jika di dalam function (indent > 0)
+    if (indent.length === 0) continue
+
+    indentedDecls.push({
+      fullMatch: m[0],
+      indent,
+      keyword,
+      name,
+      startIndex: m.index,
+    })
+  }
+
+  if (indentedDecls.length === 0) {
+    return { code: source, hoisted: [], warnings: [] }
+  }
+
+  // Untuk setiap indented declaration, extract full statement
+  // dan pindahkan ke top of file
+  let code = source
+  const hoistedDecls: string[] = []
+
+  // Process in reverse order to maintain correct indices
+  for (const decl of [...indentedDecls].reverse()) {
+    const { startIndex, indent, name } = decl
+
+    // Cari end of the tw statement (sampai semicolon atau newline setelah `)`)
+    const lineStart = code.lastIndexOf("\n", startIndex) + 1
+    const restFromDecl = code.slice(lineStart)
+
+    // Extract full statement — bisa multi-line untuk template literals
+    const fullStmt = extractFullStatement(restFromDecl)
+    if (!fullStmt) continue
+
+    // Dedent statement
+    const dedented = fullStmt
+      .split("\n")
+      .map((line) => (line.startsWith(indent) ? line.slice(indent.length) : line))
+      .join("\n")
+      .trim()
+
+    // Remove from original position
+    code = code.slice(0, lineStart) + code.slice(lineStart + fullStmt.length)
+
+    // Collect for hoisting
+    hoistedDecls.unshift(dedented)
+    hoisted.push(name)
+
+    warnings.push(
+      `[tw-hoist] '${name}' moved to module scope for better performance. ` +
+        `Avoid defining tw components inside render functions.`
+    )
+  }
+
+  // Inject hoisted declarations after imports
+  if (hoistedDecls.length > 0) {
+    const insertPoint = findAfterImports(code)
+    const hoistBlock = `\n${hoistedDecls.join("\n\n")}\n`
+    code = code.slice(0, insertPoint) + hoistBlock + code.slice(insertPoint)
+  }
+
+  return { code, hoisted, warnings }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+function extractFullStatement(source: string): string | null {
+  // Match tw template literal statement
+  const templateRe = /^[ \t]*(const|let)\s+\w+\s*=\s*tw\.\w+`[^`]*`.*\n?/
+  const templateMatch = source.match(templateRe)
+  if (templateMatch) return templateMatch[0]
+
+  // Match tw object config statement — may span multiple lines
+  // Find balancing braces
+  const objStart = source.indexOf("tw.")
+  if (objStart === -1) return null
+
+  const parenStart = source.indexOf("(", objStart)
+  if (parenStart === -1) return null
+
+  let depth = 0
+  let i = parenStart
+
+  while (i < source.length) {
+    if (source[i] === "(") depth++
+    if (source[i] === ")") {
+      depth--
+      if (depth === 0) {
+        // Include trailing semicolon and newline
+        const end = source.indexOf("\n", i)
+        return source.slice(0, end === -1 ? i + 1 : end + 1)
+      }
+    }
+    i++
+  }
+
+  return null
+}
+
+function findAfterImports(source: string): number {
+  const lines = source.split("\n")
+  let lastImportLine = 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"')
+    ) {
+      lastImportLine = i
+    } else if (line && !line.startsWith("//") && !line.startsWith("/*") && lastImportLine > 0) {
+      // First non-import, non-comment line after imports
+      break
+    }
+  }
+
+  // Return character index after last import line
+  return lines.slice(0, lastImportLine + 1).join("\n").length + 1
+}