From 5f05677edf1908807c382aaba18b1450f2ae0b07 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 23 Apr 2020 07:58:18 -0400
Subject: [PATCH] Fix missing unit in calc bug in space plugin

---
 .../fixtures/tailwind-output-important.css    | 40 +++++++++----------
 __tests__/fixtures/tailwind-output.css        | 40 +++++++++----------
 __tests__/plugins/space.test.js               | 11 +++++
 src/plugins/space.js                          |  8 ++--
 4 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 4368380aa..5dccc6853 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -608,14 +608,14 @@ video {
 
 .space-y-0 > :not(template) ~ :not(template) {
   --space-y-reverse: 0 !important;
-  margin-top: calc(0 * calc(1 - var(--space-y-reverse))) !important;
-  margin-bottom: calc(0 * var(--space-y-reverse)) !important;
+  margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
+  margin-bottom: calc(0px * var(--space-y-reverse)) !important;
 }
 
 .space-x-0 > :not(template) ~ :not(template) {
   --space-x-reverse: 0 !important;
-  margin-right: calc(0 * var(--space-x-reverse)) !important;
-  margin-left: calc(0 * calc(1 - var(--space-x-reverse))) !important;
+  margin-right: calc(0px * var(--space-x-reverse)) !important;
+  margin-left: calc(0px * calc(1 - var(--space-x-reverse))) !important;
 }
 
 .space-y-1 > :not(template) ~ :not(template) {
@@ -11897,14 +11897,14 @@ video {
 @media (min-width: 640px) {
   .sm\:space-y-0 > :not(template) ~ :not(template) {
     --space-y-reverse: 0 !important;
-    margin-top: calc(0 * calc(1 - var(--space-y-reverse))) !important;
-    margin-bottom: calc(0 * var(--space-y-reverse)) !important;
+    margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
+    margin-bottom: calc(0px * var(--space-y-reverse)) !important;
   }
 
   .sm\:space-x-0 > :not(template) ~ :not(template) {
     --space-x-reverse: 0 !important;
-    margin-right: calc(0 * var(--space-x-reverse)) !important;
-    margin-left: calc(0 * calc(1 - var(--space-x-reverse))) !important;
+    margin-right: calc(0px * var(--space-x-reverse)) !important;
+    margin-left: calc(0px * calc(1 - var(--space-x-reverse))) !important;
   }
 
   .sm\:space-y-1 > :not(template) ~ :not(template) {
@@ -23187,14 +23187,14 @@ video {
 @media (min-width: 768px) {
   .md\:space-y-0 > :not(template) ~ :not(template) {
     --space-y-reverse: 0 !important;
-    margin-top: calc(0 * calc(1 - var(--space-y-reverse))) !important;
-    margin-bottom: calc(0 * var(--space-y-reverse)) !important;
+    margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
+    margin-bottom: calc(0px * var(--space-y-reverse)) !important;
   }
 
   .md\:space-x-0 > :not(template) ~ :not(template) {
     --space-x-reverse: 0 !important;
-    margin-right: calc(0 * var(--space-x-reverse)) !important;
-    margin-left: calc(0 * calc(1 - var(--space-x-reverse))) !important;
+    margin-right: calc(0px * var(--space-x-reverse)) !important;
+    margin-left: calc(0px * calc(1 - var(--space-x-reverse))) !important;
   }
 
   .md\:space-y-1 > :not(template) ~ :not(template) {
@@ -34477,14 +34477,14 @@ video {
 @media (min-width: 1024px) {
   .lg\:space-y-0 > :not(template) ~ :not(template) {
     --space-y-reverse: 0 !important;
-    margin-top: calc(0 * calc(1 - var(--space-y-reverse))) !important;
-    margin-bottom: calc(0 * var(--space-y-reverse)) !important;
+    margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
+    margin-bottom: calc(0px * var(--space-y-reverse)) !important;
   }
 
   .lg\:space-x-0 > :not(template) ~ :not(template) {
     --space-x-reverse: 0 !important;
-    margin-right: calc(0 * var(--space-x-reverse)) !important;
-    margin-left: calc(0 * calc(1 - var(--space-x-reverse))) !important;
+    margin-right: calc(0px * var(--space-x-reverse)) !important;
+    margin-left: calc(0px * calc(1 - var(--space-x-reverse))) !important;
   }
 
   .lg\:space-y-1 > :not(template) ~ :not(template) {
@@ -45767,14 +45767,14 @@ video {
 @media (min-width: 1280px) {
   .xl\:space-y-0 > :not(template) ~ :not(template) {
     --space-y-reverse: 0 !important;
-    margin-top: calc(0 * calc(1 - var(--space-y-reverse))) !important;
-    margin-bottom: calc(0 * var(--space-y-reverse)) !important;
+    margin-top: calc(0px * calc(1 - var(--space-y-reverse))) !important;
+    margin-bottom: calc(0px * var(--space-y-reverse)) !important;
   }
 
   .xl\:space-x-0 > :not(template) ~ :not(template) {
     --space-x-reverse: 0 !important;
-    margin-right: calc(0 * var(--space-x-reverse)) !important;
-    margin-left: calc(0 * calc(1 - var(--space-x-reverse))) !important;
+    margin-right: calc(0px * var(--space-x-reverse)) !important;
+    margin-left: calc(0px * calc(1 - var(--space-x-reverse))) !important;
   }
 
   .xl\:space-y-1 > :not(template) ~ :not(template) {
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index 58fb7bcb1..78aa6ce8c 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -608,14 +608,14 @@ video {
 
 .space-y-0 > :not(template) ~ :not(template) {
   --space-y-reverse: 0;
-  margin-top: calc(0 * calc(1 - var(--space-y-reverse)));
-  margin-bottom: calc(0 * var(--space-y-reverse));
+  margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
+  margin-bottom: calc(0px * var(--space-y-reverse));
 }
 
 .space-x-0 > :not(template) ~ :not(template) {
   --space-x-reverse: 0;
-  margin-right: calc(0 * var(--space-x-reverse));
-  margin-left: calc(0 * calc(1 - var(--space-x-reverse)));
+  margin-right: calc(0px * var(--space-x-reverse));
+  margin-left: calc(0px * calc(1 - var(--space-x-reverse)));
 }
 
 .space-y-1 > :not(template) ~ :not(template) {
@@ -11897,14 +11897,14 @@ video {
 @media (min-width: 640px) {
   .sm\:space-y-0 > :not(template) ~ :not(template) {
     --space-y-reverse: 0;
-    margin-top: calc(0 * calc(1 - var(--space-y-reverse)));
-    margin-bottom: calc(0 * var(--space-y-reverse));
+    margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
+    margin-bottom: calc(0px * var(--space-y-reverse));
   }
 
   .sm\:space-x-0 > :not(template) ~ :not(template) {
     --space-x-reverse: 0;
-    margin-right: calc(0 * var(--space-x-reverse));
-    margin-left: calc(0 * calc(1 - var(--space-x-reverse)));
+    margin-right: calc(0px * var(--space-x-reverse));
+    margin-left: calc(0px * calc(1 - var(--space-x-reverse)));
   }
 
   .sm\:space-y-1 > :not(template) ~ :not(template) {
@@ -23187,14 +23187,14 @@ video {
 @media (min-width: 768px) {
   .md\:space-y-0 > :not(template) ~ :not(template) {
     --space-y-reverse: 0;
-    margin-top: calc(0 * calc(1 - var(--space-y-reverse)));
-    margin-bottom: calc(0 * var(--space-y-reverse));
+    margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
+    margin-bottom: calc(0px * var(--space-y-reverse));
   }
 
   .md\:space-x-0 > :not(template) ~ :not(template) {
     --space-x-reverse: 0;
-    margin-right: calc(0 * var(--space-x-reverse));
-    margin-left: calc(0 * calc(1 - var(--space-x-reverse)));
+    margin-right: calc(0px * var(--space-x-reverse));
+    margin-left: calc(0px * calc(1 - var(--space-x-reverse)));
   }
 
   .md\:space-y-1 > :not(template) ~ :not(template) {
@@ -34477,14 +34477,14 @@ video {
 @media (min-width: 1024px) {
   .lg\:space-y-0 > :not(template) ~ :not(template) {
     --space-y-reverse: 0;
-    margin-top: calc(0 * calc(1 - var(--space-y-reverse)));
-    margin-bottom: calc(0 * var(--space-y-reverse));
+    margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
+    margin-bottom: calc(0px * var(--space-y-reverse));
   }
 
   .lg\:space-x-0 > :not(template) ~ :not(template) {
     --space-x-reverse: 0;
-    margin-right: calc(0 * var(--space-x-reverse));
-    margin-left: calc(0 * calc(1 - var(--space-x-reverse)));
+    margin-right: calc(0px * var(--space-x-reverse));
+    margin-left: calc(0px * calc(1 - var(--space-x-reverse)));
   }
 
   .lg\:space-y-1 > :not(template) ~ :not(template) {
@@ -45767,14 +45767,14 @@ video {
 @media (min-width: 1280px) {
   .xl\:space-y-0 > :not(template) ~ :not(template) {
     --space-y-reverse: 0;
-    margin-top: calc(0 * calc(1 - var(--space-y-reverse)));
-    margin-bottom: calc(0 * var(--space-y-reverse));
+    margin-top: calc(0px * calc(1 - var(--space-y-reverse)));
+    margin-bottom: calc(0px * var(--space-y-reverse));
   }
 
   .xl\:space-x-0 > :not(template) ~ :not(template) {
     --space-x-reverse: 0;
-    margin-right: calc(0 * var(--space-x-reverse));
-    margin-left: calc(0 * calc(1 - var(--space-x-reverse)));
+    margin-right: calc(0px * var(--space-x-reverse));
+    margin-left: calc(0px * calc(1 - var(--space-x-reverse)));
   }
 
   .xl\:space-y-1 > :not(template) ~ :not(template) {
diff --git a/__tests__/plugins/space.test.js b/__tests__/plugins/space.test.js
index 4cd7098fa..5488f3756 100644
--- a/__tests__/plugins/space.test.js
+++ b/__tests__/plugins/space.test.js
@@ -5,6 +5,7 @@ test('generating space utilities', () => {
   const config = {
     theme: {
       space: {
+        '0': '0',
         '1': '1px',
         '2': '2px',
         '4': '4px',
@@ -22,6 +23,16 @@ test('generating space utilities', () => {
   expect(utilities).toEqual([
     [
       {
+        '.space-y-0 > :not(template) ~ :not(template)': {
+          '--space-y-reverse': '0',
+          'margin-top': 'calc(0px * calc(1 - var(--space-y-reverse)))',
+          'margin-bottom': 'calc(0px * var(--space-y-reverse))',
+        },
+        '.space-x-0 > :not(template) ~ :not(template)': {
+          '--space-x-reverse': '0',
+          'margin-right': 'calc(0px * var(--space-x-reverse))',
+          'margin-left': 'calc(0px * calc(1 - var(--space-x-reverse)))',
+        },
         '.space-y-1 > :not(template) ~ :not(template)': {
           '--space-y-reverse': '0',
           'margin-top': 'calc(1px * calc(1 - var(--space-y-reverse)))',
diff --git a/src/plugins/space.js b/src/plugins/space.js
index c85434821..d775f1b33 100644
--- a/src/plugins/space.js
+++ b/src/plugins/space.js
@@ -7,13 +7,13 @@ export default function() {
       (size, modifier) => ({
         [`.${e(prefixNegativeModifiers('space-y', modifier))} > :not(template) ~ :not(template)`]: {
           '--space-y-reverse': '0',
-          'margin-top': `calc(${size} * calc(1 - var(--space-y-reverse)))`,
-          'margin-bottom': `calc(${size} * var(--space-y-reverse))`,
+          'margin-top': `calc(${size === '0' ? '0px' : size} * calc(1 - var(--space-y-reverse)))`,
+          'margin-bottom': `calc(${size === '0' ? '0px' : size} * var(--space-y-reverse))`,
         },
         [`.${e(prefixNegativeModifiers('space-x', modifier))} > :not(template) ~ :not(template)`]: {
           '--space-x-reverse': '0',
-          'margin-right': `calc(${size} * var(--space-x-reverse))`,
-          'margin-left': `calc(${size} * calc(1 - var(--space-x-reverse)))`,
+          'margin-right': `calc(${size === '0' ? '0px' : size} * var(--space-x-reverse))`,
+          'margin-left': `calc(${size === '0' ? '0px' : size} * calc(1 - var(--space-x-reverse)))`,
         },
       }),
     ]