-
Notifications
You must be signed in to change notification settings - Fork 4.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[bug]: Duplicate classNames(border) in checkbox, radio group #4654
Comments
The problem seems to start with not selecting css var in the initial Since css var is undefined, shacn does the conversion internally via the if (input.includes(” border ”)) {
input = input.replace(” border ‘, ’ border border-border ”)
} There is special handling for borders, like in this code lightMode.add(
[variant, `${prefix}${mapping.light[needle]}`]
.filter(Boolean)
.join(“:”) + (modifier ? `/${modifier}` : “”)
) Although there is logic to remove duplicate code, “border": “neutral-200”,
“input": “neutral-200”, Since they are the same, “border-boder” and “border-input” are duplicated by “border-neutral-200”, so one is removed and the problem does not appear Conclusion.
if (input.includes(“ border ‘) && !input.includes(’border-primary”)) { }
input = input.replace(” border ‘, ’ border border-border ”)
} I think we should ask the @shadcn team to do something about border-primary in this way Below is the test code for a “checkbox” that I arbitrarily created import { describe, expect, it } from "vitest"
import { applyColorMapping } from "../utils/transformers/transform-css-vars"
import neutral from "./neutral.json"
describe("applyColorMapping transformation", () => {
const realMapping = neutral.inlineColors
it("should correctly transform class names with color mapping", () => {
const input =
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
const expectedOutput =
"peer h-4 w-4 shrink-0 rounded-sm border border-neutral-900 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50 dark:border-neutral-50 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-800 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=checked]:text-neutral-900"
const result = applyColorMapping(input, realMapping)
expect(result).toBe(expectedOutput)
})
}) The result is shown below
---. |
Describe the bug
If I install checkbox in CLI, I encountered duplicate border-color issue.
PR#1089 said that this problem has fixed... I found accurate comment on related first bug issue, and I checked Input, Alert, TextArea, Select's bug was fixed. But I still encountered same error when I install checkbox, radio group.
transform-css-vars.ts
'sapplyColorMapping: function - border => border border-border
may cause problem, but I don't know what border-border is... There's anyone knows about what border-border means? 😢I created this issue because the issue was closed even though the bug was not resolved perfectly.
Affected component/components
Checkbox, Radio Group
How to reproduce
pnpm dlx shadcn-ui@latest add checkbox or radio-group
on your project.Codesandbox/StackBlitz link
No response
Logs
No response
System Info
Before submitting
The text was updated successfully, but these errors were encountered: