Skip to content
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

fix(cli): deduplicate classNames in applyColorMapping #1089

Merged
merged 6 commits into from
Sep 19, 2023
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
fix(cli): deduplicate classNames in applyColorMapping
  • Loading branch information
santidalmasso committed Aug 1, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit d50464d5445d608c40d2297ab53dd6a54c61d4de
22 changes: 13 additions & 9 deletions packages/cli/src/utils/transformers/transform-css-vars.ts
Original file line number Diff line number Diff line change
@@ -146,38 +146,42 @@ export function applyColorMapping(

// Build color mappings.
const classNames = input.split(" ")
const lightMode: string[] = []
const darkMode: string[] = []
const lightMode = new Set<string>()
const darkMode = new Set<string>()
for (let className of classNames) {
const [variant, value, modifier] = splitClassName(className)
const prefix = PREFIXES.find((prefix) => value?.startsWith(prefix))
if (!prefix) {
if (!lightMode.includes(className)) {
lightMode.push(className)
if (!lightMode.has(className)) {
lightMode.add(className)
}
continue
}

const needle = value?.replace(prefix, "")
if (needle && needle in mapping.light) {
lightMode.push(
lightMode.add(
[variant, `${prefix}${mapping.light[needle]}`]
.filter(Boolean)
.join(":") + (modifier ? `/${modifier}` : "")
)

darkMode.push(
darkMode.add(
["dark", variant, `${prefix}${mapping.dark[needle]}`]
.filter(Boolean)
.join(":") + (modifier ? `/${modifier}` : "")
)
continue
}

if (!lightMode.includes(className)) {
lightMode.push(className)
if (!lightMode.has(className)) {
lightMode.add(className)
}
}

return lightMode.join(" ") + " " + darkMode.join(" ").trim()
return (
Array.from(lightMode).join(" ") +

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔧 Can be simplified to return [...lightMode, ...darkMode].join(' ').trim().

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the suggestion to simplify the code. I did try implementing it that way at first, but I encountered a TypeScript error. Since TypeScript was unable to infer that lightMode and darkMode were iterable, it prevented me from using the spread syntax directly. So I opted for the Array.from method instead.

This was the error: Type 'Set<string>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the solution you shipped with the latest commit though. Much cleaner now!

" " +
Array.from(darkMode).join(" ").trim()
)
}
Original file line number Diff line number Diff line change
@@ -23,3 +23,11 @@ export function Foo() {
}\\"\\"
"
`;

exports[`transform css vars 4`] = `
"import * as React from \\"react\\"
export function Foo() {
return <div className={cn(\\"bg-white border border-stone-200 dark:bg-stone-950 dark:border-stone-800\\")}>foo</div>
}\\"\\"
"
`;
2 changes: 1 addition & 1 deletion packages/cli/test/utils/apply-color-mapping.test.ts
Original file line number Diff line number Diff line change
@@ -64,7 +64,7 @@ describe("apply color mapping", async () => {
input:
"text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive",
output:
"text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900 dark:text-red-900",
"text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900",
},
{
input:
23 changes: 23 additions & 0 deletions packages/cli/test/utils/transform-css-vars.test.ts
Original file line number Diff line number Diff line change
@@ -56,6 +56,29 @@ export function Foo() {
raw: `import * as React from "react"
export function Foo() {
return <div className={cn("bg-background hover:bg-muted", true && "text-primary-foreground sm:focus:text-accent-foreground")}>foo</div>
}"
`,
config: {
tsx: true,
tailwind: {
baseColor: "stone",
cssVariables: false,
},
aliases: {
components: "@/components",
utils: "@/lib/utils",
},
},
baseColor: stone,
})
).toMatchSnapshot()

expect(
await transform({
filename: "test.ts",
raw: `import * as React from "react"
export function Foo() {
return <div className={cn("bg-background border border-input")}>foo</div>
}"
`,
config: {