Skip to content

chore: fix cn with tw-merge#3789

Merged
waleedlatif1 merged 2 commits intosimstudioai:stagingfrom
adithyaakrishna:feat/hotfix
Mar 26, 2026
Merged

chore: fix cn with tw-merge#3789
waleedlatif1 merged 2 commits intosimstudioai:stagingfrom
adithyaakrishna:feat/hotfix

Conversation

@adithyaakrishna
Copy link
Copy Markdown
Contributor

Summary

  • This is the issue of Tailwind classes not being applied properly due to TW-margin.

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation
  • Other: ___________

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

Screenshot 2026-03-27 at 1 40 00 AM

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 26, 2026

@adithyaakrishna is attempting to deploy a commit to the Sim Team on Vercel.

A member of the Team first needs to authorize it.

@cursor
Copy link
Copy Markdown

cursor bot commented Mar 26, 2026

PR Summary

Low Risk
Low risk: small styling/utility changes limited to class merging and a minor button press animation tweak; main risk is subtle CSS precedence changes where cn() is used.

Overview
Fixes Tailwind class collisions by switching cn() to an extendTailwindMerge instance that recognizes custom text-* size tokens (e.g. text-micro, text-caption, text-small, text-md).

Also slightly adjusts the button active-state scaling from 0.97 to 0.98 in the shared Button variants.

Written by Cursor Bugbot for commit 06d140f. This will update automatically on new commits. Configure here.

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Mar 26, 2026

Greptile Summary

This PR fixes a Tailwind class merging bug by replacing the default twMerge import with a custom extendTailwindMerge instance that registers the project's four non-standard font-size tokens (micro, caption, small, md). Without this, tailwind-merge had no knowledge of these custom sizes and would fail to deduplicate conflicting text-* classes — e.g., cn('text-small', 'text-md') would incorrectly output both classes instead of just the latter.\n\nKey changes:\n- extendTailwindMerge is used to extend the built-in font-size class group with the four custom tokens defined in tailwind.config.ts\n- The two remaining custom tokens (xs: 11px, base: 15px) are correctly omitted because they already exist in twMerge's built-in class group\n- The cn export signature and call-site contract are entirely unchanged, so no consumers need updating

Confidence Score: 5/5

Safe to merge — single-file, non-breaking fix with correct use of the tailwind-merge extension API.

The change is minimal (one file, ~10 lines), uses the documented extendTailwindMerge API correctly, and the registered tokens exactly match the custom fontSize entries in tailwind.config.ts. No consumer changes are needed and there is no behavioural regression risk.

No files require special attention.

Important Files Changed

Filename Overview
apps/sim/lib/core/utils/cn.ts Replaces bare twMerge with extendTailwindMerge to register the four project-specific font-size tokens (micro, caption, small, md) so they are correctly deduplicated when classes conflict.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["cn(...inputs)"] --> B["clsx(inputs)\nflatten & stringify classes"]
    B --> C["twMerge (extendTailwindMerge)\nresolve conflicts"]
    C --> D{Is class in known group?}
    D -- "Standard TW classes\ne.g. text-xs, text-base" --> E["Built-in font-size group\nalready handled"]
    D -- "Custom tokens\ntext-micro, text-caption\ntext-small, text-md" --> F["Extended font-size group\nregistered via extendTailwindMerge"]
    E --> G["Last class wins\n(conflict resolved)"]
    F --> G
    G --> H["Final class string output"]
Loading

Reviews (1): Last reviewed commit: "chore: fix cn" | Re-trigger Greptile

@waleedlatif1 waleedlatif1 merged commit bf60670 into simstudioai:staging Mar 26, 2026
5 of 6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants