Repository: tailwindlabs/tailwindcss-jit (js)

Issue:
divide-y-0/divide-x-0 classes output faulty values
### What version of @tailwindcss/jit are you using?

0.1.7

### What version of Node.js are you using?

14.15.5 (LTS)

### What browser are you using?

Chrome

### What operating system are you using?

Windows 10

### Reproduction repository

Unfortunately this is a private repo that I can't share, but it should be fairly easy to reproduce anywhere.

The divide-y-0 and divide-x-0 classes generate faulty values that have weird side effects when using @tailwind/jit.

With the regular Tailwindcss processor:
```css
.xs\:divide-y-0>:not([hidden])~:not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px*calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px*var(--tw-divide-y-reverse));
}
```

With @tailwind/jit:
```css
.xs\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0 * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0 * var(--tw-divide-y-reverse));
}
```

The difference is the missing "px" in the @tailwind/jit version, which causes the value to be invalid.

In some cases, these faulty values were causing the element to have 3px borders (top and bottom with the divide-y-0 class).

Pull request:
Fix divide-style not generating, and divide-width not handling '0' properly
Resolves #156 

Patch:
diff --git a/src/corePlugins/divideStyle.js b/src/corePlugins/divideStyle.js
index b0088ce..ece35bc 100644
--- a/src/corePlugins/divideStyle.js
+++ b/src/corePlugins/divideStyle.js
@@ -1,19 +1,19 @@
-const { createSimpleStaticUtilityPlugin } = require('../pluginUtils')
-
-module.exports = createSimpleStaticUtilityPlugin({
-  '.divide-solid > :not([hidden]) ~ :not([hidden])': {
-    'border-style': 'solid',
-  },
-  '.divide-dashed > :not([hidden]) ~ :not([hidden])': {
-    'border-style': 'dashed',
-  },
-  '.divide-dotted > :not([hidden]) ~ :not([hidden])': {
-    'border-style': 'dotted',
-  },
-  '.divide-double > :not([hidden]) ~ :not([hidden])': {
-    'border-style': 'double',
-  },
-  '.divide-none > :not([hidden]) ~ :not([hidden])': {
-    'border-style': 'none',
-  },
-})
+module.exports = function ({ addUtilities }) {
+  addUtilities({
+    '.divide-solid > :not([hidden]) ~ :not([hidden])': {
+      'border-style': 'solid',
+    },
+    '.divide-dashed > :not([hidden]) ~ :not([hidden])': {
+      'border-style': 'dashed',
+    },
+    '.divide-dotted > :not([hidden]) ~ :not([hidden])': {
+      'border-style': 'dotted',
+    },
+    '.divide-double > :not([hidden]) ~ :not([hidden])': {
+      'border-style': 'double',
+    },
+    '.divide-none > :not([hidden]) ~ :not([hidden])': {
+      'border-style': 'none',
+    },
+  })
+}
diff --git a/src/corePlugins/divideWidth.js b/src/corePlugins/divideWidth.js
index 06dbe94..72a3772 100644
--- a/src/corePlugins/divideWidth.js
+++ b/src/corePlugins/divideWidth.js
@@ -9,6 +9,8 @@ module.exports = function ({ addUtilities, matchUtilities, jit: { theme } }) {
         return []
       }
 
+      value = value === '0' ? '0px' : value
+
       return {
         [`${nameClass('divide-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
           '--tw-divide-x-reverse': '0',
@@ -24,6 +26,8 @@ module.exports = function ({ addUtilities, matchUtilities, jit: { theme } }) {
         return []
       }
 
+      value = value === '0' ? '0px' : value
+
       return {
         [`${nameClass('divide-y', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
           '--tw-divide-y-reverse': '0',


Test patch:
diff --git a/tests/01-basic-usage.test.css b/tests/01-basic-usage.test.css
index c41a09f..5dbac18 100644
--- a/tests/01-basic-usage.test.css
+++ b/tests/01-basic-usage.test.css
@@ -330,6 +330,29 @@
 .space-x-reverse > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 1;
 }
+.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(2px * var(--tw-divide-x-reverse));
+  border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
+}
+.divide-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
+}
+.divide-x-0 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(0px * var(--tw-divide-x-reverse));
+  border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
+}
+.divide-y-0 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
+}
+.divide-dotted > :not([hidden]) ~ :not([hidden]) {
+  border-style: dotted;
+}
 .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgba(229, 231, 235, var(--tw-divide-opacity));
diff --git a/tests/01-basic-usage.test.html b/tests/01-basic-usage.test.html
index b480db9..58ab9f8 100644
--- a/tests/01-basic-usage.test.html
+++ b/tests/01-basic-usage.test.html
@@ -40,7 +40,7 @@
     <div class="divide-gray-200"></div>
     <div class="divide-opacity-50"></div>
     <div class="divide-dotted"></div>
-    <div class="divide-4"></div>
+    <div class="divide-x-2 divide-y-4 divide-x-0 divide-y-0"></div>
     <div class="fill-current"></div>
     <div class="flex-1"></div>
     <div class="flex-row-reverse"></div>