Merge pull request #459 from dcastil/bugfix/458/fix-multiline-not-wor…

…king-anymore Fix multiline input not working anymore
dcastil · Aug 12, 2024 · a9ebe22 · a9ebe22
2 parents c795f4b + 37339ce
commit a9ebe22
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/src/lib/merge-classlist.ts b/src/lib/merge-classlist.ts
@@ -1,6 +1,8 @@
 import { ConfigUtils } from './config-utils'
 import { IMPORTANT_MODIFIER, sortModifiers } from './parse-class-name'
 
+const SPLIT_CLASSES_REGEX = /\s+/
+
 export const mergeClassList = (classList: string, configUtils: ConfigUtils) => {
     const { parseClassName, getClassGroupId, getConflictingClassGroupIds } = configUtils
 
@@ -12,23 +14,12 @@ export const mergeClassList = (classList: string, configUtils: ConfigUtils) => {
      * @example 'md:!pr'
      */
     const classGroupsInConflict: string[] = []
+    const classNames = classList.trim().split(SPLIT_CLASSES_REGEX)
 
     let result = ''
-    let index = classList.length - 1
-
-    while (index >= 0) {
-        while (classList[index] === ' ') {
-            index -= 1
-        }
-
-        if (index < 0) {
-            break
-        }
-
-        const nextIndex = classList.lastIndexOf(' ', index)
-        const originalClassName = classList.slice(nextIndex + 1, index + 1)
 
-        index = nextIndex
+    for (let index = classNames.length - 1; index >= 0; index -= 1) {
+        const originalClassName = classNames[index]!
 
         const { modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition } =
             parseClassName(originalClassName)
@@ -42,13 +33,15 @@ export const mergeClassList = (classList: string, configUtils: ConfigUtils) => {
 
         if (!classGroupId) {
             if (!hasPostfixModifier) {
+                // Not a Tailwind class
                 result = originalClassName + (result.length > 0 ? ' ' + result : result)
                 continue
             }
 
             classGroupId = getClassGroupId(baseClassName)
 
             if (!classGroupId) {
+                // Not a Tailwind class
                 result = originalClassName + (result.length > 0 ? ' ' + result : result)
                 continue
             }
@@ -65,6 +58,7 @@ export const mergeClassList = (classList: string, configUtils: ConfigUtils) => {
         const classId = modifierId + classGroupId
 
         if (classGroupsInConflict.includes(classId)) {
+            // Tailwind class omitted due to conflict
             continue
         }
 
@@ -76,6 +70,7 @@ export const mergeClassList = (classList: string, configUtils: ConfigUtils) => {
             classGroupsInConflict.push(modifierId + group)
         }
 
+        // Tailwind class not in conflict
         result = originalClassName + (result.length > 0 ? ' ' + result : result)
     }
 

diff --git a/tests/wonky-inputs.test.ts b/tests/wonky-inputs.test.ts
@@ -6,4 +6,10 @@ test('handles wonky inputs', () => {
     expect(twMerge(' block ')).toBe('block')
     expect(twMerge('  block  px-2     py-4  ')).toBe('block px-2 py-4')
     expect(twMerge('  block  px-2', ' ', '     py-4  ')).toBe('block px-2 py-4')
+    expect(twMerge('block\npx-2')).toBe('block px-2')
+    expect(twMerge('\nblock\npx-2\n')).toBe('block px-2')
+    expect(twMerge('  block\n        \n        px-2   \n          py-4  ')).toBe('block px-2 py-4')
+    expect(twMerge('\r  block\n\r        \n        px-2   \n          py-4  ')).toBe(
+        'block px-2 py-4',
+    )
 })