@woodsportal/hubspot-kit 5.0.0-beta.0 → 5.0.0-beta.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+### CSS prefix
+- **Auto-prefix** — class string bindings ending in `_CLASS` (e.g. `CARDS_GRID_CLASS`) are prefixed the same as `*DynamicClassName*`
+- **Auto-prefix** — JSX props ending in `ClassName` (`containerClassName`, `pageLinkClassName`, …) and helpers ending in `Class` (`paginationItemBaseClass`, `navBtnClass`) are prefixed
+
 ## [1.0.44] - 2026-08-06
 
 ### Portal auth scaffold

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woodsportal/hubspot-kit",
-  "version": "5.0.0-beta.0",
+  "version": "5.0.0-beta.2",
   "packageManager": "pnpm@10.12.1",
   "description": "WoodsCLI — HubSpot CMS dev kit by WoodsPortal. wp CLI, Vite presets, module-config overlay, and theme/module build pipelines.",
   "type": "module",
@@ -52,7 +52,7 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "test": "node --import tsx --test 'src/lib/**/*.test.ts' 'src/cli/**/*.test.ts' 'src/schema/**/*.test.ts' 'src/vite/**/*.test.ts' 'scripts/portal-build-id.test.mjs' 'scripts/resolve-consumer-dep.test.mjs' 'scripts/wp-cli-smoke.test.mjs' 'scripts/vite/ensure-dev-kit-shims.test.mjs' 'scripts/vite/consumer-react-aliases.test.mjs' 'scripts/vite/resolve-from-project-root.test.mjs' && vitest run src/dev-module-config/__tests__/normalize-repeater-items.test.ts src/dev-module-config/__tests__/module-config-transform.test.ts src/dev-module-config/__tests__/flatten-visible-fields.test.ts",
+    "test": "node --import tsx --test 'src/lib/**/*.test.ts' 'src/cli/**/*.test.ts' 'src/schema/**/*.test.ts' 'src/vite/**/*.test.ts' 'scripts/portal-build-id.test.mjs' 'scripts/resolve-consumer-dep.test.mjs' 'scripts/wp-cli-smoke.test.mjs' 'scripts/vite/ensure-dev-kit-shims.test.mjs' 'scripts/vite/consumer-react-aliases.test.mjs' 'scripts/vite/resolve-from-project-root.test.mjs' 'scripts/tailwind/prefix-plugin.test.mjs' && vitest run src/dev-module-config/__tests__/normalize-repeater-items.test.ts src/dev-module-config/__tests__/module-config-transform.test.ts src/dev-module-config/__tests__/flatten-visible-fields.test.ts src/dev-module-config/__tests__/drill-down-panels.test.ts",
     "test:examples": "node examples/smoke/run-matrix.mjs --tier static",
     "test:dist-pack": "node --test scripts/dist-cli-pack-smoke.test.mjs",
     "lint": "eslint src",

package/scripts/tailwind/prefix-plugin.js

@@ -7,15 +7,49 @@ import { prefix } from './prefix.env.js'
 const prefix1 = `${prefix}:`
 const prefix2 = `${prefix}\:`
 
+/** Bindings rewritten even when not in `className=`: `*DynamicClassName*`, `_CLASS`, `*ClassName`, `*Class`. */
+export function isClassBindingName(name) {
+  if (!name) return false
+  return (
+    name.includes('DynamicClassName') ||
+    name.endsWith('_CLASS') ||
+    /(?:ClassName|Class)$/.test(name)
+  )
+}
+
+/** JSX / object keys: `className`, `containerClassName`, `pageLinkClassName`, … */
+export function isClassAttrName(name) {
+  if (!name) return false
+  return name === 'className' || name.endsWith('ClassName')
+}
+
+function jsxAttrName(attr) {
+  if (t.isJSXIdentifier(attr.name)) return attr.name.name
+  return ''
+}
+
+function objectKeyName(key) {
+  if (t.isIdentifier(key)) return key.name
+  if (t.isStringLiteral(key)) return key.value
+  return ''
+}
+
+/** Vite serve ids often include `?t=` / `?v=` — strip those before extension checks. */
+function filePathFromId(id) {
+  return (id.split('?')[0] ?? id).replaceAll('\\', '/')
+}
+
 export default function TailwindPrefixPlugin() {
   return {
     name: 'vite-tailwind-prefix',
     enforce: 'pre',
     transform(code, id) {
+      const filename = filePathFromId(id)
+
       // Handle CSS files: prefix custom class selectors safely
-      if (id.endsWith('.css')) {
+      if (filename.endsWith('.css')) {
         // don't need to add prefix to override.style.css
-        if (id.endsWith('override.style.css')) return code;
+        if (filename.endsWith('override.style.css')) return code;
 
 
         const lines = code.split('\n')
@@ -61,7 +95,7 @@ export default function TailwindPrefixPlugin() {
       }
 
 
-      if (!id.endsWith('.tsx') && !id.endsWith('.ts')) return null
+      if (!filename.endsWith('.tsx') && !filename.endsWith('.ts')) return null
 
       try {
         const ast = parse(code, {
@@ -95,23 +129,84 @@ export default function TailwindPrefixPlugin() {
             .join(' ')
         }
 
-        const prefixStringExpr = (expr) => {
+        const prefixExpr = (expr) => {
+          if (!expr) return expr
+
+          if (
+            t.isTSAsExpression(expr) ||
+            t.isTSTypeAssertion(expr) ||
+            t.isTSSatisfiesExpression(expr) ||
+            t.isTSNonNullExpression(expr) ||
+            t.isParenthesizedExpression(expr)
+          ) {
+            expr.expression = prefixExpr(expr.expression)
+            return expr
+          }
+
           if (t.isStringLiteral(expr)) {
             return t.stringLiteral(prefixClasses(expr.value))
           }
+
+          if (t.isTemplateLiteral(expr)) {
+            const quasis = expr.quasis.map((quasi, i) => {
+              let classes = prefixClasses(quasi.value.raw)
+              if (i < expr.expressions.length) classes += ' '
+              if (i > 0 && !classes.startsWith(' ')) classes = ' ' + classes
+              return t.templateElement({ raw: classes, cooked: classes })
+            })
+            const expressions = expr.expressions.map((inner) => prefixExpr(inner))
+            return t.templateLiteral(quasis, expressions)
+          }
+
           if (t.isConditionalExpression(expr)) {
-            return t.conditionalExpression(
-              expr.test,
-              prefixStringExpr(expr.consequent),
-              prefixStringExpr(expr.alternate),
-            )
+            expr.consequent = prefixExpr(expr.consequent)
+            expr.alternate = prefixExpr(expr.alternate)
+            return expr
+          }
+
+          if (t.isLogicalExpression(expr)) {
+            if (t.isStringLiteral(expr.left) || t.isTemplateLiteral(expr.left)) {
+              expr.left = prefixExpr(expr.left)
+            }
+            expr.right = prefixExpr(expr.right)
+            return expr
+          }
+
+          if (t.isObjectExpression(expr)) {
+            expr.properties.forEach((prop) => {
+              if (!t.isObjectProperty(prop) || prop.computed) return
+              prop.value = prefixExpr(prop.value)
+            })
+            return expr
+          }
+
+          if (t.isArrayExpression(expr)) {
+            expr.elements = expr.elements.map((el) => {
+              if (!el || t.isSpreadElement(el)) return el
+              return prefixExpr(el)
+            })
+            return expr
           }
+
+          if (t.isCallExpression(expr)) {
+            expr.arguments = expr.arguments.map((arg) => {
+              if (t.isSpreadElement(arg)) return arg
+              return prefixExpr(arg)
+            })
+            return expr
+          }
+
+          if (t.isArrowFunctionExpression(expr) || t.isFunctionExpression(expr)) {
+            if (!t.isBlockStatement(expr.body)) {
+              expr.body = prefixExpr(expr.body)
+            }
+            return expr
+          }
+
           return expr
         }
 
         traverse.default(ast, {
-          // ✅ Handle variables whose name includes "DynamicClassName"
-
           ReturnStatement(path) {
             const fn = path.getFunctionParent()
             if (!fn) return
@@ -127,186 +222,37 @@ export default function TailwindPrefixPlugin() {
                 fnName = parent.id.name
               }
             }
-            const isClassHelper =
-              fnName.includes('DynamicClassName') ||
-              /(?:ClassName|Class)$/.test(fnName)
-            if (!isClassHelper) return
-
-            if (t.isStringLiteral(path.node.argument)) {
-              path.node.argument = t.stringLiteral(prefixClasses(path.node.argument.value))
-            } else if (t.isConditionalExpression(path.node.argument)) {
-              path.node.argument = prefixStringExpr(path.node.argument)
+            if (!isClassBindingName(fnName)) return
+            if (path.node.argument) {
+              path.node.argument = prefixExpr(path.node.argument)
             }
           },
 
           JSXAttribute(path) {
-            if (path.node.name.name !== 'className') return
-
+            if (!isClassAttrName(jsxAttrName(path.node))) return
             const value = path.node.value
-
-            // String literal: className="..."
             if (t.isStringLiteral(value)) {
               path.node.value = t.stringLiteral(prefixClasses(value.value))
+              return
             }
-            // Template literal: className={`...`}
-            else if (
-              t.isJSXExpressionContainer(value) &&
-              t.isTemplateLiteral(value.expression)
-            ) {
-              const quasis = value.expression.quasis.map((quasi, i) => {
-                let classes = prefixClasses(quasi.value.raw)
-
-                if (i < value.expression.expressions.length) classes += ' '
-                if (i > 0 && !classes.startsWith(' ')) classes = ' ' + classes
-
-                return t.templateElement({ raw: classes, cooked: classes })
-              })
-
-              // 🔥 also fix expressions inside ${ ... }
-              const expressions = value.expression.expressions.map((expr) => {
-                if (t.isStringLiteral(expr)) {
-                  return t.stringLiteral(prefixClasses(expr.value))
-                }
-                if (t.isLogicalExpression(expr)) {
-                  if (t.isStringLiteral(expr.right)) {
-                    return t.logicalExpression(
-                      expr.operator,
-                      expr.left,
-                      t.stringLiteral(prefixClasses(expr.right.value)),
-                    )
-                  }
-                }
-                if (t.isConditionalExpression(expr)) {
-                  const newConsequent = t.isStringLiteral(expr.consequent)
-                    ? t.stringLiteral(prefixClasses(expr.consequent.value))
-                    : expr.consequent
-                  const newAlternate = t.isStringLiteral(expr.alternate)
-                    ? t.stringLiteral(prefixClasses(expr.alternate.value))
-                    : expr.alternate
-                  return t.conditionalExpression(
-                    expr.test,
-                    newConsequent,
-                    newAlternate,
-                  )
-                }
-                return expr
-              })
-
-              path.node.value = t.jsxExpressionContainer(
-                t.templateLiteral(quasis, expressions),
-              )
-            }
-
-            // className={condition ? "..." : "..."}
-            else if (
-              t.isJSXExpressionContainer(value) &&
-              t.isConditionalExpression(value.expression)
-            ) {
-              const expr = value.expression
-              path.node.value = t.jsxExpressionContainer(
-                t.conditionalExpression(
-                  expr.test,
-                  prefixStringExpr(expr.consequent),
-                  prefixStringExpr(expr.alternate),
-                ),
-              )
+            if (t.isJSXExpressionContainer(value)) {
+              value.expression = prefixExpr(value.expression)
             }
+          },
 
-            // Other expressions (e.g., clsx())
-            else if (
-              t.isJSXExpressionContainer(value) &&
-              t.isCallExpression(value.expression)
-            ) {
-              const args = value.expression.arguments.map((arg) => {
-                if (t.isStringLiteral(arg))
-                  return t.stringLiteral(prefixClasses(arg.value))
-                return arg
-              })
-              path.node.value = t.jsxExpressionContainer(
-                t.callExpression(value.expression.callee, args),
-              )
-            }
+          ObjectProperty(path) {
+            if (path.node.computed) return
+            const keyName = objectKeyName(path.node.key)
+            if (!isClassAttrName(keyName) && !isClassBindingName(keyName)) return
+            path.node.value = prefixExpr(path.node.value)
           },
+
           VariableDeclarator(path) {
             const id = path.node.id
             const init = path.node.init
-            if (!t.isIdentifier(id)) return
-
-            // 🔹 only affect DynamicClassName variables
-            if (!id.name.includes('DynamicClassName')) return
-            if (!init) return
-
-            const prefixString = (expr) =>
-              t.isStringLiteral(expr)
-                ? t.stringLiteral(prefixClasses(expr.value))
-                : expr
-
-            const prefixObject = (objExpr) => {
-              if (!t.isObjectExpression(objExpr)) return objExpr
-              objExpr.properties.forEach((prop) => {
-                if (t.isObjectProperty(prop)) {
-                  if (t.isStringLiteral(prop.value)) {
-                    prop.value = t.stringLiteral(
-                      prefixClasses(prop.value.value),
-                    )
-                  } else if (t.isTemplateLiteral(prop.value)) {
-                    const quasis = prop.value.quasis.map((quasi) => {
-                      const raw = prefixClasses(quasi.value.raw)
-                      return t.templateElement({ raw, cooked: raw })
-                    })
-                    prop.value = t.templateLiteral(
-                      quasis,
-                      prop.value.expressions,
-                    )
-                  } else if (t.isObjectExpression(prop.value)) {
-                    prop.value = prefixObject(prop.value) // recurse
-                  } else if (t.isConditionalExpression(prop.value)) {
-                    prop.value = t.conditionalExpression(
-                      prop.value.test,
-                      prefixString(prop.value.consequent),
-                      prefixString(prop.value.alternate),
-                    )
-                  } else if (t.isLogicalExpression(prop.value)) {
-                    const right = t.isStringLiteral(prop.value.right)
-                      ? t.stringLiteral(prefixClasses(prop.value.right.value))
-                      : prop.value.right
-                    prop.value = t.logicalExpression(
-                      prop.value.operator,
-                      prop.value.left,
-                      right,
-                    )
-                  }
-                }
-              })
-              return objExpr
-            }
-
-            if (t.isStringLiteral(init)) {
-              path.node.init = t.stringLiteral(prefixClasses(init.value))
-            } else if (t.isTemplateLiteral(init)) {
-              const quasis = init.quasis.map((quasi) => {
-                const raw = prefixClasses(quasi.value.raw)
-                return t.templateElement({ raw, cooked: raw })
-              })
-              path.node.init = t.templateLiteral(quasis, init.expressions)
-            } else if (t.isObjectExpression(init)) {
-              path.node.init = prefixObject(init)
-            } else if (t.isConditionalExpression(init)) {
-              path.node.init = t.conditionalExpression(
-                init.test,
-                prefixString(init.consequent),
-                prefixString(init.alternate),
-              )
-            } else if (t.isLogicalExpression(init)) {
-              const right = t.isStringLiteral(init.right)
-                ? t.stringLiteral(prefixClasses(init.right.value))
-                : init.right
-              path.node.init = t.logicalExpression(
-                init.operator,
-                init.left,
-                right,
-              )
-            }
+            if (!t.isIdentifier(id) || !init) return
+            if (!isClassBindingName(id.name)) return
+            path.node.init = prefixExpr(init)
           },
         })
 
@@ -322,8 +268,11 @@ export default function TailwindPrefixPlugin() {
 
 // Handles:
 // ✅ className="..."
-// ✅ className={\`...\`}with${"foo"}inside
-// ✅className={cond ? "a" : "b"}
-// ✅className={cond && "foo"}
-// ✅className={clsx("foo", cond && "bar")}
-// ✅const fooDynamicClassName = "..." | {...} | cond ? ... : ...`
+// ✅ containerClassName / *ClassName props
+// ✅ className={`...`} with ${"foo"} inside
+// ✅ className={cond ? "a" : "b"}
+// ✅ className={cond && "foo"}
+// ✅ className={clsx("foo", cond && "bar")}
+// ✅ const fooDynamicClassName = "..." | {...} | cond ? ... : ...
+// ✅ const BUTTON_CLASS / CARDS_GRID_CLASS = "..."
+// ✅ const paginationItemBaseClass / navBtnClass = `...`

package/scripts/tailwind/prefix-plugin.test.mjs

@@ -0,0 +1,110 @@
+import assert from 'node:assert/strict'
+import { describe, it } from 'node:test'
+
+import TailwindPrefixPlugin, {
+  isClassAttrName,
+  isClassBindingName,
+} from './prefix-plugin.js'
+
+function transform(code, id = 'src/Button.tsx') {
+  return TailwindPrefixPlugin().transform(code, id)
+}
+
+describe('isClassBindingName', () => {
+  it('matches DynamicClassName, _CLASS, ClassName, and Class suffixes', () => {
+    assert.equal(isClassBindingName('fooDynamicClassName'), true)
+    assert.equal(isClassBindingName('CARDS_GRID_CLASS'), true)
+    assert.equal(isClassBindingName('paginationItemBaseClass'), true)
+    assert.equal(isClassBindingName('navBtnClass'), true)
+    assert.equal(isClassBindingName('containerClassName'), true)
+    assert.equal(isClassBindingName('LABEL'), false)
+    assert.equal(isClassBindingName('FOO_CLASS_NAME'), false)
+  })
+})
+
+describe('isClassAttrName', () => {
+  it('matches className and *ClassName props', () => {
+    assert.equal(isClassAttrName('className'), true)
+    assert.equal(isClassAttrName('containerClassName'), true)
+    assert.equal(isClassAttrName('pageLinkClassName'), true)
+    assert.equal(isClassAttrName('id'), false)
+    assert.equal(isClassAttrName('classNames'), false)
+  })
+})
+
+describe('vite-tailwind-prefix VariableDeclarator', () => {
+  it('prefixes DynamicClassName string bindings', () => {
+    const result = transform('const fooDynamicClassName = "flex p-4"')
+    assert.match(result.code, /dw:!flex/)
+    assert.match(result.code, /dw:!p-4/)
+  })
+
+  it('prefixes export const *_CLASS strings (no semicolon)', () => {
+    const result = transform(
+      "export const CARDS_GRID_CLASS = 'grid grid-cols-12 md:gap-4 gap-3'\n",
+      'src/dashboard-layout.constants.ts',
+    )
+    assert.match(result.code, /dw:!grid/)
+    assert.match(result.code, /dw:!grid-cols-12/)
+    assert.match(result.code, /dw:md:!gap-4/)
+  })
+
+  it('prefixes *_CLASS object bindings', () => {
+    const result = transform('const CARD_CLASS = { base: "flex gap-2" }')
+    assert.match(result.code, /dw:!flex/)
+    assert.match(result.code, /dw:!gap-2/)
+  })
+
+  it('prefixes paginationItemBaseClass strings', () => {
+    const result = transform(
+      "const paginationItemBaseClass = 'inline-flex shrink-0 items-center'",
+    )
+    assert.match(result.code, /dw:!inline-flex/)
+  })
+
+  it('prefixes navBtnClass template returns', () => {
+    const result = transform(
+      'const navBtnClass = (disabled: boolean) => `inline-flex ${disabled ? "opacity-40" : "cursor-pointer"}`',
+    )
+    assert.match(result.code, /dw:!inline-flex/)
+    assert.match(result.code, /dw:!opacity-40/)
+    assert.match(result.code, /dw:!cursor-pointer/)
+  })
+
+  it('does not prefix unrelated constants', () => {
+    const result = transform('const LABEL = "flex p-4"')
+    assert.match(result.code, /"flex p-4"/)
+    assert.doesNotMatch(result.code, /dw:/)
+  })
+})
+
+describe('vite-tailwind-prefix JSX *ClassName props', () => {
+  it('prefixes className string attributes', () => {
+    const result = transform('export const A = () => <div className="flex p-4" />')
+    assert.match(result.code, /dw:!flex/)
+  })
+
+  it('prefixes containerClassName and other *ClassName props', () => {
+    const result = transform(
+      'export const A = () => <ReactPaginate containerClassName="w-max inline-flex items-center gap-1" pageClassName="list-none" />',
+    )
+    assert.match(result.code, /dw:!w-max/)
+    assert.match(result.code, /dw:!inline-flex/)
+    assert.match(result.code, /dw:!list-none/)
+  })
+
+  it('prefixes pageLinkClassName template literals', () => {
+    const result = transform(
+      'export const A = () => <ReactPaginate pageLinkClassName={`${paginationItemBaseClass} cursor-pointer hover:bg-secondary/5`} />',
+    )
+    assert.match(result.code, /dw:!cursor-pointer/)
+    assert.match(result.code, /dw:hover:!bg-secondary\/5/)
+  })
+})
+
+describe('vite-tailwind-prefix return helpers', () => {
+  it('prefixes functions named *_CLASS', () => {
+    const result = transform('function getButton_CLASS() { return "flex" }')
+    assert.match(result.code, /dw:!flex/)
+  })
+})

package/scripts/tailwind/tailwind-content.js

@@ -115,9 +115,9 @@ function prefixQuotedStringsInExpression(expr) {
 
 // Handle className
 function prefixClassesInCode(code) {
-  // 1) Plain string: className="..."
-  code = code.replace(/className\s*=\s*["']([^"']*)["']/g, (_, classStr) => {
-    return `className="${prefixStaticClasses(classStr)}"`
+  // 1) Plain string: className="..." / containerClassName="..." / *ClassName="..."
+  code = code.replace(/([A-Za-z0-9_]*[Cc]lassName)\s*=\s*["']([^"']*)["']/g, (_, attr, classStr) => {
+    return `${attr}="${prefixStaticClasses(classStr)}"`
   })
 
   // code = code.replace(/className\s*=\s*["']([^"']*)["']/g, (_, classStr) => {
@@ -128,8 +128,8 @@ function prefixClassesInCode(code) {
   //   return `className="${prefixStaticClasses(classStr)}"`
   // })
 
-  // 2) Template literal: className={`...`}
-  code = code.replace(/className\s*=\s*{\s*`([\s\S]*?)`\s*}/g, (_, tplBody) => {
+  // 2) Template literal: className={`...`} / *ClassName={`...`}
+  code = code.replace(/([A-Za-z0-9_]*[Cc]lassName)\s*=\s*{\s*`([\s\S]*?)`\s*}/g, (_, attr, tplBody) => {
     const parts = tplBody.split(/(\$\{[\s\S]*?\})/g)
 
     // const rebuilt = parts
@@ -161,13 +161,13 @@ function prefixClassesInCode(code) {
         .join(' ')
         .replace(/\s+/g, ' ') // collapse multiple spaces
 
-      return `className={\`${rebuilt.trim()}\`}`
+      return `${attr}={\`${rebuilt.trim()}\`}`
   })
 
-  // 3) Ternary expressions: className={cond ? "..." : "..."}
+  // 3) Ternary expressions: className={cond ? "..." : "..."} / *ClassName={...}
   code = code.replace(
-    /className\s*=\s*{([^{};]+?\?[^:]+:[^}]+)}/g,
-    (match, inner) => {
+    /([A-Za-z0-9_]*[Cc]lassName)\s*=\s*{([^{};]+?\?[^:]+:[^}]+)}/g,
+    (match, attr, inner) => {
       const ternaryMatch = inner.match(
         /^(.*?\?)\s*(['"][^'"]*['"])\s*:\s*(['"][^'"]*['"])\s*$/,
       )
@@ -183,42 +183,43 @@ function prefixClassesInCode(code) {
         (_, q, cls) => `${q}${prefixStaticClasses(cls)}${q}`,
       )
 
-      return `className={${condition} ${prefixedTrue} : ${prefixedFalse}}`
+      return `${attr}={${condition} ${prefixedTrue} : ${prefixedFalse}}`
     },
   )
 
-  // 4) Variables with "DynamicClassName" (supports TypeScript annotations like `: any`)
+  // 4) Variables with "DynamicClassName" or suffix `_CLASS` (quoted; no semicolon required)
   code = code.replace(
-    /(const|let|var)\s+([A-Za-z0-9_]*DynamicClassName[A-Za-z0-9_]*)\s*(?::\s*([^=]+))?\s*=\s*([\s\S]*?);/g,
+    /(const|let|var)\s+([A-Za-z0-9_]*(?:DynamicClassName[A-Za-z0-9_]*|_CLASS))\s*(?::\s*([^=]+))?\s*=\s*(['"`])([\s\S]*?)\4/g,
+    (match, decl, varName, typeAnnotation, quote, value) => {
+      const typeSuffix = typeAnnotation ? `: ${typeAnnotation.trim()}` : ''
+      if (quote === '`') {
+        return `${decl} ${varName}${typeSuffix} = \`${prefixTemplateLiteralBody(value)}\``
+      }
+      return `${decl} ${varName}${typeSuffix} = ${quote}${prefixStaticClasses(value)}${quote}`
+    },
+  )
+
+  // 4b) DynamicClassName / _CLASS object or ternary values (semicolon-terminated)
+  code = code.replace(
+    /(const|let|var)\s+([A-Za-z0-9_]*(?:DynamicClassName[A-Za-z0-9_]*|_CLASS))\s*(?::\s*([^=]+))?\s*=\s*(\{[\s\S]*?\}|.+\?.+:.+);/g,
     (match, decl, varName, typeAnnotation, value) => {
       const typeSuffix = typeAnnotation ? `: ${typeAnnotation.trim()}` : ''
       const trimmed = value.trim()
-      if (/^\{[\s\S]*\}$/.test(trimmed)) {
-        return `${decl} ${varName}${typeSuffix} = ${prefixValueStrings(value)};`
-      }
-      if (/\?.*:/.test(trimmed)) {
+      if (/^\{[\s\S]*\}$/.test(trimmed) || /\?.*:/.test(trimmed)) {
         return `${decl} ${varName}${typeSuffix} = ${prefixValueStrings(value)};`
       }
-      if (/^["'`]/.test(trimmed)) {
-        if (trimmed.startsWith('`')) {
-          const body = trimmed.slice(1, -1)
-          return `${decl} ${varName}${typeSuffix} = \`${prefixTemplateLiteralBody(body)}\`;`
-        }
-        const cls = trimmed.slice(1, -1)
-        return `${decl} ${varName}${typeSuffix} = "${prefixStaticClasses(cls)}";`
-      }
       return match
     },
   )
 
-  // 5) Handle classNames(...) or clsx(...)
+  // 5) Handle classNames(...) or clsx(...) on *ClassName props
   code = code.replace(
-    /className\s*=\s*{?\s*(classNames|clsx)\(([\s\S]*?)\)}?/g,
-    (match, fnName, args) => {
+    /([A-Za-z0-9_]*[Cc]lassName)\s*=\s*{?\s*(classNames|clsx)\(([\s\S]*?)\)}?/g,
+    (match, attr, fnName, args) => {
       const transformedArgs = args.replace(/(['"])(.*?)\1/g, (_, q, cls) => {
         return `${q}${prefixStaticClasses(cls)}${q}`
       })
-      return `className={${fnName}(${transformedArgs})}`
+      return `${attr}={${fnName}(${transformedArgs})}`
     },
   )
 

package/scripts/vite/create-dev-server-config.mjs

@@ -48,7 +48,8 @@ export async function createDevServerViteConfig(options = {}) {
   ])
 
   return defineConfig(async ({ mode, command }) => {
-    const prefixPlugins = isPrefix(mode)
+    const usePrefix = isPrefix(mode)
+    const prefixPlugins = usePrefix
       ? [
           (await import('../tailwind/prefix-plugin.js')).default(),
           (await import('../tailwind/tailwind-content-plugin.js')).default(),
@@ -61,10 +62,20 @@ export async function createDevServerViteConfig(options = {}) {
         bootstrapShimResolver({ bootstrapShim, bootstrapGreenfieldShim, kitRoot }),
         resolveFromProjectRoot(projectRoot, kitRoot),
         ...(command === 'serve' ? [sdkLogBridge(), moduleConfigStore(projectRoot)] : []),
+        // Prefix must run before React / compiler so JSX className is still in the source.
+        ...prefixPlugins,
         ...(hasTanStackRoutes ? [TanStackRouterVite({ autoCodeSplitting: false })] : []),
-        viteReact(createDevReactPluginOptions()),
+        viteReact(
+          usePrefix
+            ? {
+                babel: {
+                  // Match production: compiler rewrites className after the prefix pass.
+                  plugins: [],
+                },
+              }
+            : createDevReactPluginOptions(),
+        ),
         tailwindcss(),
-        ...prefixPlugins,
       ],
       resolve: {
         dedupe: [