Fix divide-style not generating, and divide-width not handling '0' properly (#157)

Author: adamwathan

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',
+    },
+  })
+}

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',

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));

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>