Support negative scale values

tailwindlabs · Dec 6, 2021 · c48e629 · c48e629
1 parent a834b20
commit c48e629
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/src/corePlugins.js b/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({

diff --git a/tests/basic-usage.test.css b/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);
 }

diff --git a/tests/basic-usage.test.html b/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>