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

Reset default transform variables every time .transform is applied

Browse source
This commit is contained in:
Adam Wathan 2019-12-23 19:30:02 -05:00
parent 9fbbaff400
commit 9b78a02ccf
3 changed files with 58 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8338,7 +8338,11 @@ video {
}
.transform {
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) !important;
--transform-scale: 1 !important;
--transform-rotate: 0 !important;
--transform-translate-x: 0 !important;
--transform-translate-y: 0 !important;
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
}
.transform-none {
@ -17309,7 +17313,11 @@ video {
}
.sm\:transform {
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) !important;
--transform-scale: 1 !important;
--transform-rotate: 0 !important;
--transform-translate-x: 0 !important;
--transform-translate-y: 0 !important;
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
}
.sm\:transform-none {
@ -26281,7 +26289,11 @@ video {
}
.md\:transform {
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) !important;
--transform-scale: 1 !important;
--transform-rotate: 0 !important;
--transform-translate-x: 0 !important;
--transform-translate-y: 0 !important;
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
}
.md\:transform-none {
@ -35253,7 +35265,11 @@ video {
}
.lg\:transform {
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) !important;
--transform-scale: 1 !important;
--transform-rotate: 0 !important;
--transform-translate-x: 0 !important;
--transform-translate-y: 0 !important;
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
}
.lg\:transform-none {
@ -44225,7 +44241,11 @@ video {
}
.xl\:transform {
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) !important;
--transform-scale: 1 !important;
--transform-rotate: 0 !important;
--transform-translate-x: 0 !important;
--transform-translate-y: 0 !important;
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
}
.xl\:transform-none {

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

@ -8338,7 +8338,11 @@ video {
}
.transform {
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0));
--transform-scale: 1;
--transform-rotate: 0;
--transform-translate-x: 0;
--transform-translate-y: 0;
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
}
.transform-none {
@ -17309,7 +17313,11 @@ video {
}
.sm\:transform {
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0));
--transform-scale: 1;
--transform-rotate: 0;
--transform-translate-x: 0;
--transform-translate-y: 0;
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
}
.sm\:transform-none {
@ -26281,7 +26289,11 @@ video {
}
.md\:transform {
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0));
--transform-scale: 1;
--transform-rotate: 0;
--transform-translate-x: 0;
--transform-translate-y: 0;
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
}
.md\:transform-none {
@ -35253,7 +35265,11 @@ video {
}
.lg\:transform {
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0));
--transform-scale: 1;
--transform-rotate: 0;
--transform-translate-x: 0;
--transform-translate-y: 0;
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
}
.lg\:transform-none {
@ -44225,7 +44241,11 @@ video {
}
.xl\:transform {
transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0));
--transform-scale: 1;
--transform-rotate: 0;
--transform-translate-x: 0;
--transform-translate-y: 0;
transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
}
.xl\:transform-none {

12
src/plugins/transform.js
View file

@ -3,11 +3,15 @@ export default function() {
addUtilities(
{
'.transform': {
'--transform-scale': '1',
'--transform-rotate': '0',
'--transform-translate-x': '0',
'--transform-translate-y': '0',
transform: [
'scale(var(--transform-scale, 1))',
'rotate(var(--transform-rotate, 0))',
'translateX(var(--transform-translate-x, 0))',
'translateY(var(--transform-translate-y, 0))',
'scale(var(--transform-scale))',
'rotate(var(--transform-rotate))',
'translateX(var(--transform-translate-x))',
'translateY(var(--transform-translate-y))',
].join(' '),
},
'.transform-none': { transform: 'none' },