refactor: Replace clsx & tailwind-merge with clswind#27
refactor: Replace clsx & tailwind-merge with clswind#27iubns wants to merge 3 commits intoui-layouts:mainfrom
Conversation
✅ Deploy Preview for cursify-main ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for cursify ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughMigrates the project from a local Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Tip You can get early access to new features in CodeRabbit.Enable the |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/website/ui/spotlight.tsx`:
- Line 4: The import "import { cn } from 'clswind'" references a package that
doesn't exist on public registries; verify whether "clswind" is intended to be
an internal/monorepo module or a typo and update accordingly: if it's internal,
ensure the package is published/linked and that the build config (registry,
workspace, or path alias) exposes it; if it's a typo, replace the import with
the correct utility (e.g., the project's actual classnames helper) and update
usages of the "cn" symbol in this file to match; also update package.json to
point to the correct dependency or remove the invalid entry.
In `@package.json`:
- Line 33: The dependency "clswind" in package.json is unresolved; confirm
whether "clswind" is a private package or a typo and fix all imports that expect
a cn utility. If it's private, ensure your registry/build environment can
resolve "clswind" and update bun.lock; if it's a typo replace the dependency
with the correct package (e.g., "clsx" or "classnames") and update imports using
cn accordingly; if no external package exists, restore the local utility
implementation (export cn that wraps twMerge(clsx(...)) or equivalent) and
replace imports referencing cn so all files that import cn continue to work.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: fd619c46-ade6-4e10-8082-6e793e4a6038
📒 Files selected for processing (27)
README.mdapp/(docs-page)/components/[...slug]/page.tsxapp/(docs-page)/get-started/page.mdxcomponents/website/code-components/component-code-preview.tsxcomponents/website/code-components/component-preview.tsxcomponents/website/code-components/copy-button.tsxcomponents/website/code-components/copy-npm-button.tsxcomponents/website/code-components/pre-code.tsxcomponents/website/code-components/pre-coded.tsxcomponents/website/dropdown-menu.tsxcomponents/website/footer.tsxcomponents/website/moibile-header.tsxcomponents/website/searchbar.tsxcomponents/website/theme-switch.tsxcomponents/website/ui/banner.tsxcomponents/website/ui/button.tsxcomponents/website/ui/dialog.tsxcomponents/website/ui/dropdown.tsxcomponents/website/ui/navigation-menu.tsxcomponents/website/ui/scroll-area.tsxcomponents/website/ui/spotlight.tsxcomponents/website/ui/tabs.tsxcomponents/website/vaul-sidebar.tsxlib/utils.tsmdx-components.tsxpackage.jsonregistry/components/cursor/common/magnetic-cursor.tsx
💤 Files with no reviewable changes (1)
- lib/utils.ts
| 'use client'; | ||
|
|
||
| import { cn } from '@/lib/utils'; | ||
| import { cn } from 'clswind'; |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
For clswind (the version used in this PR), does it officially support import { cn } from 'clswind' in TypeScript/ESM, and does its merge behavior match clsx + tailwind-merge for conflicting Tailwind classes?
💡 Result:
No, clswind does not officially support import { cn } from 'clswind' in TypeScript/ESM, and its merge behavior cannot be confirmed to match clsx + tailwind-merge. No official package, documentation, or repository for a Tailwind class utility named "clswind" was found across npm, GitHub, or general web searches. Similar packages exist (e.g., classwind, colorwind, clb), but none match the exact name or described features with authoritative evidence.
Citations:
- 1: https://www.npmjs.com/package/lightswind
- 2: https://github.com/crswll/clb
- 3: https://github.com/jalalazimi/classwind
- 4: https://github.com/VishwaGauravIn/clsx-for-tailwind
- 5: https://npm.io/package/tailwind-cn
- 6: https://github.com/siguici/colorwind
🏁 Script executed:
# First, confirm the actual import in the spotlight.tsx file
cat -n components/website/ui/spotlight.tsx | head -10Repository: ui-layouts/cursify
Length of output: 274
🏁 Script executed:
# Check if clswind is in package.json
rg '"clswind"' package.json || echo "No clswind found in package.json"Repository: ui-layouts/cursify
Length of output: 88
🏁 Script executed:
# Check lock files for clswind
rg 'clswind' package-lock.json yarn.lock pnpm-lock.yaml 2>/dev/null | head -20 || echo "No clswind in lock files"Repository: ui-layouts/cursify
Length of output: 44
🏁 Script executed:
# Search for similar package names that might be alternatives
rg -i 'class|clsx|cn.*wind' package.json | grep -E '"[^"]*":'Repository: ui-layouts/cursify
Length of output: 147
🏁 Script executed:
# Check if clswind is a local package in the repo
fd -type f 'clswind' . 2>/dev/null || echo "No local clswind directory"Repository: ui-layouts/cursify
Length of output: 88
🏁 Script executed:
# Search for clswind in node_modules or any local implementation
rg 'export.*cn' --type ts --type js | grep -i clswind || echo "Searching for cn export"Repository: ui-layouts/cursify
Length of output: 85
🏁 Script executed:
# Check package.json for clswind details (full entry)
cat -n package.json | grep -A2 -B2 'clswind'Repository: ui-layouts/cursify
Length of output: 239
🏁 Script executed:
# Search for any clswind references throughout the codebase
rg 'clswind' --type ts --type tsx --type jsRepository: ui-layouts/cursify
Length of output: 89
🏁 Script executed:
# Search for clswind references more broadly
rg 'clswind' --no-type 2>/dev/null | head -30Repository: ui-layouts/cursify
Length of output: 44
🏁 Script executed:
# Look at imports using cn from clswind across the codebase
rg 'from.*clswind' --no-type 2>/dev/nullRepository: ui-layouts/cursify
Length of output: 44
🏁 Script executed:
# Check if maybe it's a typo and should be something else (clsx, classnames, etc)
cat package.json | rg -A1 -B1 'class|clsx|cn'Repository: ui-layouts/cursify
Length of output: 282
🏁 Script executed:
# Let's search more carefully - maybe it's a version mismatch
# Try to see what's actually imported
grep -r "import.*cn.*from" --include="*.ts" --include="*.tsx" --include="*.js" --include="*.jsx" .Repository: ui-layouts/cursify
Length of output: 50376
🏁 Script executed:
# Check if clswind might be under a different name or if there's a typo
# Look at the exact package.json structure around clswind
sed -n '25,40p' package.jsonRepository: ui-layouts/cursify
Length of output: 596
Verify clswind is a legitimate npm package before merge.
Line 4 imports import { cn } from 'clswind', but clswind does not appear to exist on npm or any public package registry. The package is pinned to version ^26.12.3 in package.json, yet no official package matching this name or version could be found. If clswind is a private registry package or internal monorepo module, ensure it is properly configured for the build environment. Otherwise, this import will fail at runtime.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@components/website/ui/spotlight.tsx` at line 4, The import "import { cn }
from 'clswind'" references a package that doesn't exist on public registries;
verify whether "clswind" is intended to be an internal/monorepo module or a typo
and update accordingly: if it's internal, ensure the package is published/linked
and that the build config (registry, workspace, or path alias) exposes it; if
it's a typo, replace the import with the correct utility (e.g., the project's
actual classnames helper) and update usages of the "cn" symbol in this file to
match; also update package.json to point to the correct dependency or remove the
invalid entry.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
components/progressive-blur.tsx (1)
52-52: Trailing space in className string.There's a trailing space at the end of the className string. While harmless, it's unnecessary.
✨ Suggested cleanup
- className='pointer-events-none absolute inset-0 rounded-[inherit] ' + className='pointer-events-none absolute inset-0 rounded-[inherit]'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/progressive-blur.tsx` at line 52, The className string in the ProgressiveBlur component contains an unnecessary trailing space ("pointer-events-none absolute inset-0 rounded-[inherit] "), remove the trailing space so the value becomes "pointer-events-none absolute inset-0 rounded-[inherit]" to clean up the markup; update the JSX element where className is set (the element with className='pointer-events-none absolute inset-0 rounded-[inherit] ') to use the trimmed string.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@components/progressive-blur.tsx`:
- Line 52: The className string in the ProgressiveBlur component contains an
unnecessary trailing space ("pointer-events-none absolute inset-0
rounded-[inherit] "), remove the trailing space so the value becomes
"pointer-events-none absolute inset-0 rounded-[inherit]" to clean up the markup;
update the JSX element where className is set (the element with
className='pointer-events-none absolute inset-0 rounded-[inherit] ') to use the
trimmed string.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c01db266-cd55-46f4-a369-cd5519838795
📒 Files selected for processing (1)
components/progressive-blur.tsx
1 participant
Summary
This PR simplifies the class merging utility by replacing the combination of clsx and tailwind-merge with the single clswind package.
Changes
Benefits
Notes
The behavior of the cn utility remains identical, ensuring backward compatibility with all existing components.
Summary by CodeRabbit
Refactor
Style
Documentation