fix(tailwind): prefix misapplied on negative value

Author: AloisH

packages/cli/src/utils/transformers/transform-tw-prefix.ts

@@ -89,20 +89,33 @@ export function applyPrefix(input: string, prefix: string = '') {
   const prefixed: string[] = []
   for (const className of classNames) {
     const [variant, value, modifier] = splitClassName(className)
+    const valueWithPrefix = handleNegativeVariants(value, prefix)
     if (variant) {
       modifier
-        ? prefixed.push(`${variant}:${prefix}${value}/${modifier}`)
-        : prefixed.push(`${variant}:${prefix}${value}`)
+        ? prefixed.push(`${variant}:${valueWithPrefix}/${modifier}`)
+        : prefixed.push(`${variant}:${valueWithPrefix}`)
     }
     else {
       modifier
-        ? prefixed.push(`${prefix}${value}/${modifier}`)
-        : prefixed.push(`${prefix}${value}`)
+        ? prefixed.push(`${valueWithPrefix}/${modifier}`)
+        : prefixed.push(`${valueWithPrefix}`)
     }
   }
   return prefixed.join(' ')
 }
 
+function handleNegativeVariants(value: string | null, prefix: string = '') {
+  if (!prefix || !value) {
+    return value
+  }
+
+  if (value.startsWith('-')) {
+    return `-${prefix}${value.substring(1)}`
+  }
+
+  return `${prefix}${value}`
+}
+
 export function applyPrefixesCss(css: string, prefix: string) {
   const lines = css.split('\n')
   for (const line of lines) {

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

@@ -67,7 +67,7 @@ exports[`transform tailwind prefix 4`] = `
     :class="
       cn(
         'tw-flex',
-        orientation === 'horizontal' ? 'tw--ml-4' : 'tw--mt-4 tw-flex-col',
+        orientation === 'horizontal' ? '-tw-ml-4' : '-tw-mt-4 tw-flex-col',
         props.class,
       )
     "

packages/cli/test/utils/apply-prefix.test.ts

@@ -36,6 +36,12 @@ describe('apply tailwind prefix', () => {
       output:
         'tw-absolute tw-right-4 tw-top-4 tw-bg-primary tw-rounded-sm tw-opacity-70 tw-ring-offset-background tw-transition-opacity hover:tw-opacity-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-ring focus:tw-ring-offset-2 disabled:tw-pointer-events-none data-[state=open]:tw-bg-secondary',
     },
+    {
+      input:
+        '-mt-8 hover:-mt-8 focus:-mt-8 active:-mt-8 disabled:-mt-8',
+      output:
+        '-tw-mt-8 hover:-tw-mt-8 focus:-tw-mt-8 active:-tw-mt-8 disabled:-tw-mt-8',
+    },
   ])(`applyTwPrefix($input) -> $output`, ({ input, output }) => {
     expect(applyPrefix(input, 'tw-')).toBe(output)
   })