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

Add skew plugin + change order of transform functions (apply translate last)

Browse source
This commit is contained in:
Benoît Rouleau 2020-01-02 17:26:38 -05:00
parent 63b5cc28f6
commit 12cd6e600d
6 changed files with 70 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8443,12 +8443,14 @@ 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-translate-x: 0 !important;
--transform-translate-y: 0 !important;
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !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-none {
@ -17793,12 +17795,14 @@ 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-translate-x: 0 !important;
--transform-translate-y: 0 !important;
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !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;
}
.sm\:transform-none {
@ -27144,12 +27148,14 @@ 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-translate-x: 0 !important;
--transform-translate-y: 0 !important;
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !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;
}
.md\:transform-none {
@ -36495,12 +36501,14 @@ 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-translate-x: 0 !important;
--transform-translate-y: 0 !important;
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !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;
}
.lg\:transform-none {
@ -45846,12 +45854,14 @@ 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-translate-x: 0 !important;
--transform-translate-y: 0 !important;
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !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;
}
.xl\:transform-none {

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

@ -8443,12 +8443,14 @@ video {
}
.transform {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
--transform-rotate: 0;
--transform-translate-x: 0;
--transform-translate-y: 0;
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
--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-none {
@ -17793,12 +17795,14 @@ video {
}
.sm\:transform {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
--transform-rotate: 0;
--transform-translate-x: 0;
--transform-translate-y: 0;
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
--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));
}
.sm\:transform-none {
@ -27144,12 +27148,14 @@ video {
}
.md\:transform {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
--transform-rotate: 0;
--transform-translate-x: 0;
--transform-translate-y: 0;
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
--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));
}
.md\:transform-none {
@ -36495,12 +36501,14 @@ video {
}
.lg\:transform {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
--transform-rotate: 0;
--transform-translate-x: 0;
--transform-translate-y: 0;
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
--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));
}
.lg\:transform-none {
@ -45846,12 +45854,14 @@ video {
}
.xl\:transform {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-scale-x: 1;
--transform-scale-y: 1;
--transform-rotate: 0;
--transform-translate-x: 0;
--transform-translate-y: 0;
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
--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));
}
.xl\:transform-none {

2
src/corePlugins.js
View file

@ -73,6 +73,7 @@ import transformOrigin from './plugins/transformOrigin'
import scale from './plugins/scale'
import rotate from './plugins/rotate'
import translate from './plugins/translate'
import skew from './plugins/skew'
import configurePlugins from './util/configurePlugins'
@ -153,5 +154,6 @@ export default function({ corePlugins: corePluginConfig }) {
scale,
rotate,
translate,
skew,
})
}

8
src/plugins/skew.js Normal file
View file

@ -0,0 +1,8 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('skew', [
['skew-x', ['--transform-skew-x']],
['skew-y', ['--transform-skew-y']],
])
}

12
src/plugins/transform.js
View file

@ -3,17 +3,21 @@ export default function() {
addUtilities(
{
'.transform': {
'--transform-translate-x': '0',
'--transform-translate-y': '0',
'--transform-scale-x': '1',
'--transform-scale-y': '1',
'--transform-rotate': '0',
'--transform-translate-x': '0',
'--transform-translate-y': '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))',
'translateX(var(--transform-translate-x))',
'translateY(var(--transform-translate-y))',
'skewX(var(--transform-skew-x))',
'skewY(var(--transform-skew-y))',
].join(' '),
},
'.transform-none': { transform: 'none' },

2
stubs/defaultConfig.stub.js
View file

@ -450,6 +450,7 @@ module.exports = {
'1/2': '50%',
full: '100%',
}),
skew: {},
},
variants: {
accessibility: ['responsive', 'focus'],
@ -525,6 +526,7 @@ module.exports = {
scale: ['responsive', 'hover', 'focus'],
rotate: ['responsive', 'hover', 'focus'],
translate: ['responsive', 'hover', 'focus'],
skew: ['responsive', 'hover', 'focus'],
},
corePlugins: {},
plugins: [],