Add box-decoration-break utilities (#3911)

__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;
   }

__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;
   }

__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;
   }

__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;
   }

jit/corePlugins/boxDecorationBreak.js

@@ -0,0 +1 @@
+module.exports = require('../../lib/plugins/boxDecorationBreak').default()

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

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

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>

src/corePluginList.js

@@ -23,6 +23,7 @@ export const corePluginList = [
   'borderRadius',
   'borderStyle',
   'borderWidth',
+  'boxDecorationBreak',
   'boxSizing',
   'cursor',
   'display',

src/plugins/boxDecorationBreak.js

@@ -0,0 +1,15 @@
+export default function () {
+  return function ({ addUtilities, variants }) {
+    addUtilities(
+      {
+        '.decoration-slice': {
+          'box-decoration-break': 'slice',
+        },
+        '.decoration-clone': {
+          'box-decoration-break': 'clone',
+        },
+      },
+      variants('boxDecorationBreak')
+    )
+  }
+}

src/plugins/index.js

@@ -18,6 +18,7 @@ export { default as borderOpacity } from './borderOpacity'
 export { default as borderRadius } from './borderRadius'
 export { default as borderStyle } from './borderStyle'
 export { default as borderWidth } from './borderWidth'
+export { default as boxDecorationBreak } from './boxDecorationBreak'
 export { default as boxShadow } from './boxShadow'
 export { default as boxSizing } from './boxSizing'
 export { default as clear } from './clear'

stubs/defaultConfig.stub.js

@@ -754,6 +754,7 @@ module.exports = {
     borderRadius: ['responsive'],
     borderStyle: ['responsive'],
     borderWidth: ['responsive'],
+    boxDecorationBreak: ['responsive'],
     boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
     boxSizing: ['responsive'],
     clear: ['responsive'],