Add box-decoration-break utilities (#3911)

tailwindlabs · Apr 2, 2021 · 8c07172 · 8c07172
1 parent e75c5e7
commit 8c07172
Show file tree

Hide file tree

Showing 12 changed files with 219 additions and 0 deletions.
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
@@ -10740,6 +10740,14 @@ video {
   border-left-width: 1px;
 }
 
+.decoration-slice {
+  box-decoration-break: slice;
+}
+
+.decoration-clone {
+  box-decoration-break: clone;
+}
+
 .box-border {
   box-sizing: border-box;
 }
@@ -39336,6 +39344,14 @@ video {
     border-left-width: 1px;
   }
 
+  .sm\:decoration-slice {
+    box-decoration-break: slice;
+  }
+
+  .sm\:decoration-clone {
+    box-decoration-break: clone;
+  }
+
   .sm\:box-border {
     box-sizing: border-box;
   }
@@ -67889,6 +67905,14 @@ video {
     border-left-width: 1px;
   }
 
+  .md\:decoration-slice {
+    box-decoration-break: slice;
+  }
+
+  .md\:decoration-clone {
+    box-decoration-break: clone;
+  }
+
   .md\:box-border {
     box-sizing: border-box;
   }
@@ -96442,6 +96466,14 @@ video {
     border-left-width: 1px;
   }
 
+  .lg\:decoration-slice {
+    box-decoration-break: slice;
+  }
+
+  .lg\:decoration-clone {
+    box-decoration-break: clone;
+  }
+
   .lg\:box-border {
     box-sizing: border-box;
   }
@@ -124995,6 +125027,14 @@ video {
     border-left-width: 1px;
   }
 
+  .xl\:decoration-slice {
+    box-decoration-break: slice;
+  }
+
+  .xl\:decoration-clone {
+    box-decoration-break: clone;
+  }
+
   .xl\:box-border {
     box-sizing: border-box;
   }
@@ -153548,6 +153588,14 @@ video {
     border-left-width: 1px;
   }
 
+  .\32xl\:decoration-slice {
+    box-decoration-break: slice;
+  }
+
+  .\32xl\:decoration-clone {
+    box-decoration-break: clone;
+  }
+
   .\32xl\:box-border {
     box-sizing: border-box;
   }

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
@@ -10740,6 +10740,14 @@ video {
   border-left-width: 1px !important;
 }
 
+.decoration-slice {
+  box-decoration-break: slice !important;
+}
+
+.decoration-clone {
+  box-decoration-break: clone !important;
+}
+
 .box-border {
   box-sizing: border-box !important;
 }
@@ -39336,6 +39344,14 @@ video {
     border-left-width: 1px !important;
   }
 
+  .sm\:decoration-slice {
+    box-decoration-break: slice !important;
+  }
+
+  .sm\:decoration-clone {
+    box-decoration-break: clone !important;
+  }
+
   .sm\:box-border {
     box-sizing: border-box !important;
   }
@@ -67889,6 +67905,14 @@ video {
     border-left-width: 1px !important;
   }
 
+  .md\:decoration-slice {
+    box-decoration-break: slice !important;
+  }
+
+  .md\:decoration-clone {
+    box-decoration-break: clone !important;
+  }
+
   .md\:box-border {
     box-sizing: border-box !important;
   }
@@ -96442,6 +96466,14 @@ video {
     border-left-width: 1px !important;
   }
 
+  .lg\:decoration-slice {
+    box-decoration-break: slice !important;
+  }
+
+  .lg\:decoration-clone {
+    box-decoration-break: clone !important;
+  }
+
   .lg\:box-border {
     box-sizing: border-box !important;
   }
@@ -124995,6 +125027,14 @@ video {
     border-left-width: 1px !important;
   }
 
+  .xl\:decoration-slice {
+    box-decoration-break: slice !important;
+  }
+
+  .xl\:decoration-clone {
+    box-decoration-break: clone !important;
+  }
+
   .xl\:box-border {
     box-sizing: border-box !important;
   }
@@ -153548,6 +153588,14 @@ video {
     border-left-width: 1px !important;
   }
 
+  .\32xl\:decoration-slice {
+    box-decoration-break: slice !important;
+  }
+
+  .\32xl\:decoration-clone {
+    box-decoration-break: clone !important;
+  }
+
   .\32xl\:box-border {
     box-sizing: border-box !important;
   }

diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -9178,6 +9178,14 @@ video {
   border-left-width: 1px;
 }
 
+.decoration-slice {
+  box-decoration-break: slice;
+}
+
+.decoration-clone {
+  box-decoration-break: clone;
+}
+
 .box-border {
   box-sizing: border-box;
 }
@@ -35218,6 +35226,14 @@ video {
     border-left-width: 1px;
   }
 
+  .sm\:decoration-slice {
+    box-decoration-break: slice;
+  }
+
+  .sm\:decoration-clone {
+    box-decoration-break: clone;
+  }
+
   .sm\:box-border {
     box-sizing: border-box;
   }
@@ -61215,6 +61231,14 @@ video {
     border-left-width: 1px;
   }
 
+  .md\:decoration-slice {
+    box-decoration-break: slice;
+  }
+
+  .md\:decoration-clone {
+    box-decoration-break: clone;
+  }
+
   .md\:box-border {
     box-sizing: border-box;
   }
@@ -87212,6 +87236,14 @@ video {
     border-left-width: 1px;
   }
 
+  .lg\:decoration-slice {
+    box-decoration-break: slice;
+  }
+
+  .lg\:decoration-clone {
+    box-decoration-break: clone;
+  }
+
   .lg\:box-border {
     box-sizing: border-box;
   }
@@ -113209,6 +113241,14 @@ video {
     border-left-width: 1px;
   }
 
+  .xl\:decoration-slice {
+    box-decoration-break: slice;
+  }
+
+  .xl\:decoration-clone {
+    box-decoration-break: clone;
+  }
+
   .xl\:box-border {
     box-sizing: border-box;
   }
@@ -139206,6 +139246,14 @@ video {
     border-left-width: 1px;
   }
 
+  .\32xl\:decoration-slice {
+    box-decoration-break: slice;
+  }
+
+  .\32xl\:decoration-clone {
+    box-decoration-break: clone;
+  }
+
   .\32xl\:box-border {
     box-sizing: border-box;
   }

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
@@ -10740,6 +10740,14 @@ video {
   border-left-width: 1px;
 }
 
+.decoration-slice {
+  box-decoration-break: slice;
+}
+
+.decoration-clone {
+  box-decoration-break: clone;
+}
+
 .box-border {
   box-sizing: border-box;
 }
@@ -39336,6 +39344,14 @@ video {
     border-left-width: 1px;
   }
 
+  .sm\:decoration-slice {
+    box-decoration-break: slice;
+  }
+
+  .sm\:decoration-clone {
+    box-decoration-break: clone;
+  }
+
   .sm\:box-border {
     box-sizing: border-box;
   }
@@ -67889,6 +67905,14 @@ video {
     border-left-width: 1px;
   }
 
+  .md\:decoration-slice {
+    box-decoration-break: slice;
+  }
+
+  .md\:decoration-clone {
+    box-decoration-break: clone;
+  }
+
   .md\:box-border {
     box-sizing: border-box;
   }
@@ -96442,6 +96466,14 @@ video {
     border-left-width: 1px;
   }
 
+  .lg\:decoration-slice {
+    box-decoration-break: slice;
+  }
+
+  .lg\:decoration-clone {
+    box-decoration-break: clone;
+  }
+
   .lg\:box-border {
     box-sizing: border-box;
   }
@@ -124995,6 +125027,14 @@ video {
     border-left-width: 1px;
   }
 
+  .xl\:decoration-slice {
+    box-decoration-break: slice;
+  }
+
+  .xl\:decoration-clone {
+    box-decoration-break: clone;
+  }
+
   .xl\:box-border {
     box-sizing: border-box;
   }
@@ -153548,6 +153588,14 @@ video {
     border-left-width: 1px;
   }
 
+  .\32xl\:decoration-slice {
+    box-decoration-break: slice;
+  }
+
+  .\32xl\:decoration-clone {
+    box-decoration-break: clone;
+  }
+
   .\32xl\:box-border {
     box-sizing: border-box;
   }

diff --git a/jit/corePlugins/boxDecorationBreak.js b/jit/corePlugins/boxDecorationBreak.js
@@ -0,0 +1 @@
+module.exports = require('../../lib/plugins/boxDecorationBreak').default()
diff --git a/jit/corePlugins/index.js b/jit/corePlugins/index.js
@@ -247,6 +247,7 @@ module.exports = {
   backgroundOpacity: require('./backgroundOpacity'),
   backgroundImage: require('./backgroundImage'),
   gradientColorStops: require('./gradientColorStops'),
+  boxDecorationBreak: require('./boxDecorationBreak'),
   backgroundSize: require('./backgroundSize'),
   backgroundAttachment: require('./backgroundAttachment'),
   backgroundClip: require('./backgroundClip'),

diff --git a/jit/tests/basic-usage.test.css b/jit/tests/basic-usage.test.css
@@ -429,6 +429,12 @@
 .to-blue-400 {
   --tw-gradient-to: #60a5fa;
 }
+.decoration-slice {
+  box-decoration-break: slice;
+}
+.decoration-clone {
+  box-decoration-break: clone;
+}
 .bg-cover {
   background-size: cover;
 }

diff --git a/jit/tests/basic-usage.test.html b/jit/tests/basic-usage.test.html
@@ -32,6 +32,7 @@
     <div class="border-2"></div>
     <div class="shadow-md"></div>
     <div class="shadow-lg"></div>
+    <div class="decoration-clone decoration-slice"></div>
     <div class="box-border"></div>
     <div class="clear-left"></div>
     <div class="container"></div>

diff --git a/src/corePluginList.js b/src/corePluginList.js
@@ -23,6 +23,7 @@ export const corePluginList = [
   'borderRadius',
   'borderStyle',
   'borderWidth',
+  'boxDecorationBreak',
   'boxSizing',
   'cursor',
   'display',