From 20d7331c5318c8128df69c296f7afdeede956e80 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 17 Nov 2021 12:37:15 +0100
Subject: [PATCH] add combinable `touch-action` support

---
 src/corePlugins.js          | 65 ++++++++++++++++++++++++++++++++-----
 tests/basic-usage.test.css  | 35 ++++++++++++++++++--
 tests/basic-usage.test.html |  1 +
 3 files changed, 90 insertions(+), 11 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 831358270858..3e6935f91572 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -602,18 +602,65 @@ export let corePlugins = {
 
   cursor: createUtilityPlugin('cursor'),
 
-  touchAction: ({ addUtilities }) => {
+  touchAction: ({ addBase, addUtilities }) => {
+    addBase({
+      '@defaults touch-action': {
+        '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-pan-left': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-pan-right': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-pan-up': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-pan-down': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-manipulation': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-touch-action':
+          'var(--tw-pan-x) var(--tw-pan-left) var(--tw-pan-right) var(--tw-pan-y) var(--tw-pan-up) var(--tw-pan-down) var(--tw-pinch-zoom) var(--tw-manipulation)',
+      },
+    })
+
     addUtilities({
       '.touch-auto': { 'touch-action': 'auto' },
       '.touch-none': { 'touch-action': 'none' },
-      '.touch-pan-x': { 'touch-action': 'pan-x' },
-      '.touch-pan-left': { 'touch-action': 'pan-left' },
-      '.touch-pan-right': { 'touch-action': 'pan-right' },
-      '.touch-pan-y': { 'touch-action': 'pan-y' },
-      '.touch-pan-up': { 'touch-action': 'pan-up' },
-      '.touch-pan-down': { 'touch-action': 'pan-down' },
-      '.touch-pinch-zoom': { 'touch-action': 'pinch-zoom' },
-      '.touch-manipulation': { 'touch-action': 'manipulation' },
+      '.touch-pan-x': {
+        '@defaults touch-action': {},
+        '--tw-pan-x': 'pan-x',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-left': {
+        '@defaults touch-action': {},
+        '--tw-pan-left': 'pan-left',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-right': {
+        '@defaults touch-action': {},
+        '--tw-pan-right': 'pan-right',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-y': {
+        '@defaults touch-action': {},
+        '--tw-pan-y': 'pan-y',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-up': {
+        '@defaults touch-action': {},
+        '--tw-pan-up': 'pan-up',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-down': {
+        '@defaults touch-action': {},
+        '--tw-pan-down': 'pan-down',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pinch-zoom': {
+        '@defaults touch-action': {},
+        '--tw-pinch-zoom': 'pinch-zoom',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-manipulation': {
+        '@defaults touch-action': {},
+        '--tw-manipulation': 'manipulation',
+        'touch-action': 'var(--tw-touch-action)',
+      },
     })
   },
 
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index 3e491b6b07ee..7a42eb46d019 100644
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -19,6 +19,23 @@
     scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.touch-pan-x,
+.touch-pan-y,
+.touch-pan-up,
+.touch-pinch-zoom,
+.touch-manipulation {
+  --tw-pan-x: var(--tw-empty, /*!*/ /*!*/);
+  --tw-pan-left: var(--tw-empty, /*!*/ /*!*/);
+  --tw-pan-right: var(--tw-empty, /*!*/ /*!*/);
+  --tw-pan-y: var(--tw-empty, /*!*/ /*!*/);
+  --tw-pan-up: var(--tw-empty, /*!*/ /*!*/);
+  --tw-pan-down: var(--tw-empty, /*!*/ /*!*/);
+  --tw-pinch-zoom: var(--tw-empty, /*!*/ /*!*/);
+  --tw-manipulation: var(--tw-empty, /*!*/ /*!*/);
+  --tw-touch-action: var(--tw-pan-x) var(--tw-pan-left) var(--tw-pan-right) var(--tw-pan-y)
+    var(--tw-pan-up) var(--tw-pan-down) var(--tw-pinch-zoom) var(--tw-manipulation);
+}
+
 .snap-x {
   --tw-scroll-snap-strictness: proximity;
 }
@@ -374,11 +391,25 @@
 .cursor-pointer {
   cursor: pointer;
 }
+.touch-pan-x {
+  --tw-pan-x: pan-x;
+  touch-action: var(--tw-touch-action);
+}
 .touch-pan-y {
-  touch-action: pan-y;
+  --tw-pan-y: pan-y;
+  touch-action: var(--tw-touch-action);
+}
+.touch-pan-up {
+  --tw-pan-up: pan-up;
+  touch-action: var(--tw-touch-action);
+}
+.touch-pinch-zoom {
+  --tw-pinch-zoom: pinch-zoom;
+  touch-action: var(--tw-touch-action);
 }
 .touch-manipulation {
-  touch-action: manipulation;
+  --tw-manipulation: manipulation;
+  touch-action: var(--tw-touch-action);
 }
 .select-none {
   user-select: none;
diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html
index 9d90c57a6629..4a64e43c51ae 100644
--- a/tests/basic-usage.test.html
+++ b/tests/basic-usage.test.html
@@ -170,6 +170,7 @@
     <div class="transition transition-all"></div>
     <div class="ease-in-out"></div>
     <div class="translate-x-5 -translate-x-4 translate-y-6 -translate-x-3"></div>
+    <div class="touch-pan-up touch-pan-x touch-pinch-zoom"></div>
     <div class="select-none"></div>
     <div class="align-middle"></div>
     <div class="invisible"></div>