archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'benface-skew'

Browse Source
This commit is contained in:
Adam Wathan 2020-01-03 08:38:40 -05:00
commit 8fc4447f5e
6 changed files with 82 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
__tests__/fixtures/tailwind-output-important.css
View File

@ -8786,12 +8786,14 @@ video {
}
.transform {
--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-rotate: 0 !important;
--transform-skew-x: 0 !important;
--transform-skew-y: 0 !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 {
@ -18479,12 +18481,14 @@ video {
}
.sm\:transform {
--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-rotate: 0 !important;
--transform-skew-x: 0 !important;
--transform-skew-y: 0 !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 {
@ -28173,12 +28177,14 @@ video {
}
.md\:transform {
--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-rotate: 0 !important;
--transform-skew-x: 0 !important;
--transform-skew-y: 0 !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 {
@ -37867,12 +37873,14 @@ video {
}
.lg\:transform {
--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-rotate: 0 !important;
--transform-skew-x: 0 !important;
--transform-skew-y: 0 !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 {
@ -47561,12 +47569,14 @@ video {
}
.xl\:transform {
--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-rotate: 0 !important;
--transform-skew-x: 0 !important;
--transform-skew-y: 0 !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 {

50
__tests__/fixtures/tailwind-output.css
View File

@ -8786,12 +8786,14 @@ video {
}
.transform {
--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-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)) 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 {
@ -18479,12 +18481,14 @@ video {
}
.sm\:transform {
--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-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)) 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 {
@ -28173,12 +28177,14 @@ video {
}
.md\:transform {
--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-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)) 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 {
@ -37867,12 +37873,14 @@ video {
}
.lg\:transform {
--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-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)) 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 {
@ -47561,12 +47569,14 @@ video {
}
.xl\:transform {
--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-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)) 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 {

2
src/corePlugins.js
View File

@ -74,6 +74,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 gap from './plugins/gap'
import columnGap from './plugins/columnGap'
import rowGap from './plugins/rowGap'
@ -179,5 +180,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']],
])
}

16
src/plugins/transform.js
View File

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

2
stubs/defaultConfig.stub.js
View File

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