wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Update transform order to scale, skew, rotate, translate

Browse source
This commit is contained in:
Adam Wathan 2020-01-03 08:38:29 -05:00
parent 6378808a42
commit a33c1a68e1
3 changed files with 34 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

30
__tests__/fixtures/tailwind-output-important.css
View file

@ -8788,12 +8788,12 @@ video {
.transform {
--transform-translate-x: 0 !important;
--transform-translate-y: 0 !important;
--transform-scale-x: 1 !important;
--transform-scale-y: 1 !important;
--transform-rotate: 0 !important;
--transform-skew-x: 0 !important;
--transform-skew-y: 0 !important;
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;
--transform-scale-x: 1 !important;
--transform-scale-y: 1 !important;
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-none {
@ -18483,12 +18483,12 @@ video {
.sm\:transform {
--transform-translate-x: 0 !important;
--transform-translate-y: 0 !important;
--transform-scale-x: 1 !important;
--transform-scale-y: 1 !important;
--transform-rotate: 0 !important;
--transform-skew-x: 0 !important;
--transform-skew-y: 0 !important;
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;
--transform-scale-x: 1 !important;
--transform-scale-y: 1 !important;
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-none {
@ -28179,12 +28179,12 @@ video {
.md\:transform {
--transform-translate-x: 0 !important;
--transform-translate-y: 0 !important;
--transform-scale-x: 1 !important;
--transform-scale-y: 1 !important;
--transform-rotate: 0 !important;
--transform-skew-x: 0 !important;
--transform-skew-y: 0 !important;
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;
--transform-scale-x: 1 !important;
--transform-scale-y: 1 !important;
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-none {
@ -37875,12 +37875,12 @@ video {
.lg\:transform {
--transform-translate-x: 0 !important;
--transform-translate-y: 0 !important;
--transform-scale-x: 1 !important;
--transform-scale-y: 1 !important;
--transform-rotate: 0 !important;
--transform-skew-x: 0 !important;
--transform-skew-y: 0 !important;
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;
--transform-scale-x: 1 !important;
--transform-scale-y: 1 !important;
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-none {
@ -47571,12 +47571,12 @@ video {
.xl\:transform {
--transform-translate-x: 0 !important;
--transform-translate-y: 0 !important;
--transform-scale-x: 1 !important;
--transform-scale-y: 1 !important;
--transform-rotate: 0 !important;
--transform-skew-x: 0 !important;
--transform-skew-y: 0 !important;
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;
--transform-scale-x: 1 !important;
--transform-scale-y: 1 !important;
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-none {

30
__tests__/fixtures/tailwind-output.css
View file

@ -8788,12 +8788,12 @@ video {
.transform {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
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));
--transform-scale-x: 1;
--transform-scale-y: 1;
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-none {
@ -18483,12 +18483,12 @@ video {
.sm\:transform {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
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));
--transform-scale-x: 1;
--transform-scale-y: 1;
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-none {
@ -28179,12 +28179,12 @@ video {
.md\:transform {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
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));
--transform-scale-x: 1;
--transform-scale-y: 1;
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-none {
@ -37875,12 +37875,12 @@ video {
.lg\:transform {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
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));
--transform-scale-x: 1;
--transform-scale-y: 1;
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-none {
@ -47571,12 +47571,12 @@ video {
.xl\:transform {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
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));
--transform-scale-x: 1;
--transform-scale-y: 1;
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-none {

8
src/plugins/transform.js
View file

@ -5,19 +5,19 @@ export default function() {
'.transform': {
'--transform-translate-x': '0',
'--transform-translate-y': '0',
'--transform-scale-x': '1',
'--transform-scale-y': '1',
'--transform-rotate': '0',
'--transform-skew-x': '0',
'--transform-skew-y': '0',
'--transform-scale-x': '1',
'--transform-scale-y': '1',
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))',
'scaleX(var(--transform-scale-x))',
'scaleY(var(--transform-scale-y))',
].join(' '),
},
'.transform-none': { transform: 'none' },