ensure that divide utilities inject a default border color (#5438)

tailwindlabs · Sep 8, 2021 · eb3fe8f · eb3fe8f
1 parent a5425ab
commit eb3fe8f
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 0 deletions.
diff --git a/src/plugins/divideWidth.js b/src/plugins/divideWidth.js
@@ -7,6 +7,7 @@ export default function () {
 
           return {
             '& > :not([hidden]) ~ :not([hidden])': {
+              '@defaults border-width': {},
               '--tw-divide-x-reverse': '0',
               'border-right-width': `calc(${value} * var(--tw-divide-x-reverse))`,
               'border-left-width': `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`,
@@ -18,6 +19,7 @@ export default function () {
 
           return {
             '& > :not([hidden]) ~ :not([hidden])': {
+              '@defaults border-width': {},
               '--tw-divide-y-reverse': '0',
               'border-top-width': `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`,
               'border-bottom-width': `calc(${value} * var(--tw-divide-y-reverse))`,
@@ -35,9 +37,11 @@ export default function () {
     addUtilities(
       {
         '.divide-y-reverse > :not([hidden]) ~ :not([hidden])': {
+          '@defaults border-width': {},
           '--tw-divide-y-reverse': '1',
         },
         '.divide-x-reverse > :not([hidden]) ~ :not([hidden])': {
+          '@defaults border-width': {},
           '--tw-divide-x-reverse': '1',
         },
       },

diff --git a/tests/plugins/divide.test.js b/tests/plugins/divide.test.js
@@ -0,0 +1,121 @@
+import { run, html, css } from '../util/run'
+
+it('should add the divide styles for divide-y and a default border color', () => {
+  let config = {
+    content: [{ raw: html`<div class="divide-y"></div>` }],
+    corePlugins: { preflight: false },
+  }
+
+  return run('@tailwind base; @tailwind utilities;', config).then((result) => {
+    expect(result.css).toMatchCss(css`
+      *,
+      ::before,
+      ::after {
+        --tw-border-opacity: 1;
+        border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+      }
+
+      .divide-y > :not([hidden]) ~ :not([hidden]) {
+        --tw-divide-y-reverse: 0;
+        border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+        border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+      }
+    `)
+  })
+})
+
+it('should add the divide styles for divide-x and a default border color', () => {
+  let config = {
+    content: [{ raw: html`<div class="divide-x"></div>` }],
+    corePlugins: { preflight: false },
+  }
+
+  return run('@tailwind base; @tailwind utilities;', config).then((result) => {
+    expect(result.css).toMatchCss(css`
+      *,
+      ::before,
+      ::after {
+        --tw-border-opacity: 1;
+        border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+      }
+
+      .divide-x > :not([hidden]) ~ :not([hidden]) {
+        --tw-divide-x-reverse: 0;
+        border-right-width: calc(1px * var(--tw-divide-x-reverse));
+        border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+      }
+    `)
+  })
+})
+
+it('should add the divide styles for divide-y-reverse and a default border color', () => {
+  let config = {
+    content: [{ raw: html`<div class="divide-y-reverse"></div>` }],
+    corePlugins: { preflight: false },
+  }
+
+  return run('@tailwind base; @tailwind utilities;', config).then((result) => {
+    expect(result.css).toMatchCss(css`
+      *,
+      ::before,
+      ::after {
+        --tw-border-opacity: 1;
+        border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+      }
+
+      .divide-y-reverse > :not([hidden]) ~ :not([hidden]) {
+        --tw-divide-y-reverse: 1;
+      }
+    `)
+  })
+})
+
+it('should add the divide styles for divide-x-reverse and a default border color', () => {
+  let config = {
+    content: [{ raw: html`<div class="divide-x-reverse"></div>` }],
+    corePlugins: { preflight: false },
+  }
+
+  return run('@tailwind base; @tailwind utilities;', config).then((result) => {
+    expect(result.css).toMatchCss(css`
+      *,
+      ::before,
+      ::after {
+        --tw-border-opacity: 1;
+        border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+      }
+
+      .divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
+        --tw-divide-x-reverse: 1;
+      }
+    `)
+  })
+})
+
+it('should only inject the base styles once if we use divide and border at the same time', () => {
+  let config = {
+    content: [{ raw: html`<div class="divide-y border-r"></div>` }],
+    corePlugins: { preflight: false },
+  }
+
+  return run('@tailwind base; @tailwind utilities;', config).then((result) => {
+    expect(result.css).toMatchCss(css`
+      *,
+      ::before,
+      ::after {
+        --tw-border-opacity: 1;
+        border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+      }
+
+      .divide-y > :not([hidden]) ~ :not([hidden]) {
+        --tw-divide-y-reverse: 0;
+        border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+        border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+      }
+
+      .border-r {
+        border-right-width: 1px;
+      }
+    `)
+  })
+})