Skip to content

Commit a33c1a6

Browse files
adamwathanadamwathan
committed
Update transform order to scale, skew, rotate, translate
1 parent 6378808 commit a33c1a6

File tree

3 files changed

+34
-34
lines changed

3 files changed

+34
-34
lines changed

‎__tests__/fixtures/tailwind-output-important.css

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8788,12 +8788,12 @@ video {
87888788
.transform {
87898789
--transform-translate-x: 0 !important;
87908790
--transform-translate-y: 0 !important;
8791-
--transform-scale-x: 1 !important;
8792-
--transform-scale-y: 1 !important;
87938791
--transform-rotate: 0 !important;
87948792
--transform-skew-x: 0 !important;
87958793
--transform-skew-y: 0 !important;
8796-
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) !important;
8794+
--transform-scale-x: 1 !important;
8795+
--transform-scale-y: 1 !important;
8796+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) !important;
87978797
}
87988798

87998799
.transform-none {
@@ -18483,12 +18483,12 @@ video {
1848318483
.sm\:transform {
1848418484
--transform-translate-x: 0 !important;
1848518485
--transform-translate-y: 0 !important;
18486-
--transform-scale-x: 1 !important;
18487-
--transform-scale-y: 1 !important;
1848818486
--transform-rotate: 0 !important;
1848918487
--transform-skew-x: 0 !important;
1849018488
--transform-skew-y: 0 !important;
18491-
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) !important;
18489+
--transform-scale-x: 1 !important;
18490+
--transform-scale-y: 1 !important;
18491+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) !important;
1849218492
}
1849318493

1849418494
.sm\:transform-none {
@@ -28179,12 +28179,12 @@ video {
2817928179
.md\:transform {
2818028180
--transform-translate-x: 0 !important;
2818128181
--transform-translate-y: 0 !important;
28182-
--transform-scale-x: 1 !important;
28183-
--transform-scale-y: 1 !important;
2818428182
--transform-rotate: 0 !important;
2818528183
--transform-skew-x: 0 !important;
2818628184
--transform-skew-y: 0 !important;
28187-
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) !important;
28185+
--transform-scale-x: 1 !important;
28186+
--transform-scale-y: 1 !important;
28187+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) !important;
2818828188
}
2818928189

2819028190
.md\:transform-none {
@@ -37875,12 +37875,12 @@ video {
3787537875
.lg\:transform {
3787637876
--transform-translate-x: 0 !important;
3787737877
--transform-translate-y: 0 !important;
37878-
--transform-scale-x: 1 !important;
37879-
--transform-scale-y: 1 !important;
3788037878
--transform-rotate: 0 !important;
3788137879
--transform-skew-x: 0 !important;
3788237880
--transform-skew-y: 0 !important;
37883-
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) !important;
37881+
--transform-scale-x: 1 !important;
37882+
--transform-scale-y: 1 !important;
37883+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) !important;
3788437884
}
3788537885

3788637886
.lg\:transform-none {
@@ -47571,12 +47571,12 @@ video {
4757147571
.xl\:transform {
4757247572
--transform-translate-x: 0 !important;
4757347573
--transform-translate-y: 0 !important;
47574-
--transform-scale-x: 1 !important;
47575-
--transform-scale-y: 1 !important;
4757647574
--transform-rotate: 0 !important;
4757747575
--transform-skew-x: 0 !important;
4757847576
--transform-skew-y: 0 !important;
47579-
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) !important;
47577+
--transform-scale-x: 1 !important;
47578+
--transform-scale-y: 1 !important;
47579+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) !important;
4758047580
}
4758147581

4758247582
.xl\:transform-none {

‎__tests__/fixtures/tailwind-output.css

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8788,12 +8788,12 @@ video {
87888788
.transform {
87898789
--transform-translate-x: 0;
87908790
--transform-translate-y: 0;
8791-
--transform-scale-x: 1;
8792-
--transform-scale-y: 1;
87938791
--transform-rotate: 0;
87948792
--transform-skew-x: 0;
87958793
--transform-skew-y: 0;
8796-
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y));
8794+
--transform-scale-x: 1;
8795+
--transform-scale-y: 1;
8796+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
87978797
}
87988798

87998799
.transform-none {
@@ -18483,12 +18483,12 @@ video {
1848318483
.sm\:transform {
1848418484
--transform-translate-x: 0;
1848518485
--transform-translate-y: 0;
18486-
--transform-scale-x: 1;
18487-
--transform-scale-y: 1;
1848818486
--transform-rotate: 0;
1848918487
--transform-skew-x: 0;
1849018488
--transform-skew-y: 0;
18491-
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y));
18489+
--transform-scale-x: 1;
18490+
--transform-scale-y: 1;
18491+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
1849218492
}
1849318493

1849418494
.sm\:transform-none {
@@ -28179,12 +28179,12 @@ video {
2817928179
.md\:transform {
2818028180
--transform-translate-x: 0;
2818128181
--transform-translate-y: 0;
28182-
--transform-scale-x: 1;
28183-
--transform-scale-y: 1;
2818428182
--transform-rotate: 0;
2818528183
--transform-skew-x: 0;
2818628184
--transform-skew-y: 0;
28187-
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y));
28185+
--transform-scale-x: 1;
28186+
--transform-scale-y: 1;
28187+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
2818828188
}
2818928189

2819028190
.md\:transform-none {
@@ -37875,12 +37875,12 @@ video {
3787537875
.lg\:transform {
3787637876
--transform-translate-x: 0;
3787737877
--transform-translate-y: 0;
37878-
--transform-scale-x: 1;
37879-
--transform-scale-y: 1;
3788037878
--transform-rotate: 0;
3788137879
--transform-skew-x: 0;
3788237880
--transform-skew-y: 0;
37883-
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y));
37881+
--transform-scale-x: 1;
37882+
--transform-scale-y: 1;
37883+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
3788437884
}
3788537885

3788637886
.lg\:transform-none {
@@ -47571,12 +47571,12 @@ video {
4757147571
.xl\:transform {
4757247572
--transform-translate-x: 0;
4757347573
--transform-translate-y: 0;
47574-
--transform-scale-x: 1;
47575-
--transform-scale-y: 1;
4757647574
--transform-rotate: 0;
4757747575
--transform-skew-x: 0;
4757847576
--transform-skew-y: 0;
47579-
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y));
47577+
--transform-scale-x: 1;
47578+
--transform-scale-y: 1;
47579+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
4758047580
}
4758147581

4758247582
.xl\:transform-none {

‎src/plugins/transform.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,19 @@ export default function() {
55
'.transform': {
66
'--transform-translate-x': '0',
77
'--transform-translate-y': '0',
8-
'--transform-scale-x': '1',
9-
'--transform-scale-y': '1',
108
'--transform-rotate': '0',
119
'--transform-skew-x': '0',
1210
'--transform-skew-y': '0',
11+
'--transform-scale-x': '1',
12+
'--transform-scale-y': '1',
1313
transform: [
1414
'translateX(var(--transform-translate-x))',
1515
'translateY(var(--transform-translate-y))',
16-
'scaleX(var(--transform-scale-x))',
17-
'scaleY(var(--transform-scale-y))',
1816
'rotate(var(--transform-rotate))',
1917
'skewX(var(--transform-skew-x))',
2018
'skewY(var(--transform-skew-y))',
19+
'scaleX(var(--transform-scale-x))',
20+
'scaleY(var(--transform-scale-y))',
2121
].join(' '),
2222
},
2323
'.transform-none': { transform: 'none' },

0 commit comments

Comments
 (0)