feat: add '.touch-x' and '.scroll-x' utility classes (#609)

windicss · Dec 16, 2021 · 295e934 · 295e934
1 parent c10216c
commit 295e934
Show file tree

Hide file tree

Showing 8 changed files with 211 additions and 5 deletions.
diff --git a/src/config/order.ts b/src/config/order.ts
@@ -241,4 +241,6 @@ export enum pluginOrder {
   'backdropSaturate' = 14000,
   'backdropSepia' = 14100,
   'willChange' = 14200,
+  'touchAction' = 14300,
+  'scrollBehavior' = 14400,
 }
diff --git a/src/lib/utilities/static.ts b/src/lib/utilities/static.ts
@@ -3355,4 +3355,116 @@ export const staticUtilities: StaticUtility = {
       'order': 4,
     },
   },
+
+  // https://windicss.org/utilities/behaviors.html#touch-action
+  'touch-auto': {
+    'utility': {
+      'touch-action': 'auto',
+    },
+    'meta': {
+      'group': 'touchAction',
+      'order': 1,
+    },
+  },
+  'touch-none': {
+    'utility': {
+      'touch-action': 'none',
+    },
+    'meta': {
+      'group': 'touchAction',
+      'order': 2,
+    },
+  },
+  'touch-pan-x': {
+    'utility': {
+      'touch-action': 'pan-x',
+    },
+    'meta': {
+      'group': 'touchAction',
+      'order': 3,
+    },
+  },
+  'touch-pan-left': {
+    'utility': {
+      'touch-action': 'pan-left',
+    },
+    'meta': {
+      'group': 'touchAction',
+      'order': 4,
+    },
+  },
+  'touch-pan-right': {
+    'utility': {
+      'touch-action': 'pan-right',
+    },
+    'meta': {
+      'group': 'touchAction',
+      'order': 5,
+    },
+  },
+  'touch-pan-y': {
+    'utility': {
+      'touch-action': 'pan-y',
+    },
+    'meta': {
+      'group': 'touchAction',
+      'order': 6,
+    },
+  },
+  'touch-pan-up': {
+    'utility': {
+      'touch-action': 'pan-up',
+    },
+    'meta': {
+      'group': 'touchAction',
+      'order': 7,
+    },
+  },
+  'touch-pan-down': {
+    'utility': {
+      'touch-action': 'pan-down',
+    },
+    'meta': {
+      'group': 'touchAction',
+      'order': 8,
+    },
+  },
+  'touch-pinch-zoom': {
+    'utility': {
+      'touch-action': 'pinch-zoom',
+    },
+    'meta': {
+      'group': 'touchAction',
+      'order': 9,
+    },
+  },
+  'touch-manipulation': {
+    'utility': {
+      'touch-action': 'manipulation',
+    },
+    'meta': {
+      'group': 'touchAction',
+      'order': 10,
+    },
+  },
+
+  // https://windicss.org/utilities/behaviors.html#scroll-behavior
+  'scroll-auto': {
+    'utility': {
+      'scroll-behavior': 'auto',
+    },
+    'meta': {
+      'group': 'scrollBehavior',
+      'order': 1,
+    },
+  },
+  'scroll-smooth': {
+    'utility': {
+      'scroll-behavior': 'smooth',
+    },
+    'meta': {
+      'group': 'scrollBehavior',
+      'order': 2,
+    },
+  },
 };
diff --git a/src/utils/completions.ts b/src/utils/completions.ts
@@ -485,6 +485,22 @@ const utilities: { [key:string]: string[]} = {
     'will-change-contents',
     'will-change-transform',
   ],
+  touchAction: [
+    'touch-auto',
+    'touch-none',
+    'touch-pan-x',
+    'touch-pan-left',
+    'touch-pan-right',
+    'touch-pan-y',
+    'touch-pan-up',
+    'touch-pan-down',
+    'touch-pinch-zoom',
+    'touch-manipulation',
+  ],
+  scrollBehavior: [
+    'scroll-auto',
+    'scroll-smooth',
+  ],
 };
 
 const negative: { [key:string]: true} = {

diff --git a/test/processor/__snapshots__/resolve.test.ts.yml b/test/processor/__snapshots__/resolve.test.ts.yml
@@ -170,7 +170,9 @@ Tools / get corePlugins / list / 0: |-
     "backdropOpacity",
     "backdropSaturate",
     "backdropSepia",
-    "willChange"
+    "willChange",
+    "touchAction",
+    "scrollBehavior"
   ]
 Tools / get corePlugins / list2 / 1: |-
   [
@@ -347,7 +349,9 @@ Tools / get corePlugins / list3 / 2: |-
     "backdropOpacity",
     "backdropSaturate",
     "backdropSepia",
-    "willChange"
+    "willChange",
+    "touchAction",
+    "scrollBehavior"
   ]
 Tools / resolve dynamic utilities / with-plugins / 1: |-
   [

diff --git a/test/processor/__snapshots__/utilities.test.ts.yml b/test/processor/__snapshots__/utilities.test.ts.yml
@@ -1031,6 +1031,13 @@ Tools / ring opacity / css / 0: |-
     --tw-ring-opacity: 1;
     --tw-ring-color: rgba(91, 33, 182, var(--tw-ring-opacity));
   }
+Tools / scroll-behavior / css / 0: |-
+  .scroll-auto {
+    scroll-behavior: auto;
+  }
+  .scroll-smooth {
+    scroll-behavior: smooth;
+  }
 Tools / shadow color / css / 0: |-
   .shadow-2xl {
     --tw-shadow-color: 0, 0, 0;
@@ -1261,6 +1268,37 @@ Tools / text stroke width & stroke color / css / 0: |-
   .text-stroke-3px {
     -webkit-text-stroke-width: 3px;
   }
+Tools / touch-action / css / 0: |-
+  .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;
+  }
 Tools / transform 3d / css / 0: |-
   .transform {
     --tw-translate-x: 0;

diff --git a/test/processor/resolve.test.ts b/test/processor/resolve.test.ts
@@ -44,8 +44,8 @@ describe('Resolve Tests', () => {
   });
 
   it('resolve static utilities', () => {
-    expect(Object.keys(processor.resolveStaticUtilities(false)).length).toEqual(324);
-    expect(Object.keys(processor.resolveStaticUtilities(true)).length).toEqual(333);
+    expect(Object.keys(processor.resolveStaticUtilities(false)).length).toEqual(336);
+    expect(Object.keys(processor.resolveStaticUtilities(true)).length).toEqual(345);
   });
 
   it('resolve dynamic utilities', () => {

diff --git a/test/processor/utilities.test.ts b/test/processor/utilities.test.ts
@@ -399,4 +399,26 @@ describe('Utilities', () => {
     will-change-transform
     `).styleSheet.build()).toMatchSnapshot('css');
   });
+
+  it('touch-action', () => {
+    expect(processor.interpret(`
+    touch-auto
+    touch-none
+    touch-pan-x
+    touch-pan-left
+    touch-pan-right
+    touch-pan-y
+    touch-pan-up
+    touch-pan-down
+    touch-pinch-zoom
+    touch-manipulation
+    `).styleSheet.build()).toMatchSnapshot('css');
+  });
+
+  it('scroll-behavior', () => {
+    expect(processor.interpret(`
+    scroll-auto
+    scroll-smooth
+    `).styleSheet.build()).toMatchSnapshot('css');
+  });
 });
diff --git a/test/utils/__snapshots__/completions.test.ts.yml b/test/utils/__snapshots__/completions.test.ts.yml
@@ -7006,7 +7006,19 @@ Tools / completions / static / 0: |-
     "will-change-auto",
     "will-change-scroll",
     "will-change-contents",
-    "will-change-transform"
+    "will-change-transform",
+    "touch-auto",
+    "touch-none",
+    "touch-pan-x",
+    "touch-pan-left",
+    "touch-pan-right",
+    "touch-pan-y",
+    "touch-pan-up",
+    "touch-pan-down",
+    "touch-pinch-zoom",
+    "touch-manipulation",
+    "scroll-auto",
+    "scroll-smooth"
   ]
 'Tools / custom theme properties #226 / css / 1': |-
   .h-screen-px {