Sort … class to end of list (#334)

This isn’t a real class but an artifact of how we want to do sorting

Author: thecrypticace

src/sorting.ts

@@ -53,7 +53,11 @@ function reorderClasses(classList: string[], { env }: { env: TransformerEnv }) {
     ? env.context.getClassOrder(classList)
     : getClassOrderPolyfill(classList, { env })
 
-  return orderedClasses.sort(([, a], [, z]) => {
+  return orderedClasses.sort(([nameA, a], [nameZ, z]) => {
+    // Move `...` to the end of the list
+    if (nameA === '...' || nameA === '…') return 1
+    if (nameZ === '...' || nameZ === '…') return -1
+
     if (a === z) return 0
     if (a === null) return -1
     if (z === null) return 1

tests/format.test.ts

@@ -25,6 +25,14 @@ let html: TestEntry[] = [
       tailwindPreserveDuplicates: true,
     },
   ],
+
+  // … is moved to the end of the list
+  ['<div class="... sm:p-0 p-0"></div>', '<div class="p-0 sm:p-0 ..."></div>'],
+  ['<div class="… sm:p-0 p-0"></div>', '<div class="p-0 sm:p-0 …"></div>'],
+  ['<div class="sm:p-0 ... p-0"></div>', '<div class="p-0 sm:p-0 ..."></div>'],
+  ['<div class="sm:p-0 … p-0"></div>', '<div class="p-0 sm:p-0 …"></div>'],
+  ['<div class="sm:p-0 p-0 ..."></div>', '<div class="p-0 sm:p-0 ..."></div>'],
+  ['<div class="sm:p-0 p-0 …"></div>', '<div class="p-0 sm:p-0 …"></div>'],
 ]
 
 let css: TestEntry[] = [