mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
Alaister Young
ec1029dff0
Migrates the repo off `clsx` + `tailwind-merge` to [shadcn-ui/cn](https://github.com/shadcn-ui/cn). Every app and package already gets `cn` from `packages/ui`, so the swap happens in that one helper and flows through to Studio, docs, www, and the rest. **Changed:** - `packages/ui` `cn` helper now uses `createCn` from `cn/config`, keeping the custom `card`/`content` spacing scale so `p-card` still overrides `p-4`. It has an explicit signature and re-exports `ClassValue`. - The four www Launch Week files that imported the `ClassValue` type from `clsx` now import it from `ui`. - `blocks/vue` local `lib/utils.ts` re-exports `cn` from the package. - Comments/README that referenced tailwind-merge. **Removed:** - Direct `clsx` and `tailwind-merge` deps from `ui`, `ui-patterns`, `www`, and `blocks/vue`. `ui-patterns` and `www` declared them without importing. **Added:** - `packages/ui/src/lib/utils/cn.test.ts` covering clsx-style joining, conflict resolution, the custom spacing scale, and variant handling. Not migrated: the standalone apps under `examples/`. They're outside the workspace and mostly on Tailwind v3, which `cn` doesn't support. Lockfile note: after merging master, the lockfile diff is only the intended swap (`clsx` and `tailwind-merge` out, `cn@0.2.5` in). `tailwind-merge` stays in the lockfile as a transitive dep of a third-party package. Release-age note: this sat in draft with a temporary `minimumReleaseAgeExclude` entry for `cn` while `cn` was inside the workspace's 3-day `minimumReleaseAge` window. That window has closed, so the exclusion is gone and nothing bypasses the release-age gate. ## To test - `pnpm install --frozen-lockfile` succeeds with no `minimumReleaseAgeExclude` entry for `cn`. - `pnpm --filter ui test` – new `cn.test.ts` passes, including `cn('p-4', 'p-card')` → `p-card`. - Typecheck passes for studio, ui, ui-patterns, vue-blocks. www typecheck panics under tsgo on master already (pre-existing, unrelated); it passes with the JS `tsc` binary. - Spot-check Studio locally: class overrides still win in the usual places (e.g. `CodeEditor` height, `Button` variants with a custom `className`). https://claude.ai/code/session_01MkAt16tsPRDTm9oB5Jr8Ub <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Standardized Tailwind class merging across shared UI utilities while preserving conditional classes, custom spacing classes, and variant behavior. * Updated related components and examples to use the standardized class-merging utility. * **Tests** * Added coverage for conditional class handling, conflicting utility resolution, custom spacing classes, and variant separation. * **Documentation** * Updated usage guidance to reflect the standardized Tailwind class-merging approach. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
39 lines
1.7 KiB
TypeScript
39 lines
1.7 KiB
TypeScript
import { describe, expect, it } from 'vitest'
|
|
|
|
import { CodeEditor } from './CodeEditor'
|
|
import { render } from '@/tests/helpers'
|
|
|
|
/**
|
|
* CodeEditor applies a default `h-full` so editors with no explicit height fill their container
|
|
* (GraphiQL, etc.). Callers that DO set a height (e.g. the email template editor's `h-96`) must
|
|
* win — otherwise the editor collapses to a single line.
|
|
*
|
|
* This regressed once already: #47339 appended the default as `cn(className, 'monaco-editor',
|
|
* 'h-full')`, and `cn` keeps the *last* conflicting height utility, so the trailing
|
|
* `h-full` clobbered caller heights. #47350 fixed it by passing `className` last. These tests
|
|
* lock that ordering in.
|
|
*
|
|
* The `<div className={...}>` that receives the class is rendered by @monaco-editor/react before
|
|
* Monaco loads, so it's present in jsdom without a working editor.
|
|
*/
|
|
describe('CodeEditor height class precedence', () => {
|
|
const getEditorEl = (container: HTMLElement) => container.querySelector('.monaco-editor')
|
|
|
|
it('lets a caller-supplied height win over the default h-full (regression #47350)', () => {
|
|
const { container } = render(<CodeEditor language="pgsql" className="h-96" />)
|
|
|
|
const editor = getEditorEl(container)
|
|
expect(editor, 'editor wrapper should render').toBeTruthy()
|
|
expect(editor).toHaveClass('h-96')
|
|
expect(editor, 'default h-full must not override the caller height').not.toHaveClass('h-full')
|
|
})
|
|
|
|
it('falls back to the default h-full when the caller sets no height', () => {
|
|
const { container } = render(<CodeEditor language="pgsql" />)
|
|
|
|
const editor = getEditorEl(container)
|
|
expect(editor, 'editor wrapper should render').toBeTruthy()
|
|
expect(editor).toHaveClass('h-full')
|
|
})
|
|
})
|