Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 91ee3a5

Browse files
zyyvzyyv
authored
fix(preset-mini, preset-wind4): update transform perspective generated css (#5114)
1 parent 419b6f9 commit 91ee3a5

File tree

24 files changed

+121
-93
lines changed

24 files changed

+121
-93
lines changed

‎packages-engine/core/test/assets/output/shortcuts-transform-duplicated.css‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
/* layer: shortcuts */
22
.transform-duplicated {
33
--un-translate-x: 0.25rem;
4-
transform: translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
4+
transform: perspective(var(--un-perspective))
5+
translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
56
translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
67
rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
78
rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y))
@@ -14,7 +15,8 @@
1415
.transform-duplicated:hover {
1516
--un-scale-x: 0.02;
1617
--un-scale-y: 0.02;
17-
transform: translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
18+
transform: perspective(var(--un-perspective))
19+
translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
1820
translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
1921
rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
2022
rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y))
@@ -23,7 +25,8 @@
2325
}
2426
.transform-duplicated:active {
2527
--un-scale-x: 0.04;
26-
transform: translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
28+
transform: perspective(var(--un-perspective))
29+
translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
2730
translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
2831
rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
2932
rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y))

‎packages-engine/core/test/postprocess.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ it('postprocess', async () => {
3838
expect(matched).eql(new Set(positive))
3939
expect(css).toMatchInlineSnapshot(`
4040
"/* layer: default */
41-
.scale-100{--hello-scale-x:1;--hello-scale-y:1;transform:translateX(var(--hello-translate-x)) translateY(var(--hello-translate-y)) translateZ(var(--hello-translate-z)) rotate(var(--hello-rotate)) rotateX(var(--hello-rotate-x)) rotateY(var(--hello-rotate-y)) rotateZ(var(--hello-rotate-z)) skewX(var(--hello-skew-x)) skewY(var(--hello-skew-y)) scaleX(var(--hello-scale-x)) scaleY(var(--hello-scale-y)) scaleZ(var(--hello-scale-z));}
41+
.scale-100{--hello-scale-x:1;--hello-scale-y:1;transform:perspective(var(--hello-perspective)) translateX(var(--hello-translate-x)) translateY(var(--hello-translate-y)) translateZ(var(--hello-translate-z)) rotate(var(--hello-rotate)) rotateX(var(--hello-rotate-x)) rotateY(var(--hello-rotate-y)) rotateZ(var(--hello-rotate-z)) skewX(var(--hello-skew-x)) skewY(var(--hello-skew-y)) scaleX(var(--hello-scale-x)) scaleY(var(--hello-scale-y)) scaleZ(var(--hello-scale-z));}
4242
.text-opacity-50{--hi-text-opacity:0.5;}"
4343
`)
4444
})

‎packages-integrations/runtime/test/assets/output/runtime-preset-tagify.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* layer: default */
22
m-1{margin:0.25rem;}
33
flex{display:flex;}
4-
scale-2{--un-scale-x:0.02;--un-scale-y:0.02;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
4+
scale-2{--un-scale-x:0.02;--un-scale-y:0.02;transform:perspective(var(--un-perspective)) translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
55
.p2{padding:0.5rem;}
66
text-green5\:10{color:rgb(34 197 94 / 0.1);}
77
text-red{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));}

‎packages-integrations/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,19 +29,21 @@
2929
:global(._scale-5_7dkb0w) {
3030
--un-scale-x: 0.05;
3131
--un-scale-y: 0.05;
32-
transform: translateX(var(--un-translate-x))
33-
translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))
34-
rotate(var(--un-rotate)) rotateX(var(--un-rotate-x))
35-
rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z))
36-
skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x))
32+
transform: perspective(var(--un-perspective))
33+
translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
34+
translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
35+
rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
36+
rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x))
37+
skewY(var(--un-skew-y)) scaleX(var(--un-scale-x))
3738
scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));
3839
}
3940
:global(._transform_7dkb0w) {
40-
transform: translateX(var(--un-translate-x))
41-
translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))
42-
rotate(var(--un-rotate)) rotateX(var(--un-rotate-x))
43-
rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z))
44-
skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x))
41+
transform: perspective(var(--un-perspective))
42+
translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
43+
translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
44+
rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
45+
rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x))
46+
skewY(var(--un-skew-y)) scaleX(var(--un-scale-x))
4547
scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));
4648
}
4749
:global(._space-x-1_7dkb0w > :not([hidden]) ~ :not([hidden])) {

‎packages-integrations/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,12 @@
2525
:global(.uno-uovm2y) {
2626
--un-scale-x: 0.05;
2727
--un-scale-y: 0.05;
28-
transform: translateX(var(--un-translate-x))
29-
translateY(var(--un-translate-y)) translateZ(var(--un-translate-z))
30-
rotate(var(--un-rotate)) rotateX(var(--un-rotate-x))
31-
rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z))
32-
skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x))
28+
transform: perspective(var(--un-perspective))
29+
translateX(var(--un-translate-x)) translateY(var(--un-translate-y))
30+
translateZ(var(--un-translate-z)) rotate(var(--un-rotate))
31+
rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y))
32+
rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x))
33+
skewY(var(--un-skew-y)) scaleX(var(--un-scale-x))
3334
scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));
3435
--un-bg-opacity: 1;
3536
background-color: rgb(239 68 68 / var(--un-bg-opacity));

‎packages-presets/preset-mini/src/_rules/transform.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const transformCpu = [
2424
].join(' ')
2525

2626
const transform = [
27+
'perspective(var(--un-perspective))',
2728
'translateX(var(--un-translate-x))',
2829
'translateY(var(--un-translate-y))',
2930
'translateZ(var(--un-translate-z))',
@@ -77,9 +78,16 @@ export const transforms: Rule[] = [
7778
],
7879

7980
// perspectives
80-
[/^(?:transform-)?perspect(?:ive)?-(.+)$/, ([, s]) => {
81+
[/^(transform-)?perspect(?:ive)?-(.+)$/, ([, t, s]) => {
8182
const v = h.bracket.cssvar.px.numberWithUnit(s)
8283
if (v != null) {
84+
if (t) {
85+
return {
86+
'--un-perspective': `perspective(${v})`,
87+
'transform': transform,
88+
}
89+
}
90+
8391
return {
8492
'-webkit-perspective': v,
8593
'perspective': v,
@@ -88,7 +96,7 @@ export const transforms: Rule[] = [
8896
}],
8997

9098
// skip 1 & 2 letters shortcut
91-
[/^(?:transform-)?perspect(?:ive)?-origin-(.+)$/, ([, s]) => {
99+
[/^perspect(?:ive)?-origin-(.+)$/, ([, s]) => {
92100
const v = h.bracket.cssvar(s) ?? (s.length >= 3 ? positionMap[s] : undefined)
93101
if (v != null) {
94102
return {

‎packages-presets/preset-wind4/src/rules/transform.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const transforms: Rule<Theme>[] = [
4545
],
4646

4747
// perspectives
48-
[/^(?:transform-)?perspect(?:ive)?-(.+)$/, ([, s], { theme }) => {
48+
[/^(transform-)?perspect(?:ive)?-(.+)$/, ([, t, s], { theme }) => {
4949
let v
5050
if (theme.perspective?.[s]) {
5151
themeTracking(`perspective`, s)
@@ -56,11 +56,18 @@ export const transforms: Rule<Theme>[] = [
5656
}
5757

5858
if (v != null) {
59+
if (t) {
60+
return {
61+
'--un-perspective': `perspective(${v})`,
62+
'transform': `var(--un-perspective) ${transform}`,
63+
}
64+
}
65+
5966
return {
6067
perspective: v,
6168
}
6269
}
63-
}, { autocomplete: [`transform-perspective-<num>`, `perspective-<num>`, `perspective-$perspective`] }],
70+
}, { autocomplete: [`perspective-<num>`, `perspective-$perspective`] }],
6471

6572
// skip 1 & 2 letters shortcut
6673
[/^(?:transform-)?perspect(?:ive)?-origin-(.+)$/, ([, s]) => {

‎test/__snapshots__/postcss.test.ts.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -408,7 +408,7 @@ exports[`postcss > @unocss 1`] = `
408408
.motion-safe\\:transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
409409
}
410410
@media (prefers-reduced-motion: reduce){
411-
.motion-reduce\\:hover\\:translate-0:hover{--un-translate-x:0;--un-translate-y:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
411+
.motion-reduce\\:hover\\:translate-0:hover{--un-translate-x:0;--un-translate-y:0;transform:perspective(var(--un-perspective)) translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
412412
}
413413
@media (prefers-reduced-transparency: reduce){
414414
.media-opacity_not_ok\\:opacity-0{opacity:0;}

‎test/assets/output/preset-mini-custom-var-prefix.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test/assets/output/preset-mini-empty-prefix.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)