add tests for README examples and fix auto not being accepted from Top / Right / Bottom / Left utilities

Author: dcastil

src/config/default-config.ts

@@ -5,7 +5,7 @@ const SIZES_EXTENDED = ['3xl', '4xl', '5xl', '6xl', '7xl'] as const
 const OVERSCROLL = ['auto', 'contain', 'none'] as const
 const OVERFLOW = ['auto', 'hidden', 'visible', 'scroll'] as const
 const LENGTH = [isLength] as const
-const MARGIN = ['auto', isLength] as const
+const LENGTH_WITH_AUTO = ['auto', isLength] as const
 const INTEGER = [isInteger] as const
 const ANY = [isAny] as const
 const POSITIONS = [
@@ -172,45 +172,45 @@ export function getDefaultConfig() {
                  * Right / Left
                  * @see https://tailwindcss.com/docs/top-right-bottom-left
                  */
-                [{ x: LENGTH }],
+                [{ x: LENGTH_WITH_AUTO }],
                 /**
                  * Top / Bottom
                  * @see https://tailwindcss.com/docs/top-right-bottom-left
                  */
-                [{ y: LENGTH }],
+                [{ y: LENGTH_WITH_AUTO }],
                 /**
                  * Top / Right / Bottom / Left
                  * @see https://tailwindcss.com/docs/top-right-bottom-left
                  */
-                LENGTH,
+                LENGTH_WITH_AUTO,
             ],
             top: [
                 /**
                  * Top
                  * @see https://tailwindcss.com/docs/top-right-bottom-left
                  */
-                LENGTH,
+                LENGTH_WITH_AUTO,
             ],
             right: [
                 /**
                  * Right
                  * @see https://tailwindcss.com/docs/top-right-bottom-left
                  */
-                LENGTH,
+                LENGTH_WITH_AUTO,
             ],
             bottom: [
                 /**
                  * Bottom
                  * @see https://tailwindcss.com/docs/top-right-bottom-left
                  */
-                LENGTH,
+                LENGTH_WITH_AUTO,
             ],
             left: [
                 /**
                  * Left
                  * @see https://tailwindcss.com/docs/top-right-bottom-left
                  */
-                LENGTH,
+                LENGTH_WITH_AUTO,
             ],
             z: [
                 /**
@@ -449,49 +449,49 @@ export function getDefaultConfig() {
                  * Margin
                  * @see https://tailwindcss.com/docs/margin
                  */
-                MARGIN,
+                LENGTH_WITH_AUTO,
             ],
             mx: [
                 /**
                  * Margin X
                  * @see https://tailwindcss.com/docs/margin
                  */
-                MARGIN,
+                LENGTH_WITH_AUTO,
             ],
             my: [
                 /**
                  * Margin Y
                  * @see https://tailwindcss.com/docs/margin
                  */
-                MARGIN,
+                LENGTH_WITH_AUTO,
             ],
             mt: [
                 /**
                  * Margin Top
                  * @see https://tailwindcss.com/docs/margin
                  */
-                MARGIN,
+                LENGTH_WITH_AUTO,
             ],
             mr: [
                 /**
                  * Margin Right
                  * @see https://tailwindcss.com/docs/margin
                  */
-                MARGIN,
+                LENGTH_WITH_AUTO,
             ],
             mb: [
                 /**
                  * Margin Bottom
                  * @see https://tailwindcss.com/docs/margin
                  */
-                MARGIN,
+                LENGTH_WITH_AUTO,
             ],
             ml: [
                 /**
                  * Margin Left
                  * @see https://tailwindcss.com/docs/margin
                  */
-                MARGIN,
+                LENGTH_WITH_AUTO,
             ],
             space: [
                 /**

tests/readme-examples.test.ts

@@ -0,0 +1,39 @@
+import { twMerge } from '../src'
+
+test('readme examples', () => {
+    // # tailwind-merge
+    expect(twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')).toBe(
+        'hover:bg-dark-red p-3 bg-[#B91C1C]'
+    )
+
+    // ## What is it for
+    expect(twMerge('px-2 py-1', 'p-3')).toBe('p-3')
+
+    // ## Features
+    // ### Last conflicting class wins
+    expect(twMerge('p-5 p-2 p-4')).toBe('p-4')
+
+    // ### Resolves non-trivial conflicts
+    expect(twMerge('inset-x-px -inset-1')).toBe('-inset-1')
+    expect(twMerge('bottom-auto inset-y-6')).toBe('inset-y-6')
+    expect(twMerge('inline block')).toBe('block')
+
+    // ### Supports prefixes and stacked prefixes
+    expect(twMerge('p-2 hover:p-4')).toBe('p-2 hover:p-4')
+    expect(twMerge('hover:p-2 hover:p-4')).toBe('hover:p-4')
+    expect(twMerge('hover:focus:p-2 focus:hover:p-4')).toBe('focus:hover:p-4')
+
+    // ### Supports custom values
+    expect(twMerge('bg-black bg-[color:var(--mystery-var)]')).toBe('bg-[color:var(--mystery-var)]')
+    expect(twMerge('grid-cols-[1fr,auto] grid-cols-2')).toBe('grid-cols-2')
+
+    // ### Supports important modifier
+    expect(twMerge('!p-3 !p-4 p-5')).toBe('!p-4 p-5')
+    expect(twMerge('!right-2 !-inset-x-1')).toBe('!-inset-x-1')
+
+    // ### Preserves non-Tailwind classes
+    expect(twMerge('p-5 p-2 my-non-tailwind-class p-4')).toBe('my-non-tailwind-class p-4')
+
+    // ### Supports custom colors out of the box
+    expect(twMerge('text-red text-secret-sauce')).toBe('text-secret-sauce')
+})