Repository: tailwindlabs/tailwindcss
Pull request #1965 (2020-06-25 02:05:02)

Divide border style
<!--

👋 Hey, thanks for your interest in contributing to Tailwind!

**Please ask first before starting work on any significant new features.**

It's never a fun experience to have your pull request declined after investing a lot of time and effort into a new feature. To avoid this from happening, we request that contributors create an issue to first discuss any significant new features. This includes things like adding new utilities, creating new at-rules, or adding new component examples to the documentation.

https://github.com/tailwindcss/tailwindcss/blob/master/.github/CONTRIBUTING.md

-->

Hi, this is my first contribution to Tailwind CSS. Please guide me if my code isn't perfect. Thank you!

I'm trying to add border style for `divide` utility on my project but can't find it from the official documentation.


Patch:
diff --git a/src/corePlugins.js b/src/corePlugins.js
index f1211ba3..b0a69676 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -3,6 +3,7 @@ import container from './plugins/container'
 import space from './plugins/space'
 import divideWidth from './plugins/divideWidth'
 import divideColor from './plugins/divideColor'
+import divideStyle from './plugins/divideStyle'
 import accessibility from './plugins/accessibility'
 import appearance from './plugins/appearance'
 import backgroundAttachment from './plugins/backgroundAttachment'
@@ -107,6 +108,7 @@ export default function({ corePlugins: corePluginConfig }) {
     space,
     divideWidth,
     divideColor,
+    divideStyle,
     divideOpacity,
     accessibility,
     appearance,
diff --git a/src/plugins/divideStyle.js b/src/plugins/divideStyle.js
new file mode 100644
index 00000000..d9ead99d
--- /dev/null
+++ b/src/plugins/divideStyle.js
@@ -0,0 +1,24 @@
+export default function() {
+  return function({ addUtilities, variants }) {
+    addUtilities(
+      {
+        '.divide-solid > :not(template) ~ :not(template)': {
+          'border-style': 'solid',
+        },
+        '.divide-dashed > :not(template) ~ :not(template)': {
+          'border-style': 'dashed',
+        },
+        '.divide-dotted > :not(template) ~ :not(template)': {
+          'border-style': 'dotted',
+        },
+        '.divide-double > :not(template) ~ :not(template)': {
+          'border-style': 'double',
+        },
+        '.divide-none > :not(template) ~ :not(template)': {
+          'border-style': 'none',
+        },
+      },
+      variants('divideStyle')
+    )
+  }
+}


Test patch:
diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css
index 0970edf9..69e0743c 100644
--- a/__tests__/fixtures/tailwind-output-ie11.css
+++ b/__tests__/fixtures/tailwind-output-ie11.css
@@ -1318,6 +1318,26 @@ video {
   border-color: #702459;
 }
 
+.divide-solid > :not(template) ~ :not(template) {
+  border-style: solid;
+}
+
+.divide-dashed > :not(template) ~ :not(template) {
+  border-style: dashed;
+}
+
+.divide-dotted > :not(template) ~ :not(template) {
+  border-style: dotted;
+}
+
+.divide-double > :not(template) ~ :not(template) {
+  border-style: double;
+}
+
+.divide-none > :not(template) ~ :not(template) {
+  border-style: none;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 779af997..1dae201c 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -1686,6 +1686,26 @@ video {
   border-color: rgba(112, 36, 89, var(--divide-opacity)) !important;
 }
 
+.divide-solid > :not(template) ~ :not(template) {
+  border-style: solid !important;
+}
+
+.divide-dashed > :not(template) ~ :not(template) {
+  border-style: dashed !important;
+}
+
+.divide-dotted > :not(template) ~ :not(template) {
+  border-style: dotted !important;
+}
+
+.divide-double > :not(template) ~ :not(template) {
+  border-style: double !important;
+}
+
+.divide-none > :not(template) ~ :not(template) {
+  border-style: none !important;
+}
+
 .divide-opacity-0 > :not(template) ~ :not(template) {
   --divide-opacity: 0 !important;
 }
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
index f7c17ca2..3e2283a7 100644
--- a/__tests__/fixtures/tailwind-output-no-color-opacity.css
+++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -1502,6 +1502,26 @@ video {
   border-color: #702459;
 }
 
+.divide-solid > :not(template) ~ :not(template) {
+  border-style: solid;
+}
+
+.divide-dashed > :not(template) ~ :not(template) {
+  border-style: dashed;
+}
+
+.divide-dotted > :not(template) ~ :not(template) {
+  border-style: dotted;
+}
+
+.divide-double > :not(template) ~ :not(template) {
+  border-style: double;
+}
+
+.divide-none > :not(template) ~ :not(template) {
+  border-style: none;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index e16f646f..d4aba308 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -1686,6 +1686,26 @@ video {
   border-color: rgba(112, 36, 89, var(--divide-opacity));
 }
 
+.divide-solid > :not(template) ~ :not(template) {
+  border-style: solid;
+}
+
+.divide-dashed > :not(template) ~ :not(template) {
+  border-style: dashed;
+}
+
+.divide-dotted > :not(template) ~ :not(template) {
+  border-style: dotted;
+}
+
+.divide-double > :not(template) ~ :not(template) {
+  border-style: double;
+}
+
+.divide-none > :not(template) ~ :not(template) {
+  border-style: none;
+}
+
 .divide-opacity-0 > :not(template) ~ :not(template) {
   --divide-opacity: 0;
 }