add combinable touch-action support

Author: RobinMalfait

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)',
+      },
     })
   },
 

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;

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>