From b84901211bd222ce352f63d7e945484e206638f3 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 17 Jul 2026 21:03:06 +0000
Subject: [PATCH 1/3] feat: support JSX expression values on className variant
 attributes

Transform conditional modifiers like className:hover={isActive ? 'a' : 'b'}
into prefixed className expressions, extract the resulting classes for the
Tailwind manifest, and merge multiple JSX class values safely with nested braces.

Co-authored-by: Jeremy Butler <jrmybtlr@users.noreply.github.com>
---
 README.md              |  21 ++
 src/core.ts            | 587 +++++++++++++++++++++++++++++++++++------
 src/tests/core.test.ts | 225 +++++++++++++++-
 tasks/todo.md          |  61 ++---
 4 files changed, 776 insertions(+), 118 deletions(-)

diff --git a/README.md b/README.md
index 7f91281..a35eb22 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,7 @@ UseClassy transforms Tailwind variant attributes (`class:hover="..."`) into stan
 
 - Transforms attributes like `class:hover="text-blue-500"` to standard `class="hover:text-blue-500"`.
 - Supports chaining modifiers like `class:dark:hover="text-blue-500"`.
+- Supports React conditional variants: `className:hover={isActive ? 'bg-blue-500' : 'bg-gray-200'}`.
 - Works seamlessly with React (`className`) and Vue/HTML (`class`).
 - Integrates with Vite's build process and dev server. No runtime overhead.
 - Smart Caching: Avoids reprocessing unchanged files during development.
@@ -92,6 +93,26 @@ export default {
 />
 ```
 
+### Conditional / dynamic variants
+
+JSX expression values work too — string literals inside the expression are prefixed with the variant:
+
+```tsx
+// Input
+<button
+  className="px-4 py-2 rounded"
+  className:hover={isActive ? 'bg-blue-500 text-white' : 'bg-gray-200'}
+  className:disabled={isDisabled && 'opacity-50 cursor-not-allowed'}
+/>
+
+// Output
+<button
+  className={`px-4 py-2 rounded ${isActive ? 'hover:bg-blue-500 hover:text-white' : 'hover:bg-gray-200'} ${isDisabled && 'disabled:opacity-50 disabled:cursor-not-allowed'}`}
+/>
+```
+
+Expressions without string literals (e.g. `className:hover={hoverClasses}`) are left unchanged so runtime variables are not corrupted. Prefer string literals in the expression (as above), or store already-prefixed class names in the variable.
+
 ## Vue / HTML Usage (`class`)
 
 ```vue
diff --git a/src/core.ts b/src/core.ts
index 26dc2d2..5275cda 100644
--- a/src/core.ts
+++ b/src/core.ts
@@ -23,6 +23,9 @@ export const REACT_CLASS_REGEX = /(?<![:\w])className=(?:"([^"]*)"|{([^}]*)})(?!
 export const REACT_CLASS_MODIFIER_REGEX
   = /(?<![:\w])(?:className|class):([\w-:]+)="([^"]*)"/g
 
+/** Start of a JSX expression modifier: `className:hover={` or `class:sm:hover={` */
+const JSX_MODIFIER_START_REGEX = /(?<![:\w])(?:className|class):([\w-:]+)=\{/g
+
 /**
  * Generates a hash string from the input string
  */
@@ -61,6 +64,276 @@ function tokenize(str: string, callback: (token: string) => void): void {
   }
 }
 
+/**
+ * Reads a `{...}` JSX expression starting at `openIndex` (must point at `{`).
+ * Respects string/template literals and comments so nested braces are handled.
+ */
+export function readBalancedJsxExpression(
+  code: string,
+  openIndex: number,
+): { content: string, endIndex: number } | null {
+  if (code[openIndex] !== '{')
+    return null
+
+  let depth = 0
+  let inQuote: '"' | '\'' | null = null
+  let inTemplate = false
+  let inLineComment = false
+  let inBlockComment = false
+
+  for (let i = openIndex; i < code.length; i++) {
+    const ch = code[i]
+    const next = code[i + 1]
+
+    if (inLineComment) {
+      if (ch === '\n')
+        inLineComment = false
+      continue
+    }
+
+    if (inBlockComment) {
+      if (ch === '*' && next === '/') {
+        inBlockComment = false
+        i++
+      }
+      continue
+    }
+
+    if (inQuote) {
+      if (ch === '\\') {
+        i++
+        continue
+      }
+      if (ch === inQuote)
+        inQuote = null
+      continue
+    }
+
+    if (inTemplate) {
+      if (ch === '\\') {
+        i++
+        continue
+      }
+      if (ch === '`') {
+        inTemplate = false
+        continue
+      }
+      if (ch === '$' && next === '{') {
+        const nested = readBalancedJsxExpression(code, i + 1)
+        if (!nested)
+          return null
+        i = nested.endIndex
+      }
+      continue
+    }
+
+    if (ch === '"' || ch === '\'') {
+      inQuote = ch
+      continue
+    }
+
+    if (ch === '`') {
+      inTemplate = true
+      continue
+    }
+
+    if (ch === '/' && next === '/') {
+      inLineComment = true
+      i++
+      continue
+    }
+
+    if (ch === '/' && next === '*') {
+      inBlockComment = true
+      i++
+      continue
+    }
+
+    if (ch === '{') {
+      depth++
+      continue
+    }
+
+    if (ch === '}') {
+      depth--
+      if (depth === 0) {
+        return {
+          content: code.slice(openIndex + 1, i),
+          endIndex: i,
+        }
+      }
+    }
+  }
+
+  return null
+}
+
+/**
+ * Builds the prefixed class list for a modifier (full chain + partials).
+ */
+function buildModifiedClasses(
+  classes: string,
+  modifiers: string,
+): string[] {
+  if (!modifiers.trim())
+    return []
+
+  const modifierParts = modifiers.split(':')
+  const modifiedClassesArr: string[] = []
+
+  tokenize(classes, (value) => {
+    modifiedClassesArr.push(`${modifiers}:${value}`)
+    if (modifierParts.length > 1) {
+      for (const part of modifierParts) {
+        if (part)
+          modifiedClassesArr.push(`${part}:${value}`)
+      }
+    }
+  })
+
+  return modifiedClassesArr
+}
+
+/**
+ * Rewrites class string/template literals inside a JSX expression so each token
+ * receives the variant prefix (e.g. `hover:`). Returns null when no literals
+ * were rewritten — callers should leave the original attribute unchanged.
+ */
+function rewriteClassLiteralsInExpression(
+  expr: string,
+  modifiers: string,
+  onClass?: (cls: string) => void,
+): string | null {
+  let result = ''
+  let i = 0
+  let rewrote = false
+
+  const emitModified = (classStr: string): string => {
+    const modified = buildModifiedClasses(classStr, modifiers)
+    if (modified.length === 0)
+      return classStr
+
+    rewrote = true
+    if (onClass) {
+      for (const cls of modified) {
+        if (isTrackedGeneratedClass(cls))
+          onClass(cls)
+      }
+    }
+    return modified.join(' ')
+  }
+
+  while (i < expr.length) {
+    const ch = expr[i]
+
+    if (ch === '"' || ch === '\'') {
+      const quote = ch
+      let j = i + 1
+      let content = ''
+      while (j < expr.length) {
+        if (expr[j] === '\\' && j + 1 < expr.length) {
+          content += expr[j] + expr[j + 1]
+          j += 2
+          continue
+        }
+        if (expr[j] === quote)
+          break
+        content += expr[j]
+        j++
+      }
+      if (j >= expr.length) {
+        result += expr.slice(i)
+        break
+      }
+      result += quote + emitModified(content) + quote
+      i = j + 1
+      continue
+    }
+
+    if (ch === '`') {
+      let j = i + 1
+      let staticPart = ''
+      let rebuilt = '`'
+      let templateClosed = false
+
+      while (j < expr.length) {
+        if (expr[j] === '\\' && j + 1 < expr.length) {
+          staticPart += expr[j] + expr[j + 1]
+          j += 2
+          continue
+        }
+        if (expr[j] === '`') {
+          if (staticPart)
+            rebuilt += emitModified(staticPart)
+          rebuilt += '`'
+          templateClosed = true
+          j++
+          break
+        }
+        if (expr[j] === '$' && expr[j + 1] === '{') {
+          if (staticPart) {
+            rebuilt += emitModified(staticPart)
+            staticPart = ''
+          }
+          const nested = readBalancedJsxExpression(expr, j + 1)
+          if (!nested) {
+            rebuilt += expr.slice(j)
+            j = expr.length
+            break
+          }
+          // Interpolations are runtime values — leave them untouched.
+          rebuilt += '${' + nested.content + '}'
+          j = nested.endIndex + 1
+          continue
+        }
+        staticPart += expr[j]
+        j++
+      }
+
+      result += templateClosed ? rebuilt : expr.slice(i)
+      i = templateClosed ? j : expr.length
+      continue
+    }
+
+    result += ch
+    i++
+  }
+
+  return rewrote ? result : null
+}
+
+function forEachJsxModifier(
+  code: string,
+  callback: (match: {
+    fullStart: number
+    fullEnd: number
+    modifiers: string
+    expression: string
+  }) => void,
+): void {
+  JSX_MODIFIER_START_REGEX.lastIndex = 0
+  let startMatch: RegExpExecArray | null
+  while ((startMatch = JSX_MODIFIER_START_REGEX.exec(code)) !== null) {
+    const modifiers = startMatch[1]
+    const openBraceIndex = startMatch.index + startMatch[0].length - 1
+    const balanced = readBalancedJsxExpression(code, openBraceIndex)
+    if (!balanced || !modifiers) {
+      // Avoid tight loops on malformed `{` without a closing brace.
+      JSX_MODIFIER_START_REGEX.lastIndex = openBraceIndex + 1
+      continue
+    }
+
+    callback({
+      fullStart: startMatch.index,
+      fullEnd: balanced.endIndex + 1,
+      modifiers,
+      expression: balanced.content,
+    })
+
+    JSX_MODIFIER_START_REGEX.lastIndex = balanced.endIndex + 1
+  }
+}
+
 /**
  * Extracts classes from the code, separating base classes and modifier-derived classes.
  */
@@ -129,6 +402,14 @@ export function extractClasses(
       })
     }
   }
+
+  // Conditional / JSX expression modifiers: className:hover={cond ? 'a' : 'b'}
+  forEachJsxModifier(code, ({ modifiers, expression }) => {
+    rewriteClassLiteralsInExpression(expression, modifiers, (cls) => {
+      allFileClasses.add(cls)
+      modifierDerivedClasses.add(cls)
+    })
+  })
 }
 
 function isTrackedGeneratedClass(cls: string): boolean {
@@ -141,7 +422,7 @@ function isTrackedGeneratedClass(cls: string): boolean {
 }
 
 /**
- * Replaces `class:modifier="..."` (or React equivalents) with a single merged attribute.
+ * Replaces `class:modifier="..."` / `className:modifier={...}` with merged attributes.
  */
 export function transformClassModifiers(
   code: string,
@@ -149,21 +430,10 @@ export function transformClassModifiers(
   classModifierRegex: RegExp,
   classAttrName: string,
 ): string {
-  return code.replace(classModifierRegex, (match, modifiers, classes) => {
+  const withStaticModifiers = code.replace(classModifierRegex, (match, modifiers, classes) => {
     if (!modifiers?.trim()) return match
 
-    const modifierParts = modifiers.split(':')
-    const modifiedClassesArr: string[] = []
-
-    tokenize(classes, (value) => {
-      modifiedClassesArr.push(`${modifiers}:${value}`)
-      if (modifierParts.length > 1) {
-        for (const part of modifierParts) {
-          if (part)
-            modifiedClassesArr.push(`${part}:${value}`)
-        }
-      }
-    })
+    const modifiedClassesArr = buildModifiedClasses(classes, modifiers)
 
     for (const cls of modifiedClassesArr) {
       if (isTrackedGeneratedClass(cls))
@@ -172,92 +442,241 @@ export function transformClassModifiers(
 
     return `${classAttrName}="${modifiedClassesArr.join(' ')}"`
   })
+
+  return transformJsxExpressionModifiers(
+    withStaticModifiers,
+    generatedClassesSet,
+    classAttrName,
+  )
 }
 
-const regexCache = new Map<string, { multipleClassRegex: RegExp, attrFinderRegex: RegExp }>()
-
-function getCompiledRegexes(attrName: string): {
-  multipleClassRegex: RegExp
-  attrFinderRegex: RegExp
-} {
-  let cached = regexCache.get(attrName)
-  if (!cached) {
-    cached = {
-      multipleClassRegex: new RegExp(
-        `(?<![:\\w])((?:${attrName}|class)=(?:(?:"[^"]*")|(?:{[^}]*})))`
-        + `(?:\\s+((?:${attrName}|class)=(?:(?:"[^"]*")|(?:{[^}]*}))))*`,
-        'g',
-      ),
-      attrFinderRegex: new RegExp(
-        `(?:${attrName}|class)=(?:(?:"([^"]*)")|(?:{([^}]*)}))`,
-        'g',
-      ),
-    }
-    regexCache.set(attrName, cached)
+/**
+ * Transforms `className:hover={cond ? 'a' : 'b'}` into
+ * `className={cond ? 'hover:a' : 'hover:b'}`. Leaves expression-only values
+ * (no string literals) unchanged so runtime variables stay intact.
+ */
+function transformJsxExpressionModifiers(
+  code: string,
+  generatedClassesSet: Set<string>,
+  classAttrName: string,
+): string {
+  const replacements: Array<{ start: number, end: number, text: string }> = []
+
+  forEachJsxModifier(code, ({ fullStart, fullEnd, modifiers, expression }) => {
+    if (!modifiers.trim())
+      return
+
+    const rewritten = rewriteClassLiteralsInExpression(
+      expression,
+      modifiers,
+      (cls) => {
+        generatedClassesSet.add(cls)
+      },
+    )
+
+    if (rewritten === null)
+      return
+
+    replacements.push({
+      start: fullStart,
+      end: fullEnd,
+      text: `${classAttrName}={${rewritten}}`,
+    })
+  })
+
+  if (replacements.length === 0)
+    return code
+
+  // Apply from the end so earlier offsets stay valid.
+  let result = code
+  for (let i = replacements.length - 1; i >= 0; i--) {
+    const replacement = replacements[i]
+    if (!replacement)
+      continue
+    result = result.slice(0, replacement.start)
+      + replacement.text
+      + result.slice(replacement.end)
   }
-  return cached
+  return result
 }
 
-/** Collapses repeated `class` / `className` attributes on one element (Vue or React). */
-export function mergeClassAttributes(code: string, attrName: string): string {
-  const { multipleClassRegex, attrFinderRegex } = getCompiledRegexes(attrName)
-
-  return code.replace(multipleClassRegex, (match) => {
-    attrFinderRegex.lastIndex = 0
-    const staticClasses: string[] = []
-    let jsxExpr: string | null = null
-    let isFunctionCall = false
+interface ParsedClassAttr {
+  start: number
+  end: number
+  staticValue?: string
+  jsxValue?: string
+}
 
-    let singleAttrMatch
-    while ((singleAttrMatch = attrFinderRegex.exec(match)) !== null) {
-      const staticClassValue = singleAttrMatch[1]
-      const potentialJsx = singleAttrMatch[2]
+function isClassAttrNameBoundary(code: string, index: number): boolean {
+  if (index <= 0)
+    return true
+  const prev = code[index - 1]
+  return prev !== ':' && !((prev >= 'a' && prev <= 'z')
+    || (prev >= 'A' && prev <= 'Z')
+    || (prev >= '0' && prev <= '9')
+    || prev === '_')
+}
 
-      if (staticClassValue?.trim()) {
-        staticClasses.push(staticClassValue.trim())
+function matchClassAttrAt(
+  code: string,
+  index: number,
+  attrName: string,
+): ParsedClassAttr | null {
+  const names = attrName === 'className' ? ['className', 'class'] as const : ['class'] as const
+
+  for (const name of names) {
+    if (!code.startsWith(`${name}=`, index))
+      continue
+    if (!isClassAttrNameBoundary(code, index))
+      continue
+
+    const valueIndex = index + name.length + 1
+    const valueCh = code[valueIndex]
+
+    if (valueCh === '"') {
+      let j = valueIndex + 1
+      while (j < code.length) {
+        if (code[j] === '\\') {
+          j += 2
+          continue
+        }
+        if (code[j] === '"')
+          break
+        j++
       }
-      else if (potentialJsx) {
-        const currentJsx = potentialJsx.trim()
-        if (currentJsx) {
-          if (currentJsx.startsWith('`') && currentJsx.endsWith('`')) {
-            const literalContent = currentJsx.slice(1, -1).trim()
-            if (literalContent) {
-              staticClasses.push(literalContent)
-            }
-          }
-          else {
-            const currentIsFunctionCall = /^[a-zA-Z_][\w.]*\(.*\)$/.test(currentJsx)
+      if (j >= code.length)
+        return null
+      return {
+        start: index,
+        end: j + 1,
+        staticValue: code.slice(valueIndex + 1, j),
+      }
+    }
 
-            if (!jsxExpr || (currentIsFunctionCall && !isFunctionCall)) {
-              jsxExpr = currentJsx
-              isFunctionCall = currentIsFunctionCall
-            }
-            else if (currentIsFunctionCall && isFunctionCall) {
-              jsxExpr = currentJsx
-            }
-            else if (!jsxExpr) {
-              jsxExpr = currentJsx
-              isFunctionCall = false
-            }
-          }
-        }
+    if (valueCh === '{') {
+      const balanced = readBalancedJsxExpression(code, valueIndex)
+      if (!balanced)
+        return null
+      return {
+        start: index,
+        end: balanced.endIndex + 1,
+        jsxValue: balanced.content,
       }
     }
+  }
 
-    const combinedStatic = staticClasses.join(' ').trim()
+  return null
+}
 
-    if (jsxExpr) {
-      if (!combinedStatic)
-        return `${attrName}={${jsxExpr}}`
+function skipAttrSeparator(code: string, index: number): number {
+  let i = index
+  while (i < code.length) {
+    const ch = code[i]
+    if (ch === ' ' || ch === '\t' || ch === '\n' || ch === '\r') {
+      i++
+      continue
+    }
+    break
+  }
+  return i
+}
 
-      return `${attrName}={\`${combinedStatic} \${${jsxExpr}}\`}`
+function mergeParsedClassAttrs(
+  attrs: ParsedClassAttr[],
+  attrName: string,
+): string {
+  const staticClasses: string[] = []
+  const jsxExprs: string[] = []
+
+  for (const attr of attrs) {
+    if (attr.staticValue?.trim()) {
+      staticClasses.push(attr.staticValue.trim())
+      continue
     }
+
+    if (!attr.jsxValue)
+      continue
+
+    const currentJsx = attr.jsxValue.trim()
+    if (!currentJsx)
+      continue
+
+    if (currentJsx.startsWith('`') && currentJsx.endsWith('`')) {
+      const inner = currentJsx.slice(1, -1)
+      if (!inner.includes('${')) {
+        const literalContent = inner.trim()
+        if (literalContent)
+          staticClasses.push(literalContent)
+        continue
+      }
+    }
+
+    jsxExprs.push(currentJsx)
+  }
+
+  const combinedStatic = staticClasses.join(' ').trim()
+
+  if (jsxExprs.length > 0) {
+    if (jsxExprs.length === 1 && !combinedStatic)
+      return `${attrName}={${jsxExprs[0]}}`
+
+    const dynamicParts = jsxExprs.map((expr) => {
+      if (expr.startsWith('`') && expr.endsWith('`'))
+        return expr.slice(1, -1)
+      return `\${${expr}}`
+    }).join(' ')
+
     if (combinedStatic)
-      return `${attrName}="${combinedStatic}"`
+      return `${attrName}={\`${combinedStatic} ${dynamicParts}\`}`
+
+    return `${attrName}={\`${dynamicParts}\`}`
+  }
+  if (combinedStatic)
+    return `${attrName}="${combinedStatic}"`
+
+  if (process.env.NODE_ENV !== 'test') {
+    console.warn('No classes found in class attribute group')
+  }
+  return ''
+}
+
+/** Collapses repeated `class` / `className` attributes on one element (Vue or React). */
+export function mergeClassAttributes(code: string, attrName: string): string {
+  let result = ''
+  let i = 0
+
+  while (i < code.length) {
+    const attr = matchClassAttrAt(code, i, attrName)
+    if (!attr) {
+      result += code[i]
+      i++
+      continue
+    }
 
-    if (process.env.NODE_ENV !== 'test') {
-      console.warn('No classes found in class attribute:', match)
+    // Skip Vue `class=` that is actually part of `:class` — handled by boundary check.
+    const group: ParsedClassAttr[] = [attr]
+    let cursor = attr.end
+
+    while (true) {
+      const nextIndex = skipAttrSeparator(code, cursor)
+      if (nextIndex === cursor)
+        break
+      const nextAttr = matchClassAttrAt(code, nextIndex, attrName)
+      if (!nextAttr)
+        break
+      // Only merge when attributes are adjacent (whitespace-separated).
+      group.push(nextAttr)
+      cursor = nextAttr.end
     }
-    return ''
-  })
+
+    if (group.length === 1) {
+      result += code.slice(attr.start, attr.end)
+    }
+    else {
+      result += mergeParsedClassAttrs(group, attrName)
+    }
+    i = cursor
+  }
+
+  return result
 }
diff --git a/src/tests/core.test.ts b/src/tests/core.test.ts
index dd1b5b0..76602fa 100644
--- a/src/tests/core.test.ts
+++ b/src/tests/core.test.ts
@@ -154,6 +154,64 @@ describe('core module', () => {
       expect(modifierClasses.size).toBe(0)
     })
 
+    it('should extract classes from conditional className:modifier JSX expressions', () => {
+      const code
+        = `<div className:hover={isActive ? 'bg-blue-500' : 'bg-gray-200'}>Content</div>`
+      const allClasses = new Set<string>()
+      const modifierClasses = new Set<string>()
+
+      extractClasses(
+        code,
+        allClasses,
+        modifierClasses,
+        REACT_CLASS_REGEX,
+        REACT_CLASS_MODIFIER_REGEX,
+      )
+
+      expect(allClasses.has('hover:bg-blue-500')).toBeTruthy()
+      expect(allClasses.has('hover:bg-gray-200')).toBeTruthy()
+      expect(modifierClasses.has('hover:bg-blue-500')).toBeTruthy()
+      expect(modifierClasses.has('hover:bg-gray-200')).toBeTruthy()
+    })
+
+    it('should extract nested modifier classes from JSX expressions', () => {
+      const code
+        = `<div className:sm:hover={cond ? 'text-lg' : "text-sm"}>Content</div>`
+      const allClasses = new Set<string>()
+      const modifierClasses = new Set<string>()
+
+      extractClasses(
+        code,
+        allClasses,
+        modifierClasses,
+        REACT_CLASS_REGEX,
+        REACT_CLASS_MODIFIER_REGEX,
+      )
+
+      expect(allClasses.has('sm:hover:text-lg')).toBeTruthy()
+      expect(allClasses.has('sm:text-lg')).toBeTruthy()
+      expect(allClasses.has('hover:text-lg')).toBeTruthy()
+      expect(allClasses.has('sm:hover:text-sm')).toBeTruthy()
+      expect(modifierClasses.has('sm:hover:text-lg')).toBeTruthy()
+    })
+
+    it('should ignore className:modifier expressions without string literals', () => {
+      const code = '<div className:hover={hoverClasses}>Content</div>'
+      const allClasses = new Set<string>()
+      const modifierClasses = new Set<string>()
+
+      extractClasses(
+        code,
+        allClasses,
+        modifierClasses,
+        REACT_CLASS_REGEX,
+        REACT_CLASS_MODIFIER_REGEX,
+      )
+
+      expect(allClasses.size).toBe(0)
+      expect(modifierClasses.size).toBe(0)
+    })
+
     it('should ignore empty classes', () => {
       const code = '<div class="  ">Content</div>'
       const allClasses = new Set<string>()
@@ -322,6 +380,95 @@ describe('core module', () => {
       expect(classes.has('hover:text-blue-500')).toBeTruthy()
     })
 
+    it('should transform conditional className:modifier JSX expressions', () => {
+      const code
+        = `<div className:hover={isActive ? 'bg-blue-500' : 'bg-gray-200'}>Content</div>`
+      const classes = new Set<string>()
+
+      const result = transformClassModifiers(
+        code,
+        classes,
+        REACT_CLASS_MODIFIER_REGEX,
+        'className',
+      )
+
+      expect(result).toBe(
+        `<div className={isActive ? 'hover:bg-blue-500' : 'hover:bg-gray-200'}>Content</div>`,
+      )
+      expect(classes.has('hover:bg-blue-500')).toBeTruthy()
+      expect(classes.has('hover:bg-gray-200')).toBeTruthy()
+    })
+
+    it('should transform logical && className:modifier expressions', () => {
+      const code = `<button className:disabled={isDisabled && 'opacity-50 cursor-not-allowed'}>Go</button>`
+      const classes = new Set<string>()
+
+      const result = transformClassModifiers(
+        code,
+        classes,
+        REACT_CLASS_MODIFIER_REGEX,
+        'className',
+      )
+
+      expect(result).toBe(
+        `<button className={isDisabled && 'disabled:opacity-50 disabled:cursor-not-allowed'}>Go</button>`,
+      )
+      expect(classes.has('disabled:opacity-50')).toBeTruthy()
+      expect(classes.has('disabled:cursor-not-allowed')).toBeTruthy()
+    })
+
+    it('should transform nested modifiers inside JSX expressions', () => {
+      const code = `<div className:sm:hover={on ? 'text-lg' : 'text-sm'}>X</div>`
+      const classes = new Set<string>()
+
+      const result = transformClassModifiers(
+        code,
+        classes,
+        REACT_CLASS_MODIFIER_REGEX,
+        'className',
+      )
+
+      expect(result).toBe(
+        `<div className={on ? 'sm:hover:text-lg sm:text-lg hover:text-lg' : 'sm:hover:text-sm sm:text-sm hover:text-sm'}>X</div>`,
+      )
+      expect(classes.has('sm:hover:text-lg')).toBeTruthy()
+      expect(classes.has('hover:text-sm')).toBeTruthy()
+    })
+
+    it('should leave className:modifier variable expressions unchanged', () => {
+      const code = '<div className:hover={hoverClasses}>Content</div>'
+      const classes = new Set<string>()
+
+      const result = transformClassModifiers(
+        code,
+        classes,
+        REACT_CLASS_MODIFIER_REGEX,
+        'className',
+      )
+
+      expect(result).toBe(code)
+      expect(classes.size).toBe(0)
+    })
+
+    it('should rewrite string literals inside nested JSX braces', () => {
+      const code
+        = `<div className:hover={cn({ 'bg-blue-500': isActive, 'bg-gray-200': !isActive })}>X</div>`
+      const classes = new Set<string>()
+
+      const result = transformClassModifiers(
+        code,
+        classes,
+        REACT_CLASS_MODIFIER_REGEX,
+        'className',
+      )
+
+      expect(result).toBe(
+        `<div className={cn({ 'hover:bg-blue-500': isActive, 'hover:bg-gray-200': !isActive })}>X</div>`,
+      )
+      expect(classes.has('hover:bg-blue-500')).toBeTruthy()
+      expect(classes.has('hover:bg-gray-200')).toBeTruthy()
+    })
+
     it('should handle multiple class values per modifier', () => {
       const code = '<div class:hover="text-blue-500 bg-gray-100">Content</div>'
       const classes = new Set<string>()
@@ -645,10 +792,9 @@ describe('core module', () => {
 
       const result = mergeClassAttributes(code, 'className')
 
-      expect(result).toContain('className=')
-      expect(result).toContain('flex')
-      // Should handle multiple expressions by prioritizing function calls
-      expect(result).toContain('active ?')
+      expect(result).toBe(
+        '<div className={`flex ${active ? "bg-blue-500" : ""} ${theme}`}>Content</div>',
+      )
     })
 
     it('should handle template literals with complex expressions', () => {
@@ -738,4 +884,75 @@ describe('core module', () => {
       expect(result).not.toContain('class:hover')
     })
   })
+
+  describe('React conditional className:modifier pipeline', () => {
+    it('should merge static className with transformed conditional modifiers', () => {
+      const code = `<button
+        className="px-4 py-2"
+        className:hover={isActive ? 'bg-blue-500' : 'bg-gray-200'}
+      >Save</button>`
+      const classes = new Set<string>()
+
+      const afterModifiers = transformClassModifiers(
+        code,
+        classes,
+        REACT_CLASS_MODIFIER_REGEX,
+        'className',
+      )
+      const result = mergeClassAttributes(afterModifiers, 'className')
+
+      expect(result).toBe(
+        `<button
+        className={\`px-4 py-2 \${isActive ? 'hover:bg-blue-500' : 'hover:bg-gray-200'}\`}
+      >Save</button>`,
+      )
+      expect(classes.has('hover:bg-blue-500')).toBeTruthy()
+      expect(classes.has('hover:bg-gray-200')).toBeTruthy()
+      expect(result).not.toContain('className:hover')
+    })
+
+    it('should merge nested-brace conditional modifiers with static classes', () => {
+      const code
+        = `<div className="flex" className:hover={cn({ 'bg-blue-500': on })}>X</div>`
+      const classes = new Set<string>()
+
+      const afterModifiers = transformClassModifiers(
+        code,
+        classes,
+        REACT_CLASS_MODIFIER_REGEX,
+        'className',
+      )
+      const result = mergeClassAttributes(afterModifiers, 'className')
+
+      expect(result).toBe(
+        `<div className={\`flex \${cn({ 'hover:bg-blue-500': on })}\`}>X</div>`,
+      )
+      expect(classes.has('hover:bg-blue-500')).toBeTruthy()
+    })
+
+    it('should keep multiple conditional modifiers when merging', () => {
+      const code = `<button
+        className="px-4"
+        className:hover={isActive ? 'bg-blue-500' : 'bg-gray-200'}
+        className:disabled={isDisabled && 'opacity-50'}
+      >Save</button>`
+      const classes = new Set<string>()
+
+      const afterModifiers = transformClassModifiers(
+        code,
+        classes,
+        REACT_CLASS_MODIFIER_REGEX,
+        'className',
+      )
+      const result = mergeClassAttributes(afterModifiers, 'className')
+
+      expect(result).toBe(
+        `<button
+        className={\`px-4 \${isActive ? 'hover:bg-blue-500' : 'hover:bg-gray-200'} \${isDisabled && 'disabled:opacity-50'}\`}
+      >Save</button>`,
+      )
+      expect(classes.has('hover:bg-blue-500')).toBeTruthy()
+      expect(classes.has('disabled:opacity-50')).toBeTruthy()
+    })
+  })
 })
diff --git a/tasks/todo.md b/tasks/todo.md
index f0b3e11..b1a6ea7 100644
--- a/tasks/todo.md
+++ b/tasks/todo.md
@@ -1,41 +1,42 @@
-# Issue #36: Manifest written too late for Tailwind
+# Feature: Dynamic/conditional variant syntax (JSX expressions)
 
-## Review summary
+## Goal
 
-**Valid bug** against published `vite-plugin-useclassy@3.1.0`.
+Support React JSX expression values on variant attributes, e.g.:
 
-Tailwind v4 reads `.classy/output.classy.html` via `@source` while CSS compiles.
-Published 3.1.0 only wrote that file in `buildEnd`, so the first cold `vite build`
-missed UseClassy variants (`md:h-40`). A second build worked because the first
-left a manifest behind.
+```tsx
+className:hover={isActive ? 'bg-blue-500' : 'bg-gray-200'}
+```
 
-## Fix (this PR)
+Today only quoted strings (`className:hover="..."`) are matched; expression forms are ignored.
 
-- [x] Run project/blade scan on `buildStart` in **dev and build**
-- [x] Pass instance `writeDirect` into early scan (triggers `onWrote`)
-- [x] Invalidate CSS modules after manifest writes in Dev (HMR)
-- [x] Allowlist the manifest in `.classy/.gitignore` so Oxide can read `@source`
-- [x] Use function-based Vite watch ignore for `.classy/` (avoid HTML full reload)
-- [x] Tests for early scan + CSS invalidation + gitignore allowlist
-- [x] Commit, push, open PR (#37)
+## Plan
 
-## Verification
+- [x] Branch `cursor/jsx-conditional-variants-1ea7`
+- [x] Add balanced-brace scanner + string-literal class prefixing in `src/core.ts`
+- [x] Extract modified classes from JSX expression modifiers into the Tailwind manifest
+- [x] Transform `className:mod={expr}` / `class:mod={expr}` → `className={prefixedExpr}`
+- [x] Ensure `mergeClassAttributes` handles nested `{}` in JSX values (needed after transform)
+- [x] Tests for extract + transform + merge + nested modifiers + edge cases
+- [x] Document React conditional usage in README
+- [x] Run unit tests; commit, push, open PR
 
-- Fresh `vite build` with empty `.classy/` includes variant classes in CSS (reproduced on react demo: `md:text-7xl`)
-- Published 3.1.0 still fails first build; local fix succeeds
-- Unit tests: 179 passed
-- CI checks green on PR head
+## Design notes
 
-## Review (post-implementation)
+- Keep zero new dependencies; extend the existing regex/scanner approach
+- Rewrite whitespace-separated tokens inside `'...'`, `"..."`, and static `` `...` `` literals
+- Leave template interpolations (`${...}`) untouched
+- Nested modifiers keep current behavior: full chain + partials (`sm:hover` → `sm:hover:X sm:X hover:X`)
+- Vue quoted `class:hover="..."` path unchanged
+- Expressions with no string literals are left unchanged
 
-Verified against reproduction matching issue #36:
+## Review
 
-1. **Cold `vite build`** with empty `.classy/`: CSS includes `md:h-40` on the first run.
-2. **Dev HMR**: adding `class:hover="text-pink-500"` updates the manifest and the
-   Tailwind CSS (`?direct`) without a full page reload.
-3. Published 3.1.0 still writes only at `buildEnd` and fails the cold build.
+Implemented in `src/core.ts`:
 
-Root causes addressed:
-- Manifest was written too late for Tailwind's CSS pass → early `buildStart` scan.
-- Dev updates did not refresh Tailwind → `handleHotUpdate` + CSS invalidation.
-- Nested `.classy/.gitignore` of `*` blocked Oxide → allowlist the manifest file.
+1. **`readBalancedJsxExpression`** — brace scanner that respects strings/templates/comments
+2. **`rewriteClassLiteralsInExpression`** — prefixes class tokens inside literals
+3. **`transformJsxExpressionModifiers`** — `className:hover={...}` → `className={...}`
+4. **`mergeClassAttributes`** — scanner-based merge; keeps multiple JSX exprs; nested `{}` safe
+
+Verification: **190** unit tests passed (11 new). README documents the syntax.

From 2723bc2bc263a4ab4f8aeba85bab446caa0f433a Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 17 Jul 2026 21:25:27 +0000
Subject: [PATCH 2/3] feat(demo): showcase conditional className variant
 expressions

Add an interactive React demo for className:hover/{disabled} JSX
expressions, widen attribute typings for conditional values, and coerce
falsy interpolations when merging so `cond && 'class'` stays safe.

Co-authored-by: Jeremy Butler <jrmybtlr@users.noreply.github.com>
---
 README.md                  |  2 +-
 demos/react/src/App.tsx    | 33 +++++++++++++++++++++++++++++++--
 demos/react/src/react.d.ts |  4 ++--
 src/core.ts                |  4 +++-
 src/tests/core.test.ts     | 10 +++++-----
 5 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index a35eb22..98f95b7 100644
--- a/README.md
+++ b/README.md
@@ -107,7 +107,7 @@ JSX expression values work too — string literals inside the expression are pre
 
 // Output
 <button
-  className={`px-4 py-2 rounded ${isActive ? 'hover:bg-blue-500 hover:text-white' : 'hover:bg-gray-200'} ${isDisabled && 'disabled:opacity-50 disabled:cursor-not-allowed'}`}
+  className={`px-4 py-2 rounded ${(isActive ? 'hover:bg-blue-500 hover:text-white' : 'hover:bg-gray-200') || ''} ${(isDisabled && 'disabled:opacity-50 disabled:cursor-not-allowed') || ''}`}
 />
 ```
 
diff --git a/demos/react/src/App.tsx b/demos/react/src/App.tsx
index b976d01..317f88b 100644
--- a/demos/react/src/App.tsx
+++ b/demos/react/src/App.tsx
@@ -1,8 +1,12 @@
+import { useState } from "react";
 import { twMerge } from "tailwind-merge";
 
 function App() {
+  const [isActive, setIsActive] = useState(true);
+  const [isDisabled, setIsDisabled] = useState(false);
+
   return (
-    <div className="flex flex-col h-screen items-center justify-center">
+    <div className="flex flex-col h-screen items-center justify-center gap-10">
       <h1
         className="font-bold text-4xl"
         className:md="text-7xl text-blue-200"
@@ -12,11 +16,36 @@ function App() {
       </h1>
 
       <div
-        className={twMerge("mt-12 text-4xl text-red-500")}
+        className={twMerge("text-4xl text-red-500")}
         className:hover="text-blue-500"
       >
         Tailwind Merge
       </div>
+
+      <div className="flex flex-col items-center gap-4">
+        <p className="text-sm text-zinc-400">Conditional variants</p>
+
+        <button
+          type="button"
+          disabled={isDisabled}
+          className="px-6 py-3 rounded-lg font-semibold transition"
+          className:hover={isActive ? "bg-blue-500 text-white scale-105" : "bg-zinc-700 text-zinc-200"}
+          className:disabled={isDisabled && "opacity-40 cursor-not-allowed"}
+          className:focus="ring-2 ring-blue-300 outline-none"
+          onClick={() => setIsActive((value) => !value)}
+        >
+          {isActive ? "Active hover styles" : "Muted hover styles"}
+        </button>
+
+        <label className="flex items-center gap-2 text-sm text-zinc-300">
+          <input
+            type="checkbox"
+            checked={isDisabled}
+            onChange={(event) => setIsDisabled(event.target.checked)}
+          />
+          Disabled
+        </label>
+      </div>
     </div>
   );
 }
diff --git a/demos/react/src/react.d.ts b/demos/react/src/react.d.ts
index 0ba17f0..5cd8c7d 100644
--- a/demos/react/src/react.d.ts
+++ b/demos/react/src/react.d.ts
@@ -2,7 +2,7 @@ import "react";
 
 declare module "react" {
   interface HTMLAttributes<T extends HTMLElement> {
-    [key: `class:${string}`]: string;
-    [key: `className:${string}`]: string;
+    [key: `class:${string}`]: string | undefined | null | false;
+    [key: `className:${string}`]: string | undefined | null | false;
   }
 }
diff --git a/src/core.ts b/src/core.ts
index 5275cda..8bcbe99 100644
--- a/src/core.ts
+++ b/src/core.ts
@@ -623,7 +623,9 @@ function mergeParsedClassAttrs(
     const dynamicParts = jsxExprs.map((expr) => {
       if (expr.startsWith('`') && expr.endsWith('`'))
         return expr.slice(1, -1)
-      return `\${${expr}}`
+      // Coerce falsy runtime values (e.g. `cond && 'class'`) so template
+      // interpolation does not stringify `false` into the class list.
+      return `\${(${expr}) || ''}`
     }).join(' ')
 
     if (combinedStatic)
diff --git a/src/tests/core.test.ts b/src/tests/core.test.ts
index 76602fa..d56e3e8 100644
--- a/src/tests/core.test.ts
+++ b/src/tests/core.test.ts
@@ -706,7 +706,7 @@ describe('core module', () => {
       const result = mergeClassAttributes(code, 'className')
 
       expect(result).toBe(
-        '<div className={`flex ${active ? "bg-blue-500" : ""}`}>Content</div>',
+        '<div className={`flex ${(active ? "bg-blue-500" : "") || \'\'}`}>Content</div>',
       )
     })
 
@@ -793,7 +793,7 @@ describe('core module', () => {
       const result = mergeClassAttributes(code, 'className')
 
       expect(result).toBe(
-        '<div className={`flex ${active ? "bg-blue-500" : ""} ${theme}`}>Content</div>',
+        '<div className={`flex ${(active ? "bg-blue-500" : "") || \'\'} ${(theme) || \'\'}`}>Content</div>',
       )
     })
 
@@ -903,7 +903,7 @@ describe('core module', () => {
 
       expect(result).toBe(
         `<button
-        className={\`px-4 py-2 \${isActive ? 'hover:bg-blue-500' : 'hover:bg-gray-200'}\`}
+        className={\`px-4 py-2 \${(isActive ? 'hover:bg-blue-500' : 'hover:bg-gray-200') || ''}\`}
       >Save</button>`,
       )
       expect(classes.has('hover:bg-blue-500')).toBeTruthy()
@@ -925,7 +925,7 @@ describe('core module', () => {
       const result = mergeClassAttributes(afterModifiers, 'className')
 
       expect(result).toBe(
-        `<div className={\`flex \${cn({ 'hover:bg-blue-500': on })}\`}>X</div>`,
+        `<div className={\`flex \${(cn({ 'hover:bg-blue-500': on })) || ''}\`}>X</div>`,
       )
       expect(classes.has('hover:bg-blue-500')).toBeTruthy()
     })
@@ -948,7 +948,7 @@ describe('core module', () => {
 
       expect(result).toBe(
         `<button
-        className={\`px-4 \${isActive ? 'hover:bg-blue-500' : 'hover:bg-gray-200'} \${isDisabled && 'disabled:opacity-50'}\`}
+        className={\`px-4 \${(isActive ? 'hover:bg-blue-500' : 'hover:bg-gray-200') || ''} \${(isDisabled && 'disabled:opacity-50') || ''}\`}
       >Save</button>`,
       )
       expect(classes.has('hover:bg-blue-500')).toBeTruthy()

From 266c30ec3f9ff4ba8ad4389a5309c36a4b8813db Mon Sep 17 00:00:00 2001
From: Jeremy Butler <jeremy.butler@laravel.com>
Date: Tue, 21 Jul 2026 19:34:02 +1000
Subject: [PATCH 3/3] feat: enhance JSX class handling by preserving comparison
 operands and method receivers

- Implemented logic to prevent rewriting of comparison string operands and string method receivers within JSX expressions, ensuring they remain untouched during class attribute processing.
- Added regression tests to verify that expressions like `status === 'active'` and `'primary'.includes(kind)` are correctly handled without modification.
- Updated documentation to reflect changes in JSX conditional class rewrites.
---
 demos/react/src/App.tsx     | 268 +++++++++++++++++++++++++++++++-----
 demos/react/src/react.d.ts  |  14 +-
 demos/svelte/src/App.svelte | 223 +++++++++++++++++++++++++++---
 src/core.ts                 | 144 ++++++++++++++++---
 src/tests/core.test.ts      | 115 ++++++++++++++++
 tasks/lessons.md            |   7 +
 6 files changed, 699 insertions(+), 72 deletions(-)
 create mode 100644 tasks/lessons.md

diff --git a/demos/react/src/App.tsx b/demos/react/src/App.tsx
index 317f88b..177cfdf 100644
--- a/demos/react/src/App.tsx
+++ b/demos/react/src/App.tsx
@@ -1,53 +1,257 @@
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
 
+/** Tiny class-map helper to exercise nested-brace rewrites (`cn({ '…': cond })`). */
+function cn(map: Record<string, boolean | undefined>): string {
+  return Object.entries(map)
+    .filter(([, on]) => Boolean(on))
+    .map(([cls]) => cls)
+    .join(" ");
+}
+
+type Status = "active" | "muted" | "danger";
+
 function App() {
   const [isActive, setIsActive] = useState(true);
   const [isDisabled, setIsDisabled] = useState(false);
+  const [status, setStatus] = useState<Status>("active");
+  const [kind, setKind] = useState("primary");
 
   return (
-    <div className="flex flex-col h-screen items-center justify-center gap-10">
-      <h1
-        className="font-bold text-4xl"
-        className:md="text-7xl text-blue-200"
-        className:hover="text-red-500"
-      >
-        React Demo
-      </h1>
-
-      <div
-        className={twMerge("text-4xl text-red-500")}
-        className:hover="text-blue-500"
-      >
-        Tailwind Merge
-      </div>
-
-      <div className="flex flex-col items-center gap-4">
-        <p className="text-sm text-zinc-400">Conditional variants</p>
-
-        <button
-          type="button"
-          disabled={isDisabled}
-          className="px-6 py-3 rounded-lg font-semibold transition"
-          className:hover={isActive ? "bg-blue-500 text-white scale-105" : "bg-zinc-700 text-zinc-200"}
-          className:disabled={isDisabled && "opacity-40 cursor-not-allowed"}
-          className:focus="ring-2 ring-blue-300 outline-none"
-          onClick={() => setIsActive((value) => !value)}
+    <div
+      className="min-h-screen flex flex-col items-center gap-10 px-4 py-10"
+      className:md="gap-12 py-16 px-8"
+    >
+      <header className="flex flex-col items-center gap-3 text-center">
+        <h1
+          className="font-bold text-4xl"
+          className:md="text-7xl text-blue-200"
+          className:hover="text-red-500"
         >
-          {isActive ? "Active hover styles" : "Muted hover styles"}
-        </button>
+          React Demo
+        </h1>
+        <p className="max-w-xl text-sm text-zinc-400">
+          Smoke coverage for quoted modifiers, conditionals, comparison
+          operands, nested braces, and multi-modifier merges.
+        </p>
+      </header>
 
-        <label className="flex items-center gap-2 text-sm text-zinc-300">
+      {/* Controls */}
+      <section
+        className="flex flex-wrap items-center justify-center gap-4 text-sm text-zinc-300"
+        className:md="gap-6"
+      >
+        <label className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            checked={isActive}
+            onChange={(event) => setIsActive(event.target.checked)}
+          />
+          isActive
+        </label>
+        <label className="flex items-center gap-2">
           <input
             type="checkbox"
             checked={isDisabled}
             onChange={(event) => setIsDisabled(event.target.checked)}
           />
-          Disabled
+          isDisabled
         </label>
+        <label className="flex items-center gap-2">
+          status
+          <select
+            className="rounded bg-zinc-900 border border-zinc-700 px-2 py-1"
+            value={status}
+            onChange={(event) => setStatus(event.target.value as Status)}
+          >
+            <option value="active">active</option>
+            <option value="muted">muted</option>
+            <option value="danger">danger</option>
+          </select>
+        </label>
+        <label className="flex items-center gap-2">
+          kind
+          <select
+            className="rounded bg-zinc-900 border border-zinc-700 px-2 py-1"
+            value={kind}
+            onChange={(event) => setKind(event.target.value)}
+          >
+            <option value="primary">primary</option>
+            <option value="secondary">secondary</option>
+          </select>
+        </label>
+      </section>
+
+      <div
+        className="w-full max-w-3xl flex flex-col gap-8"
+        className:md="gap-10"
+      >
+        {/* Quoted static + twMerge */}
+        <Case
+          title="Quoted modifiers + twMerge"
+          detail="className:hover=&quot;…&quot; merged with an existing className expression"
+        >
+          <div
+            className={twMerge("text-2xl text-red-500")}
+            className:hover="text-blue-500"
+            className:md="text-4xl"
+          >
+            Hover me · resize for md
+          </div>
+        </Case>
+
+        {/* Boolean ternary + && + quoted focus */}
+        <Case
+          title="Boolean ternary + && + quoted focus"
+          detail="Multi-modifier merge with falsy coercion on disabled"
+        >
+          <button
+            type="button"
+            disabled={isDisabled}
+            className="px-6 py-3 rounded-lg font-semibold transition"
+            className:hover={
+              isActive
+                ? "bg-blue-500 text-white scale-105"
+                : "bg-zinc-700 text-zinc-200"
+            }
+            className:disabled={isDisabled && "opacity-40 cursor-not-allowed"}
+            className:focus="ring-2 ring-blue-300 outline-none"
+            onClick={() => setIsActive((value) => !value)}
+          >
+            {isActive ? "Active hover styles" : "Muted hover styles"}
+          </button>
+        </Case>
+
+        {/* Comparison operands must stay unprefixed */}
+        <Case
+          title="Comparison string operands"
+          detail="status === 'active' must not become status === 'hover:active'"
+        >
+          <button
+            type="button"
+            className="px-6 py-3 rounded-lg font-semibold transition border border-zinc-700"
+            className:hover={
+              status === "active"
+                ? "bg-emerald-500 text-white"
+                : status === "danger"
+                  ? "bg-red-500 text-white"
+                  : "bg-zinc-700 text-zinc-200"
+            }
+            className:focus="ring-2 ring-emerald-300 outline-none"
+            onClick={() =>
+              setStatus((current) =>
+                current === "active"
+                  ? "muted"
+                  : current === "muted"
+                    ? "danger"
+                    : "active",
+              )
+            }
+          >
+            status === &apos;{status}&apos; (click to cycle)
+          </button>
+        </Case>
+
+        {/* Method receiver left alone */}
+        <Case
+          title="String method receiver"
+          detail="'primary'.includes(kind) must keep the bare 'primary' literal"
+        >
+          <div
+            className="px-5 py-3 rounded-lg border border-zinc-700"
+            className:hover={
+              "primary".includes(kind)
+                ? "bg-indigo-500 text-white"
+                : "bg-zinc-800 text-zinc-300"
+            }
+            className:sm="text-lg"
+          >
+            kind=&quot;{kind}&quot; →{" "}
+            {"primary".includes(kind) ? "primary branch" : "fallback branch"}
+          </div>
+        </Case>
+
+        {/* Nested modifiers */}
+        <Case
+          title="Nested modifiers"
+          detail="className:sm:hover expands full chain + partials for Tailwind"
+        >
+          <div
+            className="px-5 py-3 rounded-lg bg-zinc-900"
+            className:sm:hover={
+              isActive ? "text-lg text-sky-300" : "text-sm text-zinc-400"
+            }
+            className:lg:focus-within="ring-2 ring-sky-400"
+          >
+            sm:hover + lg:focus-within — tab or hover at breakpoints
+            <input
+              className="mt-2 block w-full rounded bg-zinc-950 border border-zinc-700 px-2 py-1 text-sm"
+              placeholder="focus within"
+            />
+          </div>
+        </Case>
+
+        {/* Nested braces / cn object map */}
+        <Case
+          title="Nested braces (cn object map)"
+          detail="Rewrites string keys inside cn({ … }) without dropping braces"
+        >
+          <div
+            className="px-5 py-3 rounded-lg border border-zinc-700"
+            className:hover={cn({
+              "bg-blue-500 text-white": status === "active",
+              "bg-red-500 text-white": status === "danger",
+              "bg-zinc-700 text-zinc-200": status === "muted",
+            })}
+            className:active="scale-95"
+          >
+            cn map keyed by status
+          </div>
+        </Case>
+
+        {/* Mixed static, template-ish merge, and dual conditionals */}
+        <Case
+          title="Mixed static + dual conditionals"
+          detail="Preserves multiple JSX class values when merging"
+        >
+          <button
+            type="button"
+            disabled={isDisabled}
+            className="px-4 py-2 rounded font-medium border border-zinc-600"
+            className:hover={
+              status !== "muted" ? "bg-violet-600 text-white" : "bg-zinc-800"
+            }
+            className:disabled={isDisabled && "opacity-50 cursor-not-allowed"}
+            className:sm:hover="underline"
+            className:dark="ring-1 ring-zinc-500"
+            onClick={() => setIsDisabled((value) => !value)}
+          >
+            Toggle disabled from button
+          </button>
+        </Case>
       </div>
     </div>
   );
 }
 
+function Case({
+  title,
+  detail,
+  children,
+}: {
+  title: string;
+  detail: string;
+  children: ReactNode;
+}) {
+  return (
+    <section className="flex flex-col gap-3">
+      <div>
+        <h2 className="text-base font-semibold text-zinc-100">{title}</h2>
+        <p className="text-xs text-zinc-500">{detail}</p>
+      </div>
+      {children}
+    </section>
+  );
+}
+
 export default App;
diff --git a/demos/react/src/react.d.ts b/demos/react/src/react.d.ts
index 5cd8c7d..e160568 100644
--- a/demos/react/src/react.d.ts
+++ b/demos/react/src/react.d.ts
@@ -2,7 +2,17 @@ import "react";
 
 declare module "react" {
   interface HTMLAttributes<T extends HTMLElement> {
-    [key: `class:${string}`]: string | undefined | null | false;
-    [key: `className:${string}`]: string | undefined | null | false;
+    [key: `class:${string}`]:
+      | string
+      | undefined
+      | null
+      | false
+      | number;
+    [key: `className:${string}`]:
+      | string
+      | undefined
+      | null
+      | false
+      | number;
   }
 }
diff --git a/demos/svelte/src/App.svelte b/demos/svelte/src/App.svelte
index 442fac4..bee9cd1 100644
--- a/demos/svelte/src/App.svelte
+++ b/demos/svelte/src/App.svelte
@@ -1,25 +1,210 @@
 <script lang="ts">
+  type Status = 'active' | 'muted' | 'danger'
+
   let pressed = $state(false)
+  let isActive = $state(true)
+  let isDisabled = $state(false)
+  let status = $state<Status>('active')
+  let showBadge = $state(true)
+
+  function cycleStatus() {
+    status =
+      status === 'active' ? 'muted' : status === 'muted' ? 'danger' : 'active'
+  }
 </script>
 
-<div class="flex flex-col h-screen items-center justify-center">
-  <h1
-    class="font-bold text-4xl"
-    class:md="text-7xl text-blue-200"
-    class:hover="text-red-500"
-  >
-    Svelte Demo
-  </h1>
-
-  <button
-    type="button"
-    class="mt-12 text-4xl text-red-500"
-    class:hover="text-blue-500"
-    class:scale-110={pressed}
-    onpointerdown={() => (pressed = true)}
-    onpointerup={() => (pressed = false)}
-    onpointerleave={() => (pressed = false)}
+<div
+  class="min-h-screen flex flex-col items-center gap-10 px-4 py-10"
+  class:md="gap-12 py-16 px-8"
+>
+  <header class="flex flex-col items-center gap-3 text-center">
+    <h1
+      class="font-bold text-4xl"
+      class:md="text-7xl text-blue-200"
+      class:hover="text-red-500"
+    >
+      Svelte Demo
+    </h1>
+    <p class="max-w-xl text-sm text-zinc-400">
+      Smoke coverage for quoted UseClassy modifiers, nested variants, and
+      coexistence with native <code class="text-zinc-300">class:name</code> directives.
+    </p>
+  </header>
+
+  <!-- Controls -->
+  <section
+    class="flex flex-wrap items-center justify-center gap-4 text-sm text-zinc-300"
+    class:md="gap-6"
   >
-    Native class directive
-  </button>
+    <label class="flex items-center gap-2">
+      <input type="checkbox" bind:checked={isActive} />
+      isActive
+    </label>
+    <label class="flex items-center gap-2">
+      <input type="checkbox" bind:checked={isDisabled} />
+      isDisabled
+    </label>
+    <label class="flex items-center gap-2">
+      <input type="checkbox" bind:checked={showBadge} />
+      showBadge
+    </label>
+    <button
+      type="button"
+      class="rounded bg-zinc-900 border border-zinc-700 px-2 py-1"
+      class:hover="border-zinc-500"
+      onclick={cycleStatus}
+    >
+      status: {status}
+    </button>
+  </section>
+
+  <div class="w-full max-w-3xl flex flex-col gap-8" class:md="gap-10">
+    <!-- Quoted static + nested -->
+    <section class="flex flex-col gap-3">
+      <div>
+        <h2 class="text-base font-semibold text-zinc-100">
+          Quoted modifiers + nested
+        </h2>
+        <p class="text-xs text-zinc-500">
+          class:hover / class:sm:hover / class:md — UseClassy quoted values only
+        </p>
+      </div>
+      <div
+        class="px-5 py-3 rounded-lg bg-zinc-900 text-red-400"
+        class:hover="text-blue-400"
+        class:sm:hover="text-lg scale-105"
+        class:md="text-2xl"
+      >
+        Hover · resize for sm/md
+      </div>
+    </section>
+
+    <!-- Native directive preserved beside UseClassy -->
+    <section class="flex flex-col gap-3">
+      <div>
+        <h2 class="text-base font-semibold text-zinc-100">
+          Native class directive + UseClassy
+        </h2>
+        <p class="text-xs text-zinc-500">
+          class:scale-110=&#123;pressed&#125; and class:disabled stay native; class:hover is rewritten
+        </p>
+      </div>
+      <button
+        type="button"
+        class="px-6 py-3 rounded-lg text-2xl text-red-500 border border-zinc-700 transition"
+        class:hover="text-blue-500 border-blue-500"
+        class:focus="ring-2 ring-blue-300 outline-none"
+        class:scale-110={pressed}
+        class:opacity-50={isDisabled}
+        disabled={isDisabled}
+        onpointerdown={() => (pressed = true)}
+        onpointerup={() => (pressed = false)}
+        onpointerleave={() => (pressed = false)}
+      >
+        Hold to scale (native) · hover for UseClassy
+      </button>
+    </section>
+
+    <!-- Shorthand native + multi UseClassy -->
+    <section class="flex flex-col gap-3">
+      <div>
+        <h2 class="text-base font-semibold text-zinc-100">
+          Shorthand native + multi modifiers
+        </h2>
+        <p class="text-xs text-zinc-500">
+          class:active shorthand preserved next to class:hover / class:sm:focus
+        </p>
+      </div>
+      <button
+        type="button"
+        class="px-5 py-3 rounded-lg font-semibold border border-zinc-600 bg-zinc-950"
+        class:active={isActive}
+        class:hover="bg-violet-600 text-white"
+        class:sm:focus="ring-2 ring-violet-300 outline-none"
+        class:lg:hover="scale-105"
+        onclick={() => (isActive = !isActive)}
+      >
+        active shorthand · click toggles isActive ({isActive})
+      </button>
+    </section>
+
+    <!-- Template literal class + UseClassy variants -->
+    <section class="flex flex-col gap-3">
+      <div>
+        <h2 class="text-base font-semibold text-zinc-100">
+          Template class + variants
+        </h2>
+        <p class="text-xs text-zinc-500">
+          Static tokens in class=&#123;`…`&#125; extract; modifiers still merge
+        </p>
+      </div>
+      <div
+        class={`flex items-center gap-3 px-4 py-3 rounded-lg border border-zinc-700`}
+        class:hover="border-emerald-500"
+        class:sm:hover="bg-zinc-900"
+      >
+        <span
+          class="inline-block size-2 rounded-full bg-zinc-600"
+          class:hover="bg-emerald-400"
+        ></span>
+        Template base + hover border
+      </div>
+    </section>
+
+    <!-- Status-driven native classes with UseClassy chrome -->
+    <section class="flex flex-col gap-3">
+      <div>
+        <h2 class="text-base font-semibold text-zinc-100">
+          Status via native directives
+        </h2>
+        <p class="text-xs text-zinc-500">
+          Conditional visuals use native class:name=&#123;cond&#125;; chrome uses UseClassy quotes
+        </p>
+      </div>
+      <button
+        type="button"
+        class="px-5 py-3 rounded-lg font-medium border border-zinc-700 transition"
+        class:hover="underline"
+        class:focus="ring-2 ring-zinc-400 outline-none"
+        class:bg-emerald-600={status === 'active'}
+        class:text-white={status === 'active' || status === 'danger'}
+        class:bg-red-600={status === 'danger'}
+        class:bg-zinc-800={status === 'muted'}
+        class:text-zinc-300={status === 'muted'}
+        onclick={cycleStatus}
+      >
+        Native status colors · UseClassy hover underline
+      </button>
+    </section>
+
+    <!-- Badge toggle + nested responsive focus -->
+    <section class="flex flex-col gap-3">
+      <div>
+        <h2 class="text-base font-semibold text-zinc-100">
+          Mixed visibility + nested focus
+        </h2>
+        <p class="text-xs text-zinc-500">
+          class:hidden=&#123;!showBadge&#125; with class:md:hover / class:focus-within
+        </p>
+      </div>
+      <div
+        class="px-5 py-4 rounded-lg bg-zinc-900 border border-zinc-800"
+        class:md:hover="border-sky-500"
+        class:focus-within="ring-2 ring-sky-400"
+      >
+        <span
+          class="inline-flex items-center rounded-full px-2 py-0.5 text-xs bg-sky-500/20 text-sky-300"
+          class:hidden={!showBadge}
+          class:hover="bg-sky-500/40"
+        >
+          badge
+        </span>
+        <input
+          class="mt-3 block w-full rounded bg-zinc-950 border border-zinc-700 px-2 py-1 text-sm"
+          class:focus="border-sky-400 outline-none"
+          placeholder="focus-within the card"
+        />
+      </div>
+    </section>
+  </div>
 </div>
diff --git a/src/core.ts b/src/core.ts
index 479d4b9..cb82283 100644
--- a/src/core.ts
+++ b/src/core.ts
@@ -23,8 +23,8 @@ export const REACT_CLASS_REGEX = /(?<![:\w])className=(?:"([^"]*)"|{([^}]*)})(?!
 export const REACT_CLASS_MODIFIER_REGEX
   = /(?<![:\w])(?:className|class):([\w-:]+)="([^"]*)"/g
 
-/** Start of a JSX expression modifier: `className:hover={` or `class:sm:hover={` */
-const JSX_MODIFIER_START_REGEX = /(?<![:\w])(?:className|class):([\w-:]+)=\{/g
+/** Start of a JSX expression modifier: `className:hover={` or `class:sm:hover = {` */
+const JSX_MODIFIER_START_REGEX = /(?<![:\w])(?:className|class):([\w-:]+)\s*=\s*\{/g
 
 /**
  * Svelte `class` regexes.
@@ -205,10 +205,56 @@ function buildModifiedClasses(
   return modifiedClassesArr
 }
 
+/**
+ * True when a string/template literal is a comparison operand or method receiver
+ * (e.g. `status === 'active'`, `'x'.includes(y)`), not a class list to prefix.
+ */
+function isNonClassStringLiteral(
+  expr: string,
+  literalStart: number,
+  literalEndExclusive: number,
+): boolean {
+  let before = literalStart - 1
+  while (before >= 0 && /\s/.test(expr.charAt(before)))
+    before--
+
+  if (before >= 0) {
+    if (
+      (before >= 2 && expr.slice(before - 2, before + 1) === '===')
+      || (before >= 2 && expr.slice(before - 2, before + 1) === '!==')
+      || (before >= 1 && expr.slice(before - 1, before + 1) === '==')
+      || (before >= 1 && expr.slice(before - 1, before + 1) === '!=')
+    ) {
+      return true
+    }
+  }
+
+  let after = literalEndExclusive
+  while (after < expr.length && /\s/.test(expr.charAt(after)))
+    after++
+
+  if (after < expr.length) {
+    if (
+      expr.startsWith('===', after)
+      || expr.startsWith('!==', after)
+      || expr.startsWith('==', after)
+      || expr.startsWith('!=', after)
+      || expr.charAt(after) === '.'
+    ) {
+      return true
+    }
+  }
+
+  return false
+}
+
 /**
  * Rewrites class string/template literals inside a JSX expression so each token
  * receives the variant prefix (e.g. `hover:`). Returns null when no literals
  * were rewritten — callers should leave the original attribute unchanged.
+ *
+ * Comparison operands and string method receivers are left untouched so
+ * `status === 'active' ? 'bg-a' : 'bg-b'` does not become `'hover:active'`.
  */
 function rewriteClassLiteralsInExpression(
   expr: string,
@@ -236,6 +282,31 @@ function rewriteClassLiteralsInExpression(
 
   while (i < expr.length) {
     const ch = expr[i]
+    const next = expr[i + 1]
+
+    // Skip comments so quotes inside them are not treated as class literals.
+    if (ch === '/' && next === '/') {
+      const start = i
+      i += 2
+      while (i < expr.length && expr[i] !== '\n')
+        i++
+      result += expr.slice(start, i)
+      continue
+    }
+
+    if (ch === '/' && next === '*') {
+      const start = i
+      i += 2
+      while (i < expr.length) {
+        if (expr[i] === '*' && expr[i + 1] === '/') {
+          i += 2
+          break
+        }
+        i++
+      }
+      result += expr.slice(start, i)
+      continue
+    }
 
     if (ch === '"' || ch === '\'') {
       const quote = ch
@@ -256,53 +327,88 @@ function rewriteClassLiteralsInExpression(
         result += expr.slice(i)
         break
       }
-      result += quote + emitModified(content) + quote
-      i = j + 1
+      const endExclusive = j + 1
+      const nextContent = isNonClassStringLiteral(expr, i, endExclusive)
+        ? content
+        : emitModified(content)
+      result += quote + nextContent + quote
+      i = endExclusive
       continue
     }
 
     if (ch === '`') {
       let j = i + 1
-      let staticPart = ''
-      let rebuilt = '`'
       let templateClosed = false
 
+      // Locate the closing backtick first so comparison/method templates
+      // can be skipped without emitting prefixed classes.
       while (j < expr.length) {
         if (expr[j] === '\\' && j + 1 < expr.length) {
-          staticPart += expr[j] + expr[j + 1]
           j += 2
           continue
         }
         if (expr[j] === '`') {
-          if (staticPart)
-            rebuilt += emitModified(staticPart)
-          rebuilt += '`'
           templateClosed = true
           j++
           break
         }
         if (expr[j] === '$' && expr[j + 1] === '{') {
+          const nested = readBalancedJsxExpression(expr, j + 1)
+          if (!nested) {
+            j = expr.length
+            break
+          }
+          j = nested.endIndex + 1
+          continue
+        }
+        j++
+      }
+
+      if (!templateClosed) {
+        result += expr.slice(i)
+        break
+      }
+
+      if (isNonClassStringLiteral(expr, i, j)) {
+        result += expr.slice(i, j)
+        i = j
+        continue
+      }
+
+      let k = i + 1
+      let staticPart = ''
+      let rebuilt = '`'
+
+      while (k < j - 1) {
+        if (expr[k] === '\\' && k + 1 < expr.length) {
+          staticPart += expr[k] + expr[k + 1]
+          k += 2
+          continue
+        }
+        if (expr[k] === '$' && expr[k + 1] === '{') {
           if (staticPart) {
             rebuilt += emitModified(staticPart)
             staticPart = ''
           }
-          const nested = readBalancedJsxExpression(expr, j + 1)
+          const nested = readBalancedJsxExpression(expr, k + 1)
           if (!nested) {
-            rebuilt += expr.slice(j)
-            j = expr.length
+            rebuilt += expr.slice(k, j - 1)
             break
           }
-          // Interpolations are runtime values — leave them untouched.
           rebuilt += '${' + nested.content + '}'
-          j = nested.endIndex + 1
+          k = nested.endIndex + 1
           continue
         }
-        staticPart += expr[j]
-        j++
+        staticPart += expr[k]
+        k++
       }
 
-      result += templateClosed ? rebuilt : expr.slice(i)
-      i = templateClosed ? j : expr.length
+      if (staticPart)
+        rebuilt += emitModified(staticPart)
+      rebuilt += '`'
+
+      result += rebuilt
+      i = j
       continue
     }
 
diff --git a/src/tests/core.test.ts b/src/tests/core.test.ts
index b8deb73..9ab5ac1 100644
--- a/src/tests/core.test.ts
+++ b/src/tests/core.test.ts
@@ -214,6 +214,26 @@ describe('core module', () => {
       expect(modifierClasses.size).toBe(0)
     })
 
+    it('should not extract comparison string operands from JSX expressions', () => {
+      const code
+        = `<div className:hover={status === 'active' ? 'bg-blue-500' : 'bg-gray-200'}>X</div>`
+      const allClasses = new Set<string>()
+      const modifierClasses = new Set<string>()
+
+      extractClasses(
+        code,
+        allClasses,
+        modifierClasses,
+        REACT_CLASS_REGEX,
+        REACT_CLASS_MODIFIER_REGEX,
+      )
+
+      expect(allClasses.has('hover:bg-blue-500')).toBeTruthy()
+      expect(allClasses.has('hover:bg-gray-200')).toBeTruthy()
+      expect(allClasses.has('hover:active')).toBeFalsy()
+      expect(modifierClasses.has('hover:active')).toBeFalsy()
+    })
+
     it('should ignore empty classes', () => {
       const code = '<div class="  ">Content</div>'
       const allClasses = new Set<string>()
@@ -401,6 +421,101 @@ describe('core module', () => {
       expect(classes.has('hover:bg-gray-200')).toBeTruthy()
     })
 
+    it('should not rewrite comparison string operands inside JSX expressions', () => {
+      const code
+        = `<div className:hover={status === 'active' ? 'bg-blue-500' : 'bg-gray-200'}>X</div>`
+      const classes = new Set<string>()
+
+      const result = transformClassModifiers(
+        code,
+        classes,
+        REACT_CLASS_MODIFIER_REGEX,
+        'className',
+      )
+
+      expect(result).toBe(
+        `<div className={status === 'active' ? 'hover:bg-blue-500' : 'hover:bg-gray-200'}>X</div>`,
+      )
+      expect(classes.has('hover:bg-blue-500')).toBeTruthy()
+      expect(classes.has('hover:bg-gray-200')).toBeTruthy()
+      expect(classes.has('hover:active')).toBeFalsy()
+      expect(result).toContain(`=== 'active'`)
+      expect(result).not.toContain(`=== 'hover:active'`)
+    })
+
+    it('should not rewrite string method receivers inside JSX expressions', () => {
+      const code
+        = `<div className:hover={'primary'.includes(kind) ? 'bg-blue-500' : 'bg-gray-200'}>X</div>`
+      const classes = new Set<string>()
+
+      const result = transformClassModifiers(
+        code,
+        classes,
+        REACT_CLASS_MODIFIER_REGEX,
+        'className',
+      )
+
+      expect(result).toBe(
+        `<div className={'primary'.includes(kind) ? 'hover:bg-blue-500' : 'hover:bg-gray-200'}>X</div>`,
+      )
+      expect(classes.has('hover:primary')).toBeFalsy()
+      expect(classes.has('hover:bg-blue-500')).toBeTruthy()
+    })
+
+    it('should allow whitespace around = and { on JSX modifiers', () => {
+      const code
+        = `<div className:hover = {isActive ? 'bg-blue-500' : 'bg-gray-200'}>X</div>`
+      const classes = new Set<string>()
+
+      const result = transformClassModifiers(
+        code,
+        classes,
+        REACT_CLASS_MODIFIER_REGEX,
+        'className',
+      )
+
+      expect(result).toBe(
+        `<div className={isActive ? 'hover:bg-blue-500' : 'hover:bg-gray-200'}>X</div>`,
+      )
+      expect(classes.has('hover:bg-blue-500')).toBeTruthy()
+      expect(classes.has('hover:bg-gray-200')).toBeTruthy()
+    })
+
+    it('should ignore string literals inside comments in JSX expressions', () => {
+      const withBlock
+        = `<div className:hover={/* 'skip-me' */ isActive ? 'bg-blue-500' : 'bg-gray-200'}>X</div>`
+      const withLine = `<div className:hover={
+  // 'skip-me'
+  isActive ? 'bg-blue-500' : 'bg-gray-200'
+}>X</div>`
+      const classes = new Set<string>()
+
+      const blockResult = transformClassModifiers(
+        withBlock,
+        classes,
+        REACT_CLASS_MODIFIER_REGEX,
+        'className',
+      )
+      expect(blockResult).toBe(
+        `<div className={/* 'skip-me' */ isActive ? 'hover:bg-blue-500' : 'hover:bg-gray-200'}>X</div>`,
+      )
+      expect(classes.has('hover:skip-me')).toBeFalsy()
+      expect(classes.has('hover:bg-blue-500')).toBeTruthy()
+
+      classes.clear()
+      const lineResult = transformClassModifiers(
+        withLine,
+        classes,
+        REACT_CLASS_MODIFIER_REGEX,
+        'className',
+      )
+      expect(lineResult).toContain(`// 'skip-me'`)
+      expect(lineResult).toContain(`'hover:bg-blue-500'`)
+      expect(lineResult).not.toContain(`'hover:skip-me'`)
+      expect(classes.has('hover:skip-me')).toBeFalsy()
+      expect(classes.has('hover:bg-blue-500')).toBeTruthy()
+    })
+
     it('should transform logical && className:modifier expressions', () => {
       const code = `<button className:disabled={isDisabled && 'opacity-50 cursor-not-allowed'}>Go</button>`
       const classes = new Set<string>()
diff --git a/tasks/lessons.md b/tasks/lessons.md
new file mode 100644
index 0000000..cafa781
--- /dev/null
+++ b/tasks/lessons.md
@@ -0,0 +1,7 @@
+# Lessons
+
+## JSX conditional class rewrites (2026-07-21)
+
+- When rewriting string literals inside `className:modifier={…}`, never blindly prefix every quoted string.
+- Comparison operands (`===` / `!==` / `==` / `!=`) and string method receivers (`'x'.includes`) must stay untouched.
+- Always add a regression test for `status === 'active' ? 'bg-a' : 'bg-b'` when changing the JSX expression rewriter.