feat(preset-mini): add transform autocomplete (unocss#1197)

Co-authored-by: 隆杰 <[email protected]>

packages/preset-mini/src/rules/transform.ts

@@ -2,6 +2,12 @@ import type { CSSValues, Rule, RuleContext } from '@unocss/core'
 import type { Theme } from '../theme'
 import { handler as h, makeGlobalStaticRules, positionMap, xyzMap } from '../utils'
 
+const transformValues = [
+  'translate',
+  'rotate',
+  'scale',
+]
+
 const transformCpu = [
   'translateX(var(--un-translate-x))',
   'translateY(var(--un-translate-y))',
@@ -77,9 +83,9 @@ export const transforms: Rule[] = [
   [/^(?:transform-)?translate-([xyz])-(.+)$/, handleTranslate],
   [/^(?:transform-)?rotate-()(.+)$/, handleRotate],
   [/^(?:transform-)?rotate-([xyz])-(.+)$/, handleRotate],
-  [/^(?:transform-)?skew-([xy])-(.+)$/, handleSkew],
+  [/^(?:transform-)?skew-([xy])-(.+)$/, handleSkew, { autocomplete: ['transform-skew-(x|y)-<percent>'] }],
   [/^(?:transform-)?scale-()(.+)$/, handleScale],
-  [/^(?:transform-)?scale-([xyz])-(.+)$/, handleScale],
+  [/^(?:transform-)?scale-([xyz])-(.+)$/, handleScale, { autocomplete: [`transform-(${transformValues.join('|')})-<percent>`, `transform-(${transformValues.join('|')})-(x|y|z)-<percent>`] }],
 
   // style
   [/^(?:transform-)?preserve-3d$/, () => ({ 'transform-style': 'preserve-3d' })],

test/__snapshots__/autocomplete.test.ts.snap

@@ -52,6 +52,11 @@ exports[`autocomplete > should provide autocomplete 1`] = `
   "text-r": "text-red text-revert text-revert-layer text-right text-rose",
   "text-red-": "text-red-1 text-red-2 text-red-3 text-red-4 text-red-5 text-red-6 text-red-7 text-red-8 text-red-9 text-red-50",
   "touch-": "touch-auto touch-inherit touch-initial touch-manipulation touch-none touch-pan touch-pinch-zoom touch-revert touch-revert-layer touch-unset",
+  "transform-scale-": "transform-scale-0 transform-scale-10 transform-scale-20 transform-scale-30 transform-scale-40 transform-scale-50 transform-scale-60 transform-scale-70 transform-scale-80 transform-scale-90",
+  "transform-scale-x-": "transform-scale-x-0 transform-scale-x-10 transform-scale-x-20 transform-scale-x-30 transform-scale-x-40 transform-scale-x-50 transform-scale-x-60 transform-scale-x-70 transform-scale-x-80 transform-scale-x-90",
+  "transform-scale-z-": "transform-scale-z-0 transform-scale-z-10 transform-scale-z-20 transform-scale-z-30 transform-scale-z-40 transform-scale-z-50 transform-scale-z-60 transform-scale-z-70 transform-scale-z-80 transform-scale-z-90",
+  "transform-skew-x-": "transform-skew-x-0 transform-skew-x-10 transform-skew-x-20 transform-skew-x-30 transform-skew-x-40 transform-skew-x-50 transform-skew-x-60 transform-skew-x-70 transform-skew-x-80 transform-skew-x-90",
+  "transform-skew-y-": "transform-skew-y-0 transform-skew-y-10 transform-skew-y-20 transform-skew-y-30 transform-skew-y-40 transform-skew-y-50 transform-skew-y-60 transform-skew-y-70 transform-skew-y-80 transform-skew-y-90",
   "transition-": "transition-all transition-colors transition-inherit transition-initial transition-none transition-opacity transition-revert transition-revert-layer transition-shadow transition-transform",
   "v-": "v-base v-baseline v-bottom v-btm v-inherit v-initial v-mid v-middle v-revert v-revert-layer",
   "w-": "w-2xl w-3xl w-4xl w-5xl w-6xl w-7xl w-auto w-lg w-md w-none",

test/autocomplete.test.ts

@@ -89,6 +89,11 @@ describe('autocomplete', () => {
         'text-red-',
         'touch-',
         'transition-',
+        'transform-scale-z-',
+        'transform-scale-x-',
+        'transform-scale-',
+        'transform-skew-x-',
+        'transform-skew-y-',
         'v-',
         'w-',
         'z-',