From 8c071727268ddfa04f16bb7e3a179be8a2fccf4b Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 2 Apr 2021 16:04:52 -0400 Subject: [PATCH] Add box-decoration-break utilities (#3911) --- .../fixtures/tailwind-output-flagged.css | 48 +++++++++++++++++++ .../fixtures/tailwind-output-important.css | 48 +++++++++++++++++++ .../tailwind-output-no-color-opacity.css | 48 +++++++++++++++++++ __tests__/fixtures/tailwind-output.css | 48 +++++++++++++++++++ jit/corePlugins/boxDecorationBreak.js | 1 + jit/corePlugins/index.js | 1 + jit/tests/basic-usage.test.css | 6 +++ jit/tests/basic-usage.test.html | 1 + src/corePluginList.js | 1 + src/plugins/boxDecorationBreak.js | 15 ++++++ src/plugins/index.js | 1 + stubs/defaultConfig.stub.js | 1 + 12 files changed, 219 insertions(+) create mode 100644 jit/corePlugins/boxDecorationBreak.js create mode 100644 src/plugins/boxDecorationBreak.js diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css index 444bf57c818f..cf751fb1b6f3 100644 --- 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 index 27001e3b829f..f1cbf4bdb186 100644 --- 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 index fdc6b544f10e..ed2f65f22343 100644 --- 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 index 444bf57c818f..cf751fb1b6f3 100644 --- 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 new file mode 100644 index 000000000000..bc21bdd97305 --- /dev/null +++ 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 index 3d4c95d79da6..d2b9f2dbfd26 100644 --- 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 index 5dbac18627cc..2e977f8e2ac1 100644 --- 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 index 58ab9f8f47c0..46150f81c9c4 100644 --- a/jit/tests/basic-usage.test.html +++ b/jit/tests/basic-usage.test.html @@ -32,6 +32,7 @@
+
diff --git a/src/corePluginList.js b/src/corePluginList.js index 01746a336b08..e8a0b04fae81 100644 --- a/src/corePluginList.js +++ b/src/corePluginList.js @@ -23,6 +23,7 @@ export const corePluginList = [ 'borderRadius', 'borderStyle', 'borderWidth', + 'boxDecorationBreak', 'boxSizing', 'cursor', 'display', diff --git a/src/plugins/boxDecorationBreak.js b/src/plugins/boxDecorationBreak.js new file mode 100644 index 000000000000..a250b9e36097 --- /dev/null +++ b/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') + ) + } +} diff --git a/src/plugins/index.js b/src/plugins/index.js index a9b5af940945..58b1c401d69e 100644 --- a/src/plugins/index.js +++ b/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' diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 62e2682cd8c5..dc40ae248fad 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -753,6 +753,7 @@ module.exports = { borderRadius: ['responsive'], borderStyle: ['responsive'], borderWidth: ['responsive'], + boxDecorationBreak: ['responsive'], boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], boxSizing: ['responsive'], clear: ['responsive'],