Merge pull request #1965 from juno-w/master

Divide border style
tailwindlabs · Aug 18, 2020 · 1d2dd1a · 1d2dd1a
2 parents 5b11f9c + 6308f2c
commit 1d2dd1a
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 0 deletions.
diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css
@@ -1317,6 +1317,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
@@ -1685,6 +1685,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
@@ -1501,6 +1501,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
@@ -1685,6 +1685,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;
 }

diff --git 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'
@@ -110,6 +111,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
@@ -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')
+    )
+  }
+}