Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use translate3d() #1380

Merged
merged 7 commits into from Oct 18, 2020
Merged

Use translate3d() #1380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
868c732
use translate3d
slavanossar Feb 11, 2020
3b1e324
add translate3d to test fixtures
slavanossar Feb 11, 2020
5b6b433
create `transform-gpu` utility
slavanossar Jul 9, 2020
c2127ad
merge in test from master
slavanossar Jul 9, 2020
1dc3ca3
Merge branch 'master' into use-translate3d
slavanossar Oct 18, 2020
7c09a65
update tests
slavanossar Oct 18, 2020
810c9fc
add responsive variants to tests
slavanossar Oct 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
66 changes: 66 additions & 0 deletions __tests__/fixtures/tailwind-output-flagged.css
View file
Open in desktop
Expand Up @@ -37952,6 +37952,17 @@ video {
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));
}

.transform-gpu {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
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));
}

.transform-none {
transform: none;
}
Expand Down Expand Up @@ -79489,6 +79500,17 @@ video {
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));
}

.sm\:transform-gpu {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
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));
}

.sm\:transform-none {
transform: none;
}
Expand Down Expand Up @@ -120996,6 +121018,17 @@ video {
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));
}

.md\:transform-gpu {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
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));
}

.md\:transform-none {
transform: none;
}
Expand Down Expand Up @@ -162503,6 +162536,17 @@ video {
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));
}

.lg\:transform-gpu {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
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));
}

.lg\:transform-none {
transform: none;
}
Expand Down Expand Up @@ -204010,6 +204054,17 @@ video {
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));
}

.xl\:transform-gpu {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
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));
}

.xl\:transform-none {
transform: none;
}
Expand Down Expand Up @@ -245517,6 +245572,17 @@ video {
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));
}

.\32xl\:transform-gpu {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
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));
}

.\32xl\:transform-none {
transform: none;
}
Expand Down
55 changes: 55 additions & 0 deletions __tests__/fixtures/tailwind-output-important.css
View file
Open in desktop
Expand Up @@ -15996,6 +15996,17 @@ video {
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;
}

.transform-gpu {
--transform-translate-x: 0 !important;
--transform-translate-y: 0 !important;
--transform-rotate: 0 !important;
--transform-skew-x: 0 !important;
--transform-skew-y: 0 !important;
--transform-scale-x: 1 !important;
--transform-scale-y: 1 !important;
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;
}

.transform-none {
transform: none !important;
}
Expand Down Expand Up @@ -33513,6 +33524,17 @@ video {
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;
}

.sm\:transform-gpu {
--transform-translate-x: 0 !important;
--transform-translate-y: 0 !important;
--transform-rotate: 0 !important;
--transform-skew-x: 0 !important;
--transform-skew-y: 0 !important;
--transform-scale-x: 1 !important;
--transform-scale-y: 1 !important;
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;
}

.sm\:transform-none {
transform: none !important;
}
Expand Down Expand Up @@ -51000,6 +51022,17 @@ video {
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;
}

.md\:transform-gpu {
--transform-translate-x: 0 !important;
--transform-translate-y: 0 !important;
--transform-rotate: 0 !important;
--transform-skew-x: 0 !important;
--transform-skew-y: 0 !important;
--transform-scale-x: 1 !important;
--transform-scale-y: 1 !important;
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;
}

.md\:transform-none {
transform: none !important;
}
Expand Down Expand Up @@ -68487,6 +68520,17 @@ video {
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;
}

.lg\:transform-gpu {
--transform-translate-x: 0 !important;
--transform-translate-y: 0 !important;
--transform-rotate: 0 !important;
--transform-skew-x: 0 !important;
--transform-skew-y: 0 !important;
--transform-scale-x: 1 !important;
--transform-scale-y: 1 !important;
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;
}

.lg\:transform-none {
transform: none !important;
}
Expand Down Expand Up @@ -85974,6 +86018,17 @@ video {
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;
}

.xl\:transform-gpu {
--transform-translate-x: 0 !important;
--transform-translate-y: 0 !important;
--transform-rotate: 0 !important;
--transform-skew-x: 0 !important;
--transform-skew-y: 0 !important;
--transform-scale-x: 1 !important;
--transform-scale-y: 1 !important;
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;
}

.xl\:transform-none {
transform: none !important;
}
Expand Down
55 changes: 55 additions & 0 deletions __tests__/fixtures/tailwind-output-no-color-opacity.css
View file
Open in desktop
Expand Up @@ -14652,6 +14652,17 @@ video {
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));
}

.transform-gpu {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
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));
}

.transform-none {
transform: none;
}
Expand Down Expand Up @@ -30825,6 +30836,17 @@ video {
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));
}

.sm\:transform-gpu {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
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));
}

.sm\:transform-none {
transform: none;
}
Expand Down Expand Up @@ -46968,6 +46990,17 @@ video {
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));
}

.md\:transform-gpu {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
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));
}

.md\:transform-none {
transform: none;
}
Expand Down Expand Up @@ -63111,6 +63144,17 @@ video {
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));
}

.lg\:transform-gpu {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
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));
}

.lg\:transform-none {
transform: none;
}
Expand Down Expand Up @@ -79254,6 +79298,17 @@ video {
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));
}

.xl\:transform-gpu {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
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));
}

.xl\:transform-none {
transform: none;
}
Expand Down
55 changes: 55 additions & 0 deletions __tests__/fixtures/tailwind-output.css
View file
Open in desktop
Expand Up @@ -15996,6 +15996,17 @@ video {
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));
}

.transform-gpu {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
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));
}

.transform-none {
transform: none;
}
Expand Down Expand Up @@ -33513,6 +33524,17 @@ video {
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));
}

.sm\:transform-gpu {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
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));
}

.sm\:transform-none {
transform: none;
}
Expand Down Expand Up @@ -51000,6 +51022,17 @@ video {
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));
}

.md\:transform-gpu {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
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));
}

.md\:transform-none {
transform: none;
}
Expand Down Expand Up @@ -68487,6 +68520,17 @@ video {
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));
}

.lg\:transform-gpu {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
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));
}

.lg\:transform-none {
transform: none;
}
Expand Down Expand Up @@ -85974,6 +86018,17 @@ video {
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));
}

.xl\:transform-gpu {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
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));
}

.xl\:transform-none {
transform: none;
}
Expand Down