Skip to content

Commit d38c358

Browse files
slavanossarslavanossar
authored
Use translate3d() (#1380)
* use translate3d * add translate3d to test fixtures * create `transform-gpu` utility * merge in test from master * update tests * add responsive variants to tests
1 parent 3f2f81b commit d38c358

File tree

5 files changed

+248
-0
lines changed

5 files changed

+248
-0
lines changed

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37952,6 +37952,17 @@ video {
3795237952
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));
3795337953
}
3795437954

37955+
.transform-gpu {
37956+
--transform-translate-x: 0;
37957+
--transform-translate-y: 0;
37958+
--transform-rotate: 0;
37959+
--transform-skew-x: 0;
37960+
--transform-skew-y: 0;
37961+
--transform-scale-x: 1;
37962+
--transform-scale-y: 1;
37963+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
37964+
}
37965+
3795537966
.transform-none {
3795637967
transform: none;
3795737968
}
@@ -79489,6 +79500,17 @@ video {
7948979500
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));
7949079501
}
7949179502

79503+
.sm\:transform-gpu {
79504+
--transform-translate-x: 0;
79505+
--transform-translate-y: 0;
79506+
--transform-rotate: 0;
79507+
--transform-skew-x: 0;
79508+
--transform-skew-y: 0;
79509+
--transform-scale-x: 1;
79510+
--transform-scale-y: 1;
79511+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
79512+
}
79513+
7949279514
.sm\:transform-none {
7949379515
transform: none;
7949479516
}
@@ -120996,6 +121018,17 @@ video {
120996121018
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));
120997121019
}
120998121020

121021+
.md\:transform-gpu {
121022+
--transform-translate-x: 0;
121023+
--transform-translate-y: 0;
121024+
--transform-rotate: 0;
121025+
--transform-skew-x: 0;
121026+
--transform-skew-y: 0;
121027+
--transform-scale-x: 1;
121028+
--transform-scale-y: 1;
121029+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
121030+
}
121031+
120999121032
.md\:transform-none {
121000121033
transform: none;
121001121034
}
@@ -162503,6 +162536,17 @@ video {
162503162536
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));
162504162537
}
162505162538

162539+
.lg\:transform-gpu {
162540+
--transform-translate-x: 0;
162541+
--transform-translate-y: 0;
162542+
--transform-rotate: 0;
162543+
--transform-skew-x: 0;
162544+
--transform-skew-y: 0;
162545+
--transform-scale-x: 1;
162546+
--transform-scale-y: 1;
162547+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
162548+
}
162549+
162506162550
.lg\:transform-none {
162507162551
transform: none;
162508162552
}
@@ -204010,6 +204054,17 @@ video {
204010204054
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));
204011204055
}
204012204056

204057+
.xl\:transform-gpu {
204058+
--transform-translate-x: 0;
204059+
--transform-translate-y: 0;
204060+
--transform-rotate: 0;
204061+
--transform-skew-x: 0;
204062+
--transform-skew-y: 0;
204063+
--transform-scale-x: 1;
204064+
--transform-scale-y: 1;
204065+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
204066+
}
204067+
204013204068
.xl\:transform-none {
204014204069
transform: none;
204015204070
}
@@ -245517,6 +245572,17 @@ video {
245517245572
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));
245518245573
}
245519245574

245575+
.\32xl\:transform-gpu {
245576+
--transform-translate-x: 0;
245577+
--transform-translate-y: 0;
245578+
--transform-rotate: 0;
245579+
--transform-skew-x: 0;
245580+
--transform-skew-y: 0;
245581+
--transform-scale-x: 1;
245582+
--transform-scale-y: 1;
245583+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
245584+
}
245585+
245520245586
.\32xl\:transform-none {
245521245587
transform: none;
245522245588
}

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15996,6 +15996,17 @@ video {
1599615996
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;
1599715997
}
1599815998

15999+
.transform-gpu {
16000+
--transform-translate-x: 0 !important;
16001+
--transform-translate-y: 0 !important;
16002+
--transform-rotate: 0 !important;
16003+
--transform-skew-x: 0 !important;
16004+
--transform-skew-y: 0 !important;
16005+
--transform-scale-x: 1 !important;
16006+
--transform-scale-y: 1 !important;
16007+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) 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;
16008+
}
16009+
1599916010
.transform-none {
1600016011
transform: none !important;
1600116012
}
@@ -33513,6 +33524,17 @@ video {
3351333524
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;
3351433525
}
3351533526

33527+
.sm\:transform-gpu {
33528+
--transform-translate-x: 0 !important;
33529+
--transform-translate-y: 0 !important;
33530+
--transform-rotate: 0 !important;
33531+
--transform-skew-x: 0 !important;
33532+
--transform-skew-y: 0 !important;
33533+
--transform-scale-x: 1 !important;
33534+
--transform-scale-y: 1 !important;
33535+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) 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;
33536+
}
33537+
3351633538
.sm\:transform-none {
3351733539
transform: none !important;
3351833540
}
@@ -51000,6 +51022,17 @@ video {
5100051022
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;
5100151023
}
5100251024

51025+
.md\:transform-gpu {
51026+
--transform-translate-x: 0 !important;
51027+
--transform-translate-y: 0 !important;
51028+
--transform-rotate: 0 !important;
51029+
--transform-skew-x: 0 !important;
51030+
--transform-skew-y: 0 !important;
51031+
--transform-scale-x: 1 !important;
51032+
--transform-scale-y: 1 !important;
51033+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) 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;
51034+
}
51035+
5100351036
.md\:transform-none {
5100451037
transform: none !important;
5100551038
}
@@ -68487,6 +68520,17 @@ video {
6848768520
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;
6848868521
}
6848968522

68523+
.lg\:transform-gpu {
68524+
--transform-translate-x: 0 !important;
68525+
--transform-translate-y: 0 !important;
68526+
--transform-rotate: 0 !important;
68527+
--transform-skew-x: 0 !important;
68528+
--transform-skew-y: 0 !important;
68529+
--transform-scale-x: 1 !important;
68530+
--transform-scale-y: 1 !important;
68531+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) 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;
68532+
}
68533+
6849068534
.lg\:transform-none {
6849168535
transform: none !important;
6849268536
}
@@ -85974,6 +86018,17 @@ video {
8597486018
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;
8597586019
}
8597686020

86021+
.xl\:transform-gpu {
86022+
--transform-translate-x: 0 !important;
86023+
--transform-translate-y: 0 !important;
86024+
--transform-rotate: 0 !important;
86025+
--transform-skew-x: 0 !important;
86026+
--transform-skew-y: 0 !important;
86027+
--transform-scale-x: 1 !important;
86028+
--transform-scale-y: 1 !important;
86029+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) 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;
86030+
}
86031+
8597786032
.xl\:transform-none {
8597886033
transform: none !important;
8597986034
}

‎__tests__/fixtures/tailwind-output-no-color-opacity.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14652,6 +14652,17 @@ video {
1465214652
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));
1465314653
}
1465414654

14655+
.transform-gpu {
14656+
--transform-translate-x: 0;
14657+
--transform-translate-y: 0;
14658+
--transform-rotate: 0;
14659+
--transform-skew-x: 0;
14660+
--transform-skew-y: 0;
14661+
--transform-scale-x: 1;
14662+
--transform-scale-y: 1;
14663+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
14664+
}
14665+
1465514666
.transform-none {
1465614667
transform: none;
1465714668
}
@@ -30825,6 +30836,17 @@ video {
3082530836
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));
3082630837
}
3082730838

30839+
.sm\:transform-gpu {
30840+
--transform-translate-x: 0;
30841+
--transform-translate-y: 0;
30842+
--transform-rotate: 0;
30843+
--transform-skew-x: 0;
30844+
--transform-skew-y: 0;
30845+
--transform-scale-x: 1;
30846+
--transform-scale-y: 1;
30847+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
30848+
}
30849+
3082830850
.sm\:transform-none {
3082930851
transform: none;
3083030852
}
@@ -46968,6 +46990,17 @@ video {
4696846990
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));
4696946991
}
4697046992

46993+
.md\:transform-gpu {
46994+
--transform-translate-x: 0;
46995+
--transform-translate-y: 0;
46996+
--transform-rotate: 0;
46997+
--transform-skew-x: 0;
46998+
--transform-skew-y: 0;
46999+
--transform-scale-x: 1;
47000+
--transform-scale-y: 1;
47001+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
47002+
}
47003+
4697147004
.md\:transform-none {
4697247005
transform: none;
4697347006
}
@@ -63111,6 +63144,17 @@ video {
6311163144
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));
6311263145
}
6311363146

63147+
.lg\:transform-gpu {
63148+
--transform-translate-x: 0;
63149+
--transform-translate-y: 0;
63150+
--transform-rotate: 0;
63151+
--transform-skew-x: 0;
63152+
--transform-skew-y: 0;
63153+
--transform-scale-x: 1;
63154+
--transform-scale-y: 1;
63155+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
63156+
}
63157+
6311463158
.lg\:transform-none {
6311563159
transform: none;
6311663160
}
@@ -79254,6 +79298,17 @@ video {
7925479298
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));
7925579299
}
7925679300

79301+
.xl\:transform-gpu {
79302+
--transform-translate-x: 0;
79303+
--transform-translate-y: 0;
79304+
--transform-rotate: 0;
79305+
--transform-skew-x: 0;
79306+
--transform-skew-y: 0;
79307+
--transform-scale-x: 1;
79308+
--transform-scale-y: 1;
79309+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
79310+
}
79311+
7925779312
.xl\:transform-none {
7925879313
transform: none;
7925979314
}

‎__tests__/fixtures/tailwind-output.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15996,6 +15996,17 @@ video {
1599615996
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));
1599715997
}
1599815998

15999+
.transform-gpu {
16000+
--transform-translate-x: 0;
16001+
--transform-translate-y: 0;
16002+
--transform-rotate: 0;
16003+
--transform-skew-x: 0;
16004+
--transform-skew-y: 0;
16005+
--transform-scale-x: 1;
16006+
--transform-scale-y: 1;
16007+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
16008+
}
16009+
1599916010
.transform-none {
1600016011
transform: none;
1600116012
}
@@ -33513,6 +33524,17 @@ video {
3351333524
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));
3351433525
}
3351533526

33527+
.sm\:transform-gpu {
33528+
--transform-translate-x: 0;
33529+
--transform-translate-y: 0;
33530+
--transform-rotate: 0;
33531+
--transform-skew-x: 0;
33532+
--transform-skew-y: 0;
33533+
--transform-scale-x: 1;
33534+
--transform-scale-y: 1;
33535+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
33536+
}
33537+
3351633538
.sm\:transform-none {
3351733539
transform: none;
3351833540
}
@@ -51000,6 +51022,17 @@ video {
5100051022
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));
5100151023
}
5100251024

51025+
.md\:transform-gpu {
51026+
--transform-translate-x: 0;
51027+
--transform-translate-y: 0;
51028+
--transform-rotate: 0;
51029+
--transform-skew-x: 0;
51030+
--transform-skew-y: 0;
51031+
--transform-scale-x: 1;
51032+
--transform-scale-y: 1;
51033+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
51034+
}
51035+
5100351036
.md\:transform-none {
5100451037
transform: none;
5100551038
}
@@ -68487,6 +68520,17 @@ video {
6848768520
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));
6848868521
}
6848968522

68523+
.lg\:transform-gpu {
68524+
--transform-translate-x: 0;
68525+
--transform-translate-y: 0;
68526+
--transform-rotate: 0;
68527+
--transform-skew-x: 0;
68528+
--transform-skew-y: 0;
68529+
--transform-scale-x: 1;
68530+
--transform-scale-y: 1;
68531+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
68532+
}
68533+
6849068534
.lg\:transform-none {
6849168535
transform: none;
6849268536
}
@@ -85974,6 +86018,17 @@ video {
8597486018
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));
8597586019
}
8597686020

86021+
.xl\:transform-gpu {
86022+
--transform-translate-x: 0;
86023+
--transform-translate-y: 0;
86024+
--transform-rotate: 0;
86025+
--transform-skew-x: 0;
86026+
--transform-skew-y: 0;
86027+
--transform-scale-x: 1;
86028+
--transform-scale-y: 1;
86029+
transform: translate3d(var(--transform-translate-x), var(--transform-translate-y), 0) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
86030+
}
86031+
8597786032
.xl\:transform-none {
8597886033
transform: none;
8597986034
}

0 commit comments

Comments
 (0)