fix: classes are not reduced when prefix is used

Author: Jackardios

src/TailwindConverter.ts

@@ -140,10 +140,17 @@ export class TailwindConverter {
     });
 
     if (tailwindClasses.length) {
-      return this.makeTailwindNode(
-        rule,
-        reduceTailwindClasses(tailwindClasses)
-      );
+      tailwindClasses = reduceTailwindClasses(tailwindClasses);
+
+      if (this.config.tailwindConfig.prefix) {
+        tailwindClasses = tailwindClasses.map(className =>
+          className[0] === '[' // is "arbitrary property" class
+            ? className
+            : `${this.config.tailwindConfig.prefix}${className}`
+        );
+      }
+
+      return this.makeTailwindNode(rule, tailwindClasses);
     }
 
     return null;
@@ -162,11 +169,7 @@ export class TailwindConverter {
       ];
     }
 
-    return this.config.tailwindConfig.prefix
-      ? classes.map(
-          className => `${this.config.tailwindConfig.prefix}${className}`
-        )
-      : classes;
+    return classes;
   }
 
   protected makeTailwindNode(

test/TailwindConverter.spec.ts

@@ -11,7 +11,8 @@ const complexCSS: string = fs
 
 const simpleCSS = `
 .foo {
-  text-align: center;
+  padding-top: 12px;
+  padding-bottom: 12px;
   font-size: 12px;
   animation-delay: 200ms;
 
@@ -71,8 +72,8 @@ describe('TailwindConverter', () => {
       {
         rule: expect.objectContaining({ selector: '.foo' }),
         tailwindClasses: [
-          'text-center',
           'text-xs',
+          'py-3',
           'hover:blur-sm',
           'hover:brightness-50',
           'hover:sepia',
@@ -106,8 +107,8 @@ describe('TailwindConverter', () => {
       {
         rule: expect.objectContaining({ selector: '.foo' }),
         tailwindClasses: [
-          'tw-text-center',
           'tw-text-xs',
+          'tw-py-3',
           'hover_tw-blur-sm',
           'hover_tw-brightness-50',
           'hover_tw-sepia',
@@ -133,9 +134,9 @@ describe('TailwindConverter', () => {
       {
         rule: expect.objectContaining({ selector: '.foo' }),
         tailwindClasses: [
-          'text-center',
           'text-xs',
           '[animation-delay:200ms]',
+          'py-3',
           'hover:blur-sm',
           'hover:brightness-50',
           'hover:sepia',

test/__snapshots__/TailwindConverter.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`TailwindConverter should consider \`prefix\`, \`separator\` and \`corePlugins\` configurations 1`] = `
 ".foo {
-  @apply tw-text-center tw-text-xs hover_tw-blur-sm hover_tw-brightness-50 hover_tw-sepia hover_tw-contrast-100 hover_tw-hue-rotate-30 hover_tw-invert-0 hover_tw-opacity-5 hover_tw-saturate-150 hover_tw-text-base;
+  @apply tw-text-xs tw-py-3 hover_tw-blur-sm hover_tw-brightness-50 hover_tw-sepia hover_tw-contrast-100 hover_tw-hue-rotate-30 hover_tw-invert-0 hover_tw-opacity-5 hover_tw-saturate-150 hover_tw-text-base;
   animation-delay: 200ms;
 }
 .foo:hover {
@@ -154,7 +154,7 @@ exports[`TailwindConverter should convert the css part string 1`] = `
 
 exports[`TailwindConverter should convert the simple CSS 1`] = `
 ".foo {
-  @apply text-center text-xs hover:blur-sm hover:brightness-50 hover:sepia hover:contrast-100 hover:hue-rotate-30 hover:invert-0 hover:opacity-5 hover:saturate-150 hover:text-base md:font-semibold;
+  @apply text-xs py-3 hover:blur-sm hover:brightness-50 hover:sepia hover:contrast-100 hover:hue-rotate-30 hover:invert-0 hover:opacity-5 hover:saturate-150 hover:text-base md:font-semibold;
   animation-delay: 200ms;
 }
 .foo:hover {
@@ -166,7 +166,7 @@ exports[`TailwindConverter should convert the simple CSS 1`] = `
 
 exports[`TailwindConverter should convert unconvertible declarations if \`arbitraryPropertiesIsEnabled\` config is enabled 1`] = `
 ".foo {
-    @apply text-center text-xs [animation-delay:200ms] hover:blur-sm hover:brightness-50 hover:sepia hover:contrast-100 hover:hue-rotate-30 hover:invert-0 hover:opacity-5 hover:saturate-150 hover:[transform:translateX(12px)_translateY(0.5em)_translateZ(0.5rem)_scaleY(0.725)_rotate(124deg)] hover:text-base md:font-semibold;
+    @apply text-xs [animation-delay:200ms] py-3 hover:blur-sm hover:brightness-50 hover:sepia hover:contrast-100 hover:hue-rotate-30 hover:invert-0 hover:opacity-5 hover:saturate-150 hover:[transform:translateX(12px)_translateY(0.5em)_translateZ(0.5rem)_scaleY(0.725)_rotate(124deg)] hover:text-base md:font-semibold;
 }
 "
 `;