From 12cd6e600dc52ce9e3d165091b019ab3c7d62274 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benoi=CC=82t=20Rouleau?= Date: Thu, 2 Jan 2020 17:26:38 -0500 Subject: [PATCH 1/2] Add skew plugin + change order of transform functions (apply translate last) --- .../fixtures/tailwind-output-important.css | 40 ++++++++++++------- __tests__/fixtures/tailwind-output.css | 40 ++++++++++++------- src/corePlugins.js | 2 + src/plugins/skew.js | 8 ++++ src/plugins/transform.js | 12 ++++-- stubs/defaultConfig.stub.js | 2 + 6 files changed, 70 insertions(+), 34 deletions(-) create mode 100644 src/plugins/skew.js diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 5e2725b64..70e500103 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -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 { diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index f3066a5de..410d2403a 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -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 { diff --git a/src/corePlugins.js b/src/corePlugins.js index 36da4ac31..cc9014455 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -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, }) } diff --git a/src/plugins/skew.js b/src/plugins/skew.js new file mode 100644 index 000000000..803aa57b3 --- /dev/null +++ b/src/plugins/skew.js @@ -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']], + ]) +} diff --git a/src/plugins/transform.js b/src/plugins/transform.js index 3ac50276b..bb6194814 100644 --- a/src/plugins/transform.js +++ b/src/plugins/transform.js @@ -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' }, diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 9fb014a45..f8447e852 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -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: [], From a33c1a68e15124efe109242749dddd43a83285e7 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 3 Jan 2020 08:38:29 -0500 Subject: [PATCH 2/2] Update transform order to scale, skew, rotate, translate --- .../fixtures/tailwind-output-important.css | 30 +++++++++---------- __tests__/fixtures/tailwind-output.css | 30 +++++++++---------- src/plugins/transform.js | 8 ++--- 3 files changed, 34 insertions(+), 34 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 43917dc86..2eeb44287 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -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 { diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 4561a5af8..c152840bb 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -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 { diff --git a/src/plugins/transform.js b/src/plugins/transform.js index bb6194814..10e80aa62 100644 --- a/src/plugins/transform.js +++ b/src/plugins/transform.js @@ -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' },