feat: support conditional JSX expressions on className variants

[jrmybtlr]

Summary

React variant attributes previously only accepted quoted strings (className:hover="..."). Conditional forms like className:hover={isActive ? 'bg-blue-500' : 'bg-gray-200'} were ignored entirely.

This PR adds JSX expression support for className:modifier={...} / class:modifier={...}:

• String / static template literals inside the expression are rewritten with the variant prefix (hover:…, including nested modifiers + partials)
• Prefixed classes are extracted into the Tailwind manifest
• mergeClassAttributes now uses a balanced-brace scanner so nested {…} (e.g. cn({ … })) merges correctly, and multiple JSX class values are preserved instead of dropping all but one
• Falsy interpolations are coerced ((expr) || '') so cond && 'class' does not stringify false into the class list

Expressions with no string literals (e.g. className:hover={hoverClasses}) are left unchanged so runtime variables are not corrupted.

Demo

The React demo (demos/react) now includes an interactive Conditional variants example:

• className:hover={isActive ? '…' : '…'} toggled by click
• className:disabled={isDisabled && '…'} toggled by checkbox
• Attribute typings widened to allow conditional values

Example

// Input
<button
  className="px-4 py-2"
  className:hover={isActive ? 'bg-blue-500' : 'bg-gray-200'}
/>

// Output
<button
  className={`px-4 py-2 ${(isActive ? 'hover:bg-blue-500' : 'hover:bg-gray-200') || ''}`}
/>

Test plan

• Unit tests for extract / transform / merge of conditional modifiers (ternary, &&, nested modifiers, nested braces, variable-only left alone, multi-modifier merge)
• Existing suite green: 190 tests passed
• npm run build (library) succeeds
• React demo pnpm run build includes hover:bg-blue-500, hover:bg-zinc-700, disabled:opacity-40 in CSS + manifest

  

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	useclassy-com	8818fe8	Commit Preview URL Branch Preview URL	Jul 22 2026, 09:48 PM

[jrmybtlr]

@copilot resolve the merge conflicts in this pull request

[Copilot]

@copilot resolve the merge conflicts in this pull request

Resolved in 8964962 by merging origin/main into this branch and fixing all merge conflicts in README.md, src/core.ts, src/tests/core.test.ts, and removing tasks/todo.md per main.

[cursor]

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

[Copilot]

Pull request overview

Adds React/JSX expression support for className:variant={...} / class:variant={...} so conditional variants are transformed and their prefixed Tailwind classes are extracted/manifested, aligning React behavior with existing quoted modifier support.

Changes:

• Extend class extraction/transform to rewrite string/template literals inside JSX expression-based modifier attributes (while leaving variable-only expressions untouched).
• Rewrite mergeClassAttributes to use a balanced-brace scanner for JSX {...} values and preserve multiple dynamic class expressions (with falsy coercion to avoid false stringification).
• Update docs + React demo (including TS typings) to showcase conditional variants.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/tests/core.test.ts	Adds/updates unit tests covering conditional modifier extraction/transform and multi-expression className merging behavior.
src/core.ts	Implements JSX expression modifier parsing/rewriting plus a more robust mergeClassAttributes parser for nested braces and multiple JSX class values.
README.md	Documents the new React conditional variant capability and provides input/output examples.
demos/react/src/react.d.ts	Widens demo typings for className:* / class:* attributes to permit conditional values (e.g., false).
demos/react/src/App.tsx	Adds an interactive “Conditional variants” demo showcasing ternary and && modifier expressions.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.