Add skew plugin + change order of transform functions (apply translat…

…e last)
pspeter3 · Jan 2, 2020 · 12cd6e6 · 12cd6e6
1 parent 63b5cc2
commit 12cd6e6
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: [],