From 0f551c85e61a246216211033fb3788ed685f2805 Mon Sep 17 00:00:00 2001 From: zernonia Date: Tue, 18 Jun 2024 14:49:59 +0800 Subject: [PATCH] fix: cater for cn function --- .../utils/transformers/transform-tw-prefix.ts | 3 +- .../transform-tw-prefix.test.ts.snap | 82 +++++++++++++++++++ .../test/utils/transform-tw-prefix.test.ts | 13 ++- 3 files changed, 96 insertions(+), 2 deletions(-) diff --git a/packages/cli/src/utils/transformers/transform-tw-prefix.ts b/packages/cli/src/utils/transformers/transform-tw-prefix.ts index 5dbe4f03..5911f327 100644 --- a/packages/cli/src/utils/transformers/transform-tw-prefix.ts +++ b/packages/cli/src/utils/transformers/transform-tw-prefix.ts @@ -32,7 +32,8 @@ export const transformTwPrefixes: Transformer = async ({ const value = node.getText() const hasClosingDoubleQuote = value.match(/"/g)?.length === 2 - if (value.search('\'') === -1 && hasClosingDoubleQuote) { + const hasFunction = value.startsWith('"cn(') + if (value.search('\'') === -1 && hasClosingDoubleQuote && !hasFunction) { const mapped = applyPrefix(value.replace(/"/g, ''), config.tailwind.prefix) node.replaceWithText(`"${mapped}"`) } diff --git a/packages/cli/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap index afdc26aa..1737c025 100644 --- a/packages/cli/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap +++ b/packages/cli/test/utils/__snapshots__/transform-tw-prefix.test.ts.snap @@ -53,6 +53,7 @@ exports[`transform tailwind prefix 4`] = ` true && 'tw-text-primary-foreground sm:focus:tw-text-accent-foreground', ) " + :class="cn(buttonVariants({ variant, size }), props.class)" > foo @@ -140,3 +141,84 @@ exports[`transform tailwind prefix 5`] = ` } }" `; + +exports[`transform tailwind prefix 6`] = ` +"@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 224 71.4% 4.1%; + + --muted: 220 14.3% 95.9%; + --muted-foreground: 220 8.9% 46.1%; + + --popover: 0 0% 100%; + --popover-foreground: 224 71.4% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 224 71.4% 4.1%; + + --border: 220 13% 91%; + --input: 220 13% 91%; + + --primary: 220.9 39.3% 11%; + --primary-foreground: 210 20% 98%; + + --secondary: 220 14.3% 95.9%; + --secondary-foreground: 220.9 39.3% 11%; + + --accent: 220 14.3% 95.9%; + --accent-foreground: 220.9 39.3% 11%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 20% 98%; + + --ring: 217.9 10.6% 64.9%; + + --radius: 0.5rem; + } + + .dark { + --background: 224 71.4% 4.1%; + --foreground: 210 20% 98%; + + --muted: 215 27.9% 16.9%; + --muted-foreground: 217.9 10.6% 64.9%; + + --popover: 224 71.4% 4.1%; + --popover-foreground: 210 20% 98%; + + --card: 224 71.4% 4.1%; + --card-foreground: 210 20% 98%; + + --border: 215 27.9% 16.9%; + --input: 215 27.9% 16.9%; + + --primary: 210 20% 98%; + --primary-foreground: 220.9 39.3% 11%; + + --secondary: 215 27.9% 16.9%; + --secondary-foreground: 210 20% 98%; + + --accent: 215 27.9% 16.9%; + --accent-foreground: 210 20% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 85.7% 97.3%; + + --ring: 215 27.9% 16.9%; + } +} + +@layer base { + * { + @apply tw-border-border; + } + body { + @apply tw-bg-background tw-text-foreground; + } +}" +`; diff --git a/packages/cli/test/utils/transform-tw-prefix.test.ts b/packages/cli/test/utils/transform-tw-prefix.test.ts index 7c97d6fe..e1ff6c75 100644 --- a/packages/cli/test/utils/transform-tw-prefix.test.ts +++ b/packages/cli/test/utils/transform-tw-prefix.test.ts @@ -84,7 +84,11 @@ it('transform tailwind prefix', async () => { await transform({ filename: 'app.vue', raw: ` @@ -110,4 +114,11 @@ it('transform tailwind prefix', async () => { 'tw-', ), ).toMatchSnapshot() + + expect( + applyPrefixesCss( + '@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 224 71.4% 4.1%;\n \n --muted: 220 14.3% 95.9%;\n --muted-foreground: 220 8.9% 46.1%;\n \n --popover: 0 0% 100%;\n --popover-foreground: 224 71.4% 4.1%;\n \n --card: 0 0% 100%;\n --card-foreground: 224 71.4% 4.1%;\n \n --border: 220 13% 91%;\n --input: 220 13% 91%;\n \n --primary: 220.9 39.3% 11%;\n --primary-foreground: 210 20% 98%;\n \n --secondary: 220 14.3% 95.9%;\n --secondary-foreground: 220.9 39.3% 11%;\n \n --accent: 220 14.3% 95.9%;\n --accent-foreground: 220.9 39.3% 11%;\n \n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 20% 98%;\n \n --ring: 217.9 10.6% 64.9%;\n \n --radius: 0.5rem;\n }\n \n .dark {\n --background: 224 71.4% 4.1%;\n --foreground: 210 20% 98%;\n \n --muted: 215 27.9% 16.9%;\n --muted-foreground: 217.9 10.6% 64.9%;\n \n --popover: 224 71.4% 4.1%;\n --popover-foreground: 210 20% 98%;\n \n --card: 224 71.4% 4.1%;\n --card-foreground: 210 20% 98%;\n \n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n \n --primary: 210 20% 98%;\n --primary-foreground: 220.9 39.3% 11%;\n \n --secondary: 215 27.9% 16.9%;\n --secondary-foreground: 210 20% 98%;\n \n --accent: 215 27.9% 16.9%;\n --accent-foreground: 210 20% 98%;\n \n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n \n --ring: 215 27.9% 16.9%;\n }\n}\n \n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}', + 'tw-', + ), + ).toMatchSnapshot() })