Merge pull request #313 from dcastil/bugfix/312/fix-touch-action-clas…

…ses-overriding-each-other-incorrectly Fix touch action classes overriding each other incorrectly
dcastil · Sep 18, 2023 · fb1fc1f · fb1fc1f
2 parents eb09d52 + 9cf0c4b
commit fb1fc1f
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 8 deletions.
diff --git a/src/lib/default-config.ts b/src/lib/default-config.ts
@@ -1652,15 +1652,32 @@ export function getDefaultConfig() {
              */
             touch: [
                 {
-                    touch: [
-                        'auto',
-                        'none',
-                        'pinch-zoom',
-                        'manipulation',
-                        { pan: ['x', 'left', 'right', 'y', 'up', 'down'] },
-                    ],
+                    touch: ['auto', 'none', 'manipulation'],
+                },
+            ],
+            /**
+             * Touch Action X
+             * @see https://tailwindcss.com/docs/touch-action
+             */
+            'touch-x': [
+                {
+                    'touch-pan': ['x', 'left', 'right'],
                 },
             ],
+            /**
+             * Touch Action Y
+             * @see https://tailwindcss.com/docs/touch-action
+             */
+            'touch-y': [
+                {
+                    'touch-pan': ['y', 'up', 'down'],
+                },
+            ],
+            /**
+             * Touch Action Pinch Zoom
+             * @see https://tailwindcss.com/docs/touch-action
+             */
+            'touch-pz': ['touch-pinch-zoom'],
             /**
              * User Select
              * @see https://tailwindcss.com/docs/user-select
@@ -1788,6 +1805,10 @@ export function getDefaultConfig() {
             ],
             'scroll-px': ['scroll-pr', 'scroll-pl'],
             'scroll-py': ['scroll-pt', 'scroll-pb'],
+            touch: ['touch-x', 'touch-y', 'touch-pz'],
+            'touch-x': ['touch'],
+            'touch-y': ['touch'],
+            'touch-pz': ['touch'],
         },
         conflictingClassGroupModifiers: {
             'font-size': ['leading'],

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -386,6 +386,9 @@ export type DefaultClassGroupIds =
     | 'text-transform'
     | 'top'
     | 'touch'
+    | 'touch-x'
+    | 'touch-y'
+    | 'touch-pz'
     | 'tracking'
     | 'transform-origin'
     | 'transform'

diff --git a/tests/class-map.test.ts b/tests/class-map.test.ts
@@ -249,7 +249,7 @@ test('class map has correct class groups at first part', () => {
         text: ['font-size', 'text-alignment', 'text-color', 'text-opacity', 'text-overflow'],
         to: ['gradient-to', 'gradient-to-pos'],
         top: ['top'],
-        touch: ['touch'],
+        touch: ['touch', 'touch-pz', 'touch-x', 'touch-y'],
         tracking: ['tracking'],
         transform: ['transform'],
         transition: ['transition'],

diff --git a/tests/conflicts-across-class-groups.test.ts b/tests/conflicts-across-class-groups.test.ts
@@ -18,3 +18,16 @@ test('ring and shadow classes do not create conflict', () => {
     expect(twMerge('shadow ring')).toBe('shadow ring')
     expect(twMerge('shadow-md ring-2')).toBe('shadow-md ring-2')
 })
+
+test('touch classes do create conflicts correctly', () => {
+    expect(twMerge('touch-pan-x touch-pan-right')).toBe('touch-pan-right')
+    expect(twMerge('touch-none touch-pan-x')).toBe('touch-pan-x')
+    expect(twMerge('touch-pan-x touch-none')).toBe('touch-none')
+    expect(twMerge('touch-pan-x touch-pan-y touch-pinch-zoom')).toBe(
+        'touch-pan-x touch-pan-y touch-pinch-zoom',
+    )
+    expect(twMerge('touch-manipulation touch-pan-x touch-pan-y touch-pinch-zoom')).toBe(
+        'touch-pan-x touch-pan-y touch-pinch-zoom',
+    )
+    expect(twMerge('touch-pan-x touch-pan-y touch-pinch-zoom touch-auto')).toBe('touch-auto')
+})