Skip to content

Commit 238e267

Browse files
adamwathanadamwathan
committed
Reset default transform variables every time .transform is applied
1 parent 08b0fcf commit 238e267

File tree

3 files changed

+58
-14
lines changed

3 files changed

+58
-14
lines changed

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

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8338,7 +8338,11 @@ video {
83388338
}
83398339

83408340
.transform {
8341-
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) !important;
8341+
--transform-scale: 1 !important;
8342+
--transform-rotate: 0 !important;
8343+
--transform-translate-x: 0 !important;
8344+
--transform-translate-y: 0 !important;
8345+
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
83428346
}
83438347

83448348
.transform-none {
@@ -17309,7 +17313,11 @@ video {
1730917313
}
1731017314

1731117315
.sm\:transform {
17312-
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) !important;
17316+
--transform-scale: 1 !important;
17317+
--transform-rotate: 0 !important;
17318+
--transform-translate-x: 0 !important;
17319+
--transform-translate-y: 0 !important;
17320+
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
1731317321
}
1731417322

1731517323
.sm\:transform-none {
@@ -26281,7 +26289,11 @@ video {
2628126289
}
2628226290

2628326291
.md\:transform {
26284-
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) !important;
26292+
--transform-scale: 1 !important;
26293+
--transform-rotate: 0 !important;
26294+
--transform-translate-x: 0 !important;
26295+
--transform-translate-y: 0 !important;
26296+
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
2628526297
}
2628626298

2628726299
.md\:transform-none {
@@ -35253,7 +35265,11 @@ video {
3525335265
}
3525435266

3525535267
.lg\:transform {
35256-
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) !important;
35268+
--transform-scale: 1 !important;
35269+
--transform-rotate: 0 !important;
35270+
--transform-translate-x: 0 !important;
35271+
--transform-translate-y: 0 !important;
35272+
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
3525735273
}
3525835274

3525935275
.lg\:transform-none {
@@ -44225,7 +44241,11 @@ video {
4422544241
}
4422644242

4422744243
.xl\:transform {
44228-
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) !important;
44244+
--transform-scale: 1 !important;
44245+
--transform-rotate: 0 !important;
44246+
--transform-translate-x: 0 !important;
44247+
--transform-translate-y: 0 !important;
44248+
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
4422944249
}
4423044250

4423144251
.xl\:transform-none {

‎__tests__/fixtures/tailwind-output.css

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8338,7 +8338,11 @@ video {
83388338
}
83398339

83408340
.transform {
8341-
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0));
8341+
--transform-scale: 1;
8342+
--transform-rotate: 0;
8343+
--transform-translate-x: 0;
8344+
--transform-translate-y: 0;
8345+
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
83428346
}
83438347

83448348
.transform-none {
@@ -17309,7 +17313,11 @@ video {
1730917313
}
1731017314

1731117315
.sm\:transform {
17312-
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0));
17316+
--transform-scale: 1;
17317+
--transform-rotate: 0;
17318+
--transform-translate-x: 0;
17319+
--transform-translate-y: 0;
17320+
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
1731317321
}
1731417322

1731517323
.sm\:transform-none {
@@ -26281,7 +26289,11 @@ video {
2628126289
}
2628226290

2628326291
.md\:transform {
26284-
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0));
26292+
--transform-scale: 1;
26293+
--transform-rotate: 0;
26294+
--transform-translate-x: 0;
26295+
--transform-translate-y: 0;
26296+
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
2628526297
}
2628626298

2628726299
.md\:transform-none {
@@ -35253,7 +35265,11 @@ video {
3525335265
}
3525435266

3525535267
.lg\:transform {
35256-
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0));
35268+
--transform-scale: 1;
35269+
--transform-rotate: 0;
35270+
--transform-translate-x: 0;
35271+
--transform-translate-y: 0;
35272+
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
3525735273
}
3525835274

3525935275
.lg\:transform-none {
@@ -44225,7 +44241,11 @@ video {
4422544241
}
4422644242

4422744243
.xl\:transform {
44228-
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0));
44244+
--transform-scale: 1;
44245+
--transform-rotate: 0;
44246+
--transform-translate-x: 0;
44247+
--transform-translate-y: 0;
44248+
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
4422944249
}
4423044250

4423144251
.xl\:transform-none {

‎src/plugins/transform.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@ export default function() {
33
addUtilities(
44
{
55
'.transform': {
6+
'--transform-scale': '1',
7+
'--transform-rotate': '0',
8+
'--transform-translate-x': '0',
9+
'--transform-translate-y': '0',
610
transform: [
7-
'scale(var(--transform-scale, 1))',
8-
'rotate(var(--transform-rotate, 0))',
9-
'translateX(var(--transform-translate-x, 0))',
10-
'translateY(var(--transform-translate-y, 0))',
11+
'scale(var(--transform-scale))',
12+
'rotate(var(--transform-rotate))',
13+
'translateX(var(--transform-translate-x))',
14+
'translateY(var(--transform-translate-y))',
1115
].join(' '),
1216
},
1317
'.transform-none': { transform: 'none' },

0 commit comments

Comments
 (0)