fix: cater for cn function

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}"`)
     }

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
   </div>
@@ -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;
+  }
+}"
+`;

packages/cli/test/utils/transform-tw-prefix.test.ts

@@ -84,7 +84,11 @@ it('transform tailwind prefix', async () => {
     await transform({
       filename: 'app.vue',
       raw: `<template>
-      <div id="testing" v-bind="props" @click="handleSomething" :data-test="true"  :class="cn('bg-background hover:bg-muted', true && 'text-primary-foreground sm:focus:text-accent-foreground')">
+      <div 
+        id="testing" v-bind="props" @click="handleSomething" :data-test="true"  
+        :class="cn('bg-background hover:bg-muted', true && 'text-primary-foreground sm:focus:text-accent-foreground')"
+        :class="cn(buttonVariants({ variant, size }), props.class)"
+      >
         foo
       </div>
     </template>
@@ -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()
 })