From a33c1a68e15124efe109242749dddd43a83285e7 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 3 Jan 2020 08:38:29 -0500
Subject: [PATCH] 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' },