feat: support transform-xyz with brackets

MellowCo · Apr 5, 2024 · a0e5da2 · qinains · Apr 9, 2024 · qinains
1 parent d7d923f
commit a0e5da2
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 53 deletions.
diff --git a/src/rules/transform.ts b/src/rules/transform.ts
@@ -1,7 +1,7 @@
 import type { CSSValues, Rule, RuleContext } from '@unocss/core'
 import { cacheRestoreSelector } from 'unplugin-transform-class/utils'
 import type { Theme } from '../theme'
-import { handler as h, makeGlobalStaticRules, positionMap, xyzMap } from '../utils'
+import { handler as h, makeGlobalStaticRules, positionMap, transformXYZ, xyzMap } from '../utils'
 
 const transformValues = [
   'translate',
@@ -106,7 +106,7 @@ function handleTranslate([, d, b]: string[], { theme }: RuleContext<Theme>): CSS
   const v = theme.spacing?.[b] ?? h.bracket.cssvar.fraction.remToRpx(b)
   if (v != null) {
     return [
-      ...xyzMap[d].map((i): [string, string] => [`--un-translate${i}`, v]),
+      ...transformXYZ(d, v, 'scale'),
       ['transform', transformCpu],
     ]
   }
@@ -150,7 +150,7 @@ function handleSkew([, d, b]: string[]): CSSValues | undefined {
   const v = h.bracket.cssvar.degree(b)
   if (v != null) {
     return [
-      ...xyzMap[d].map((i): [string, string] => [`--un-skew${i}`, v]),
+      ...transformXYZ(d, v, 'skew'),
       ['transform', transformCpu],
     ]
   }

diff --git a/src/utils/handlers/regex.ts b/src/utils/handlers/regex.ts
@@ -2,3 +2,4 @@ export const numberWithUnitRE = /^(-?\d*(?:\.\d+)?)(px|pt|pc|%|r?(?:em|ex|lh|cap
 export const numberRE = /^(-?[0-9.]+)$/i
 export const unitOnlyRE = /^(px)$/i
 export const bracketTypeRe = /^\[(color|length|size|position|quoted|string):/i
+export const splitComma = /,(?![^()]*\))/g
diff --git a/src/utils/mappings.ts b/src/utils/mappings.ts
@@ -71,6 +71,8 @@ export const xyzMap: Record<string, string[]> = {
   '': ['-x', '-y'],
 }
 
+export const xyzArray = ['x', 'y', 'z']
+
 const basePositionMap = [
   'top',
   'top center',

diff --git a/src/utils/utilities.ts b/src/utils/utilities.ts
@@ -6,8 +6,8 @@ import type { Theme } from '../theme'
 import { colorOpacityToString, colorToString, parseCssColor } from './colors'
 
 import { handler as h } from './handlers'
-import { cssMathFnRE, directionMap, globalKeywords } from './mappings'
-import { bracketTypeRe, numberWithUnitRE } from './handlers/regex'
+import { cssMathFnRE, directionMap, globalKeywords, xyzArray, xyzMap } from './mappings'
+import { bracketTypeRe, numberWithUnitRE, splitComma } from './handlers/regex'
 
 export const CONTROL_MINI_NO_NEGATIVE = '$$mini-no-negative'
 
@@ -398,3 +398,11 @@ export function isSize(str: string) {
     str = str.slice(1, -1)
   return cssMathFnRE.test(str) || numberWithUnitRE.test(str)
 }
+
+export function transformXYZ(d: string, v: string, name: string): [string, string][] {
+  const values: string[] = v.split(splitComma)
+  if (d || (!d && values.length === 1))
+    return xyzMap[d].map((i): [string, string] => [`--un-${name}${i}`, v])
+
+  return values.map((v, i) => [`--un-${name}-${xyzArray[i]}`, v])
+}
diff --git a/test/assets/output/preset-mini/targets.css b/test/assets/output/preset-mini/targets.css
diff --git a/test/assets/output/preset-weapp/targets-custom-rules.css b/test/assets/output/preset-weapp/targets-custom-rules.css
diff --git a/test/assets/output/preset-weapp/targets.css b/test/assets/output/preset-weapp/targets.css
diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -944,6 +944,8 @@ export const presetMiniTargets: string[] = [
   'transform-unset',
   'translate-none',
   'translate-y-1/4',
+  'translate-[var(--x),var(--y)]',
+  'translate-[var(--x),var(--y),25%]',
   'translate-y-px',
   'translate-full',
   'translate-x-full',
@@ -955,6 +957,8 @@ export const presetMiniTargets: string[] = [
   'transform-rotate-z-[var(--spin)]',
   'rotate-z-[var(--spin)]',
   'skew-10',
+  'skew-[var(--x),var(--y)]',
+  'skew-[var(--x),var(--y),25%]',
   'skew-x-10',
   'skew-x-10deg',
   'skew-x-10.00deg',
@@ -1114,6 +1118,8 @@ export const presetMiniTargets: string[] = [
   'rotate-x-$variable',
   'skew-x-$variable',
   'scale-$variable',
+  'scale-[var(--x),var(--y)]',
+  'scale-[var(--x),var(--y),20%]',
   'scale-x-$variable',
   'transition-delay-$variable',
   'transition-duration-$variable',