Support negative scale values

Author: adamwathan

src/corePlugins.js

@@ -503,27 +503,31 @@ export let corePlugins = {
     ],
     { supportsNegativeValues: true }
   ),
-  scale: createUtilityPlugin('scale', [
+  scale: createUtilityPlugin(
+    'scale',
     [
-      'scale',
       [
-        ['@defaults transform', {}],
-        '--tw-scale-x',
-        '--tw-scale-y',
-        ['transform', 'var(--tw-transform)'],
-      ],
-    ],
-    [
-      [
-        'scale-x',
-        [['@defaults transform', {}], '--tw-scale-x', ['transform', 'var(--tw-transform)']],
+        'scale',
+        [
+          ['@defaults transform', {}],
+          '--tw-scale-x',
+          '--tw-scale-y',
+          ['transform', 'var(--tw-transform)'],
+        ],
       ],
       [
-        'scale-y',
-        [['@defaults transform', {}], '--tw-scale-y', ['transform', 'var(--tw-transform)']],
+        [
+          'scale-x',
+          [['@defaults transform', {}], '--tw-scale-x', ['transform', 'var(--tw-transform)']],
+        ],
+        [
+          'scale-y',
+          [['@defaults transform', {}], '--tw-scale-y', ['transform', 'var(--tw-transform)']],
+        ],
       ],
     ],
-  ]),
+    { supportsNegativeValues: true }
+  ),
 
   transform: ({ addBase, addUtilities }) => {
     addBase({

tests/basic-usage.test.css

@@ -6,6 +6,7 @@
 .skew-y-12,
 .skew-x-12,
 .scale-95,
+.-scale-x-100,
 .transform {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
@@ -359,6 +360,10 @@
   --tw-scale-y: 0.95;
   transform: var(--tw-transform);
 }
+.-scale-x-100 {
+  --tw-scale-x: -1;
+  transform: var(--tw-transform);
+}
 .transform {
   transform: var(--tw-transform);
 }

tests/basic-usage.test.html

@@ -150,7 +150,7 @@
       "
     ></div>
     <div class="rotate-3"></div>
-    <div class="scale-95"></div>
+    <div class="scale-95 -scale-x-100"></div>
     <div class="skew-y-12 skew-x-12"></div>
     <div class="space-x-4 space-y-3 space-x-reverse space-y-reverse"></div>
     <div class="stroke-current"></div>