Tidy whitespace and remove duplicates (#70)

* Remove duplicate classes

* Trim whitespace from class lists

* Don't tidy whitespace in multi-line class lists

* Update tests

* `trim` -> `tidy`

* Formatting

* Update tests

* Formatting

Author: bradlc

src/index.js

@@ -65,7 +65,12 @@ function getClassOrderPolyfill(classes, { env }) {
 
 function sortClasses(
   classStr,
-  { env, ignoreFirst = false, ignoreLast = false }
+  {
+    env,
+    ignoreFirst = false,
+    ignoreLast = false,
+    tidyWhitespace = { start: true, end: true },
+  }
 ) {
   if (typeof classStr !== 'string' || classStr === '') {
     return classStr
@@ -77,6 +82,10 @@ function sortClasses(
     return classStr
   }
 
+  if (classStr.includes('\n')) {
+    tidyWhitespace = false
+  }
+
   let result = ''
   let parts = classStr.split(/(\s+)/)
   let classes = parts.filter((_, i) => i % 2 === 0)
@@ -86,6 +95,10 @@ function sortClasses(
     classes.pop()
   }
 
+  if (tidyWhitespace) {
+    whitespace = whitespace.map(() => ' ')
+  }
+
   let prefix = ''
   if (ignoreFirst) {
     prefix = `${classes.shift() ?? ''}${whitespace.shift() ?? ''}`
@@ -96,6 +109,15 @@ function sortClasses(
     suffix = `${whitespace.pop() ?? ''}${classes.pop() ?? ''}`
   }
 
+  // Remove duplicates
+  classes = classes.filter((cls, index, arr) => {
+    if (arr.indexOf(cls) === index) {
+      return true
+    }
+    whitespace.splice(index - 1, 1)
+    return false
+  })
+
   let classNamesWithOrder = env.context.getClassOrder
     ? env.context.getClassOrder(classes)
     : getClassOrderPolyfill(classes, { env })
@@ -115,6 +137,12 @@ function sortClasses(
     result += `${classes[i]}${whitespace[i] ?? ''}`
   }
 
+  if (tidyWhitespace) {
+    result = result
+      .replace(/^\s+/, tidyWhitespace.start ? '' : ' ')
+      .replace(/\s+$/, tidyWhitespace.end ? '' : ' ')
+  }
+
   return prefix + result + suffix
 }
 
@@ -287,6 +315,10 @@ function sortTemplateLiteral(node, { env }) {
       env,
       ignoreFirst: i > 0 && !/^\s/.test(quasi.value.raw),
       ignoreLast: i < node.expressions.length && !/\s$/.test(quasi.value.raw),
+      tidyWhitespace: {
+        start: i === 0,
+        end: i >= node.expressions.length,
+      },
     })
 
     quasi.value.cooked = same
@@ -296,6 +328,10 @@ function sortTemplateLiteral(node, { env }) {
           ignoreFirst: i > 0 && !/^\s/.test(quasi.value.cooked),
           ignoreLast:
             i < node.expressions.length && !/\s$/.test(quasi.value.cooked),
+          tidyWhitespace: {
+            start: i === 0,
+            end: i >= node.expressions.length,
+          },
         })
 
     if (
@@ -444,6 +480,10 @@ function transformSvelte(ast, { env, changes }) {
             env,
             ignoreFirst: i > 0 && !/^\s/.test(value.raw),
             ignoreLast: i < attr.value.length - 1 && !/\s$/.test(value.raw),
+            tidyWhitespace: {
+              start: i === 0,
+              end: i >= attr.value.length - 1,
+            },
           })
           value.data = same
             ? value.raw
@@ -452,6 +492,10 @@ function transformSvelte(ast, { env, changes }) {
                 ignoreFirst: i > 0 && !/^\s/.test(value.data),
                 ignoreLast:
                   i < attr.value.length - 1 && !/\s$/.test(value.data),
+                tidyWhitespace: {
+                  start: i === 0,
+                  end: i >= attr.value.length - 1,
+                },
               })
         } else if (value.type === 'MustacheTag') {
           visit(value.expression, {

tests/test.js

@@ -59,6 +59,7 @@ let html = [
   ['<div class="  sm:p-0   p-0 "></div>', '<div class="p-0 sm:p-0"></div>'],
   t`<div class></div>`,
   t`<div class=""></div>`,
+  ['<div class="sm:p-0 p-0 p-0"></div>', '<div class="p-0 sm:p-0"></div>'],
 ]
 
 let css = [
@@ -95,6 +96,24 @@ let javascript = [
     `;<div class={\`sm:p-0 p-0 \${someVar}sm:block md:inline flex\`} />`,
     `;<div class={\`p-0 sm:p-0 \${someVar}sm:block flex md:inline\`} />`,
   ],
+  [
+    ';<div class="   m-0  sm:p-0  p-0   " />',
+    ';<div class="m-0 p-0 sm:p-0" />',
+  ],
+  [
+    ";<div class={'   m-0  sm:p-0  p-0   '} />",
+    ";<div class={'m-0 p-0 sm:p-0'} />",
+  ],
+  [
+    ';<div class={` sm:p-0\n  p-0   `} />',
+    ';<div\n  class={` p-0\n  sm:p-0   `}\n/>',
+  ],
+  [';<div class="flex flex" />', ';<div class="flex" />'],
+  [';<div class={`   flex  flex `} />', ';<div class={`flex`} />'],
+  [
+    ';<div class={`   flex  flex flex${someVar}block block`} />',
+    ';<div class={`flex flex${someVar}block block`} />',
+  ],
 ]
 javascript = javascript.concat(
   javascript.map((test) => test.map((t) => t.replace(/class/g, 'className')))
@@ -128,6 +147,8 @@ let vue = [
     `<div :class="\`sm:p-0 p-0 \${someVar}sm:block md:inline flex\`"></div>`,
     `<div :class="\`p-0 sm:p-0 \${someVar}sm:block flex md:inline\`"></div>`,
   ],
+  [`<div :class="'   flex  flex '"></div>`, `<div :class="'flex'"></div>`],
+  [`<div :class="\`   flex  flex \`"></div>`, `<div :class="\`flex\`"></div>`],
 ]
 
 let tests = {
@@ -180,7 +201,6 @@ let tests = {
       `<div class="sm:p-0 p-0 {someVar}sm:block md:inline flex" />`,
       `<div class="p-0 sm:p-0 {someVar}sm:block flex md:inline" />`,
     ],
-    ['<div class={`sm:p-0\np-0`} />', '<div\n  class={`p-0\nsm:p-0`}\n/>'],
   ],
 }