From 314beedbd24a3a16e4b7d065ca0777a19cd7e540 Mon Sep 17 00:00:00 2001 From: David Luhr Date: Mon, 19 Apr 2021 10:39:41 -0700 Subject: [PATCH 1/5] Add background-origin utilities --- jit/corePlugins/backgroundOrigin.js | 1 + jit/corePlugins/index.js | 1 + jit/tests/basic-usage.test.css | 9 +++++++++ jit/tests/basic-usage.test.html | 1 + src/corePluginList.js | 1 + src/plugins/backgroundOrigin.js | 12 ++++++++++++ src/plugins/index.js | 1 + stubs/defaultConfig.stub.js | 1 + 8 files changed, 27 insertions(+) create mode 100644 jit/corePlugins/backgroundOrigin.js create mode 100644 src/plugins/backgroundOrigin.js diff --git a/jit/corePlugins/backgroundOrigin.js b/jit/corePlugins/backgroundOrigin.js new file mode 100644 index 000000000000..9f6d318c2ef8 --- /dev/null +++ b/jit/corePlugins/backgroundOrigin.js @@ -0,0 +1 @@ +module.exports = require('../../lib/plugins/backgroundOrigin').default() diff --git a/jit/corePlugins/index.js b/jit/corePlugins/index.js index 63a24da91246..6bcfe2cf18b5 100644 --- a/jit/corePlugins/index.js +++ b/jit/corePlugins/index.js @@ -252,6 +252,7 @@ module.exports = { backgroundSize: require('./backgroundSize'), backgroundAttachment: require('./backgroundAttachment'), backgroundClip: require('./backgroundClip'), + backgroundOrigin: require('./backgroundOrigin'), backgroundPosition: require('./backgroundPosition'), backgroundRepeat: require('./backgroundRepeat'), diff --git a/jit/tests/basic-usage.test.css b/jit/tests/basic-usage.test.css index e8cb3121d2fb..bb173bb718e6 100644 --- a/jit/tests/basic-usage.test.css +++ b/jit/tests/basic-usage.test.css @@ -424,6 +424,15 @@ .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } +.bg-origin-border { + background-origin: border-box; +} +.bg-origin-padding { + background-origin: padding-box; +} +.bg-origin-content { + background-origin: content-box; +} .from-red-300 { --tw-gradient-from: #fca5a5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(252, 165, 165, 0)); diff --git a/jit/tests/basic-usage.test.html b/jit/tests/basic-usage.test.html index f0fea67aad08..5df8e87e439f 100644 --- a/jit/tests/basic-usage.test.html +++ b/jit/tests/basic-usage.test.html @@ -19,6 +19,7 @@
+
diff --git a/src/corePluginList.js b/src/corePluginList.js index 67ebc8376818..b383e5eaf7f6 100644 --- a/src/corePluginList.js +++ b/src/corePluginList.js @@ -14,6 +14,7 @@ export const corePluginList = [ 'backgroundImage', 'gradientColorStops', 'backgroundOpacity', + 'backgroundOrigin', 'backgroundPosition', 'backgroundRepeat', 'backgroundSize', diff --git a/src/plugins/backgroundOrigin.js b/src/plugins/backgroundOrigin.js new file mode 100644 index 000000000000..226845271d2c --- /dev/null +++ b/src/plugins/backgroundOrigin.js @@ -0,0 +1,12 @@ +export default function () { + return function ({ addUtilities, variants }) { + addUtilities( + { + '.bg-origin-border': { 'background-origin': 'border-box' }, + '.bg-origin-padding': { 'background-origin': 'padding-box' }, + '.bg-origin-content': { 'background-origin': 'content-box' }, + }, + variants('backgroundOrigin') + ) + } +} diff --git a/src/plugins/index.js b/src/plugins/index.js index 2386bea36d01..7c43a930a543 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -20,6 +20,7 @@ export { default as backgroundClip } from './backgroundClip' export { default as backgroundColor } from './backgroundColor' export { default as backgroundImage } from './backgroundImage' export { default as backgroundOpacity } from './backgroundOpacity' +export { default as backgroundOrigin } from './backgroundOrigin' export { default as backgroundPosition } from './backgroundPosition' export { default as backgroundRepeat } from './backgroundRepeat' export { default as backgroundSize } from './backgroundSize' diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 7e7b8bb1392d..866c8006d062 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -838,6 +838,7 @@ module.exports = { backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], backgroundImage: ['responsive'], backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], + backgroundOrigin: ['responsive'], backgroundPosition: ['responsive'], backgroundRepeat: ['responsive'], backgroundSize: ['responsive'], From 57fde38b91d6f636b03fcc19cdaafe689c46afe8 Mon Sep 17 00:00:00 2001 From: David Luhr Date: Mon, 19 Apr 2021 11:01:09 -0700 Subject: [PATCH 2/5] Update fixtures --- .../fixtures/tailwind-output-flagged.css | 74 ++++++++++++++++++- .../fixtures/tailwind-output-important.css | 74 ++++++++++++++++++- .../tailwind-output-no-color-opacity.css | 74 ++++++++++++++++++- __tests__/fixtures/tailwind-output.css | 74 ++++++++++++++++++- 4 files changed, 292 insertions(+), 4 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css index 6ac84315c9a8..bed20bab4d3e 100644 --- a/__tests__/fixtures/tailwind-output-flagged.css +++ b/__tests__/fixtures/tailwind-output-flagged.css @@ -1,4 +1,4 @@ -/*! tailwindcss v2.1.0 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v2.1.1 | MIT License | https://tailwindcss.com */ /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ @@ -7790,6 +7790,18 @@ video { --tw-bg-opacity: 1; } +.bg-origin-border { + background-origin: border-box; +} + +.bg-origin-padding { + background-origin: padding-box; +} + +.bg-origin-content { + background-origin: content-box; +} + .bg-bottom { background-position: bottom; } @@ -37036,6 +37048,18 @@ video { --tw-bg-opacity: 1; } + .sm\:bg-origin-border { + background-origin: border-box; + } + + .sm\:bg-origin-padding { + background-origin: padding-box; + } + + .sm\:bg-origin-content { + background-origin: content-box; + } + .sm\:bg-bottom { background-position: bottom; } @@ -66147,6 +66171,18 @@ video { --tw-bg-opacity: 1; } + .md\:bg-origin-border { + background-origin: border-box; + } + + .md\:bg-origin-padding { + background-origin: padding-box; + } + + .md\:bg-origin-content { + background-origin: content-box; + } + .md\:bg-bottom { background-position: bottom; } @@ -95258,6 +95294,18 @@ video { --tw-bg-opacity: 1; } + .lg\:bg-origin-border { + background-origin: border-box; + } + + .lg\:bg-origin-padding { + background-origin: padding-box; + } + + .lg\:bg-origin-content { + background-origin: content-box; + } + .lg\:bg-bottom { background-position: bottom; } @@ -124369,6 +124417,18 @@ video { --tw-bg-opacity: 1; } + .xl\:bg-origin-border { + background-origin: border-box; + } + + .xl\:bg-origin-padding { + background-origin: padding-box; + } + + .xl\:bg-origin-content { + background-origin: content-box; + } + .xl\:bg-bottom { background-position: bottom; } @@ -153480,6 +153540,18 @@ video { --tw-bg-opacity: 1; } + .\32xl\:bg-origin-border { + background-origin: border-box; + } + + .\32xl\:bg-origin-padding { + background-origin: padding-box; + } + + .\32xl\:bg-origin-content { + background-origin: content-box; + } + .\32xl\:bg-bottom { background-position: bottom; } diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index e928fcbfbabf..64d47e1c9696 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -1,4 +1,4 @@ -/*! tailwindcss v2.1.0 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v2.1.1 | MIT License | https://tailwindcss.com */ /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ @@ -7790,6 +7790,18 @@ video { --tw-bg-opacity: 1 !important; } +.bg-origin-border { + background-origin: border-box !important; +} + +.bg-origin-padding { + background-origin: padding-box !important; +} + +.bg-origin-content { + background-origin: content-box !important; +} + .bg-bottom { background-position: bottom !important; } @@ -37036,6 +37048,18 @@ video { --tw-bg-opacity: 1 !important; } + .sm\:bg-origin-border { + background-origin: border-box !important; + } + + .sm\:bg-origin-padding { + background-origin: padding-box !important; + } + + .sm\:bg-origin-content { + background-origin: content-box !important; + } + .sm\:bg-bottom { background-position: bottom !important; } @@ -66147,6 +66171,18 @@ video { --tw-bg-opacity: 1 !important; } + .md\:bg-origin-border { + background-origin: border-box !important; + } + + .md\:bg-origin-padding { + background-origin: padding-box !important; + } + + .md\:bg-origin-content { + background-origin: content-box !important; + } + .md\:bg-bottom { background-position: bottom !important; } @@ -95258,6 +95294,18 @@ video { --tw-bg-opacity: 1 !important; } + .lg\:bg-origin-border { + background-origin: border-box !important; + } + + .lg\:bg-origin-padding { + background-origin: padding-box !important; + } + + .lg\:bg-origin-content { + background-origin: content-box !important; + } + .lg\:bg-bottom { background-position: bottom !important; } @@ -124369,6 +124417,18 @@ video { --tw-bg-opacity: 1 !important; } + .xl\:bg-origin-border { + background-origin: border-box !important; + } + + .xl\:bg-origin-padding { + background-origin: padding-box !important; + } + + .xl\:bg-origin-content { + background-origin: content-box !important; + } + .xl\:bg-bottom { background-position: bottom !important; } @@ -153480,6 +153540,18 @@ video { --tw-bg-opacity: 1 !important; } + .\32xl\:bg-origin-border { + background-origin: border-box !important; + } + + .\32xl\:bg-origin-padding { + background-origin: padding-box !important; + } + + .\32xl\:bg-origin-content { + background-origin: content-box !important; + } + .\32xl\:bg-bottom { background-position: bottom !important; } diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index a4b1147fd3e3..c066fdf27acb 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -1,4 +1,4 @@ -/*! tailwindcss v2.1.0 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v2.1.1 | MIT License | https://tailwindcss.com */ /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ @@ -6938,6 +6938,18 @@ video { --tw-gradient-to: #831843; } +.bg-origin-border { + background-origin: border-box; +} + +.bg-origin-padding { + background-origin: padding-box; +} + +.bg-origin-content { + background-origin: content-box; +} + .bg-bottom { background-position: bottom; } @@ -33628,6 +33640,18 @@ video { --tw-gradient-to: #831843; } + .sm\:bg-origin-border { + background-origin: border-box; + } + + .sm\:bg-origin-padding { + background-origin: padding-box; + } + + .sm\:bg-origin-content { + background-origin: content-box; + } + .sm\:bg-bottom { background-position: bottom; } @@ -60183,6 +60207,18 @@ video { --tw-gradient-to: #831843; } + .md\:bg-origin-border { + background-origin: border-box; + } + + .md\:bg-origin-padding { + background-origin: padding-box; + } + + .md\:bg-origin-content { + background-origin: content-box; + } + .md\:bg-bottom { background-position: bottom; } @@ -86738,6 +86774,18 @@ video { --tw-gradient-to: #831843; } + .lg\:bg-origin-border { + background-origin: border-box; + } + + .lg\:bg-origin-padding { + background-origin: padding-box; + } + + .lg\:bg-origin-content { + background-origin: content-box; + } + .lg\:bg-bottom { background-position: bottom; } @@ -113293,6 +113341,18 @@ video { --tw-gradient-to: #831843; } + .xl\:bg-origin-border { + background-origin: border-box; + } + + .xl\:bg-origin-padding { + background-origin: padding-box; + } + + .xl\:bg-origin-content { + background-origin: content-box; + } + .xl\:bg-bottom { background-position: bottom; } @@ -139848,6 +139908,18 @@ video { --tw-gradient-to: #831843; } + .\32xl\:bg-origin-border { + background-origin: border-box; + } + + .\32xl\:bg-origin-padding { + background-origin: padding-box; + } + + .\32xl\:bg-origin-content { + background-origin: content-box; + } + .\32xl\:bg-bottom { background-position: bottom; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 6ac84315c9a8..bed20bab4d3e 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -1,4 +1,4 @@ -/*! tailwindcss v2.1.0 | MIT License | https://tailwindcss.com */ +/*! tailwindcss v2.1.1 | MIT License | https://tailwindcss.com */ /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ @@ -7790,6 +7790,18 @@ video { --tw-bg-opacity: 1; } +.bg-origin-border { + background-origin: border-box; +} + +.bg-origin-padding { + background-origin: padding-box; +} + +.bg-origin-content { + background-origin: content-box; +} + .bg-bottom { background-position: bottom; } @@ -37036,6 +37048,18 @@ video { --tw-bg-opacity: 1; } + .sm\:bg-origin-border { + background-origin: border-box; + } + + .sm\:bg-origin-padding { + background-origin: padding-box; + } + + .sm\:bg-origin-content { + background-origin: content-box; + } + .sm\:bg-bottom { background-position: bottom; } @@ -66147,6 +66171,18 @@ video { --tw-bg-opacity: 1; } + .md\:bg-origin-border { + background-origin: border-box; + } + + .md\:bg-origin-padding { + background-origin: padding-box; + } + + .md\:bg-origin-content { + background-origin: content-box; + } + .md\:bg-bottom { background-position: bottom; } @@ -95258,6 +95294,18 @@ video { --tw-bg-opacity: 1; } + .lg\:bg-origin-border { + background-origin: border-box; + } + + .lg\:bg-origin-padding { + background-origin: padding-box; + } + + .lg\:bg-origin-content { + background-origin: content-box; + } + .lg\:bg-bottom { background-position: bottom; } @@ -124369,6 +124417,18 @@ video { --tw-bg-opacity: 1; } + .xl\:bg-origin-border { + background-origin: border-box; + } + + .xl\:bg-origin-padding { + background-origin: padding-box; + } + + .xl\:bg-origin-content { + background-origin: content-box; + } + .xl\:bg-bottom { background-position: bottom; } @@ -153480,6 +153540,18 @@ video { --tw-bg-opacity: 1; } + .\32xl\:bg-origin-border { + background-origin: border-box; + } + + .\32xl\:bg-origin-padding { + background-origin: padding-box; + } + + .\32xl\:bg-origin-content { + background-origin: content-box; + } + .\32xl\:bg-bottom { background-position: bottom; } From 1223a5b0389ce95e5658da4f328d38b534071410 Mon Sep 17 00:00:00 2001 From: David Luhr Date: Mon, 19 Apr 2021 11:10:15 -0700 Subject: [PATCH 3/5] Update basic usage test --- jit/tests/basic-usage.test.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/jit/tests/basic-usage.test.css b/jit/tests/basic-usage.test.css index bb173bb718e6..6bb6752d4e75 100644 --- a/jit/tests/basic-usage.test.css +++ b/jit/tests/basic-usage.test.css @@ -424,15 +424,6 @@ .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } -.bg-origin-border { - background-origin: border-box; -} -.bg-origin-padding { - background-origin: padding-box; -} -.bg-origin-content { - background-origin: content-box; -} .from-red-300 { --tw-gradient-from: #fca5a5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(252, 165, 165, 0)); @@ -459,6 +450,15 @@ .bg-clip-border { background-clip: border-box; } +.bg-origin-border { + background-origin: border-box; +} +.bg-origin-padding { + background-origin: padding-box; +} +.bg-origin-content { + background-origin: content-box; +} .bg-top { background-position: top; } From 3963d0b3d2c7732fdc4fd33b1ba23a02d4060079 Mon Sep 17 00:00:00 2001 From: David Luhr Date: Mon, 19 Apr 2021 17:45:22 -0700 Subject: [PATCH 4/5] Change sort order for background origin --- jit/corePlugins/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jit/corePlugins/index.js b/jit/corePlugins/index.js index 6bcfe2cf18b5..decf3112ea14 100644 --- a/jit/corePlugins/index.js +++ b/jit/corePlugins/index.js @@ -252,9 +252,9 @@ module.exports = { backgroundSize: require('./backgroundSize'), backgroundAttachment: require('./backgroundAttachment'), backgroundClip: require('./backgroundClip'), - backgroundOrigin: require('./backgroundOrigin'), backgroundPosition: require('./backgroundPosition'), backgroundRepeat: require('./backgroundRepeat'), + backgroundOrigin: require('./backgroundOrigin'), fill: require('./fill'), stroke: require('./stroke'), From 3c39ff8c9e7bfd46ccade7b6d8309fdac9daa10f Mon Sep 17 00:00:00 2001 From: David Luhr Date: Tue, 20 Apr 2021 09:04:07 -0700 Subject: [PATCH 5/5] Move background origin after other background properties --- .../fixtures/tailwind-output-flagged.css | 144 +++++++++--------- .../fixtures/tailwind-output-important.css | 144 +++++++++--------- .../tailwind-output-no-color-opacity.css | 144 +++++++++--------- __tests__/fixtures/tailwind-output.css | 144 +++++++++--------- jit/tests/basic-usage.test.css | 12 +- jit/tests/basic-usage.test.html | 2 +- src/corePluginList.js | 2 +- src/plugins/index.js | 2 +- stubs/defaultConfig.stub.js | 2 +- 9 files changed, 298 insertions(+), 298 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css index bed20bab4d3e..9ae18ebf40e5 100644 --- a/__tests__/fixtures/tailwind-output-flagged.css +++ b/__tests__/fixtures/tailwind-output-flagged.css @@ -7790,18 +7790,6 @@ video { --tw-bg-opacity: 1; } -.bg-origin-border { - background-origin: border-box; -} - -.bg-origin-padding { - background-origin: padding-box; -} - -.bg-origin-content { - background-origin: content-box; -} - .bg-bottom { background-position: bottom; } @@ -7874,6 +7862,18 @@ video { background-size: contain; } +.bg-origin-border { + background-origin: border-box; +} + +.bg-origin-padding { + background-origin: padding-box; +} + +.bg-origin-content { + background-origin: content-box; +} + .border-collapse { border-collapse: collapse; } @@ -37048,18 +37048,6 @@ video { --tw-bg-opacity: 1; } - .sm\:bg-origin-border { - background-origin: border-box; - } - - .sm\:bg-origin-padding { - background-origin: padding-box; - } - - .sm\:bg-origin-content { - background-origin: content-box; - } - .sm\:bg-bottom { background-position: bottom; } @@ -37132,6 +37120,18 @@ video { background-size: contain; } + .sm\:bg-origin-border { + background-origin: border-box; + } + + .sm\:bg-origin-padding { + background-origin: padding-box; + } + + .sm\:bg-origin-content { + background-origin: content-box; + } + .sm\:border-collapse { border-collapse: collapse; } @@ -66171,18 +66171,6 @@ video { --tw-bg-opacity: 1; } - .md\:bg-origin-border { - background-origin: border-box; - } - - .md\:bg-origin-padding { - background-origin: padding-box; - } - - .md\:bg-origin-content { - background-origin: content-box; - } - .md\:bg-bottom { background-position: bottom; } @@ -66255,6 +66243,18 @@ video { background-size: contain; } + .md\:bg-origin-border { + background-origin: border-box; + } + + .md\:bg-origin-padding { + background-origin: padding-box; + } + + .md\:bg-origin-content { + background-origin: content-box; + } + .md\:border-collapse { border-collapse: collapse; } @@ -95294,18 +95294,6 @@ video { --tw-bg-opacity: 1; } - .lg\:bg-origin-border { - background-origin: border-box; - } - - .lg\:bg-origin-padding { - background-origin: padding-box; - } - - .lg\:bg-origin-content { - background-origin: content-box; - } - .lg\:bg-bottom { background-position: bottom; } @@ -95378,6 +95366,18 @@ video { background-size: contain; } + .lg\:bg-origin-border { + background-origin: border-box; + } + + .lg\:bg-origin-padding { + background-origin: padding-box; + } + + .lg\:bg-origin-content { + background-origin: content-box; + } + .lg\:border-collapse { border-collapse: collapse; } @@ -124417,18 +124417,6 @@ video { --tw-bg-opacity: 1; } - .xl\:bg-origin-border { - background-origin: border-box; - } - - .xl\:bg-origin-padding { - background-origin: padding-box; - } - - .xl\:bg-origin-content { - background-origin: content-box; - } - .xl\:bg-bottom { background-position: bottom; } @@ -124501,6 +124489,18 @@ video { background-size: contain; } + .xl\:bg-origin-border { + background-origin: border-box; + } + + .xl\:bg-origin-padding { + background-origin: padding-box; + } + + .xl\:bg-origin-content { + background-origin: content-box; + } + .xl\:border-collapse { border-collapse: collapse; } @@ -153540,18 +153540,6 @@ video { --tw-bg-opacity: 1; } - .\32xl\:bg-origin-border { - background-origin: border-box; - } - - .\32xl\:bg-origin-padding { - background-origin: padding-box; - } - - .\32xl\:bg-origin-content { - background-origin: content-box; - } - .\32xl\:bg-bottom { background-position: bottom; } @@ -153624,6 +153612,18 @@ video { background-size: contain; } + .\32xl\:bg-origin-border { + background-origin: border-box; + } + + .\32xl\:bg-origin-padding { + background-origin: padding-box; + } + + .\32xl\:bg-origin-content { + background-origin: content-box; + } + .\32xl\:border-collapse { border-collapse: collapse; } diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 64d47e1c9696..fbf1d93582ea 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -7790,18 +7790,6 @@ video { --tw-bg-opacity: 1 !important; } -.bg-origin-border { - background-origin: border-box !important; -} - -.bg-origin-padding { - background-origin: padding-box !important; -} - -.bg-origin-content { - background-origin: content-box !important; -} - .bg-bottom { background-position: bottom !important; } @@ -7874,6 +7862,18 @@ video { background-size: contain !important; } +.bg-origin-border { + background-origin: border-box !important; +} + +.bg-origin-padding { + background-origin: padding-box !important; +} + +.bg-origin-content { + background-origin: content-box !important; +} + .border-collapse { border-collapse: collapse !important; } @@ -37048,18 +37048,6 @@ video { --tw-bg-opacity: 1 !important; } - .sm\:bg-origin-border { - background-origin: border-box !important; - } - - .sm\:bg-origin-padding { - background-origin: padding-box !important; - } - - .sm\:bg-origin-content { - background-origin: content-box !important; - } - .sm\:bg-bottom { background-position: bottom !important; } @@ -37132,6 +37120,18 @@ video { background-size: contain !important; } + .sm\:bg-origin-border { + background-origin: border-box !important; + } + + .sm\:bg-origin-padding { + background-origin: padding-box !important; + } + + .sm\:bg-origin-content { + background-origin: content-box !important; + } + .sm\:border-collapse { border-collapse: collapse !important; } @@ -66171,18 +66171,6 @@ video { --tw-bg-opacity: 1 !important; } - .md\:bg-origin-border { - background-origin: border-box !important; - } - - .md\:bg-origin-padding { - background-origin: padding-box !important; - } - - .md\:bg-origin-content { - background-origin: content-box !important; - } - .md\:bg-bottom { background-position: bottom !important; } @@ -66255,6 +66243,18 @@ video { background-size: contain !important; } + .md\:bg-origin-border { + background-origin: border-box !important; + } + + .md\:bg-origin-padding { + background-origin: padding-box !important; + } + + .md\:bg-origin-content { + background-origin: content-box !important; + } + .md\:border-collapse { border-collapse: collapse !important; } @@ -95294,18 +95294,6 @@ video { --tw-bg-opacity: 1 !important; } - .lg\:bg-origin-border { - background-origin: border-box !important; - } - - .lg\:bg-origin-padding { - background-origin: padding-box !important; - } - - .lg\:bg-origin-content { - background-origin: content-box !important; - } - .lg\:bg-bottom { background-position: bottom !important; } @@ -95378,6 +95366,18 @@ video { background-size: contain !important; } + .lg\:bg-origin-border { + background-origin: border-box !important; + } + + .lg\:bg-origin-padding { + background-origin: padding-box !important; + } + + .lg\:bg-origin-content { + background-origin: content-box !important; + } + .lg\:border-collapse { border-collapse: collapse !important; } @@ -124417,18 +124417,6 @@ video { --tw-bg-opacity: 1 !important; } - .xl\:bg-origin-border { - background-origin: border-box !important; - } - - .xl\:bg-origin-padding { - background-origin: padding-box !important; - } - - .xl\:bg-origin-content { - background-origin: content-box !important; - } - .xl\:bg-bottom { background-position: bottom !important; } @@ -124501,6 +124489,18 @@ video { background-size: contain !important; } + .xl\:bg-origin-border { + background-origin: border-box !important; + } + + .xl\:bg-origin-padding { + background-origin: padding-box !important; + } + + .xl\:bg-origin-content { + background-origin: content-box !important; + } + .xl\:border-collapse { border-collapse: collapse !important; } @@ -153540,18 +153540,6 @@ video { --tw-bg-opacity: 1 !important; } - .\32xl\:bg-origin-border { - background-origin: border-box !important; - } - - .\32xl\:bg-origin-padding { - background-origin: padding-box !important; - } - - .\32xl\:bg-origin-content { - background-origin: content-box !important; - } - .\32xl\:bg-bottom { background-position: bottom !important; } @@ -153624,6 +153612,18 @@ video { background-size: contain !important; } + .\32xl\:bg-origin-border { + background-origin: border-box !important; + } + + .\32xl\:bg-origin-padding { + background-origin: padding-box !important; + } + + .\32xl\:bg-origin-content { + background-origin: content-box !important; + } + .\32xl\:border-collapse { border-collapse: collapse !important; } diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index c066fdf27acb..aefbe7cab27e 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -6938,18 +6938,6 @@ video { --tw-gradient-to: #831843; } -.bg-origin-border { - background-origin: border-box; -} - -.bg-origin-padding { - background-origin: padding-box; -} - -.bg-origin-content { - background-origin: content-box; -} - .bg-bottom { background-position: bottom; } @@ -7022,6 +7010,18 @@ video { background-size: contain; } +.bg-origin-border { + background-origin: border-box; +} + +.bg-origin-padding { + background-origin: padding-box; +} + +.bg-origin-content { + background-origin: content-box; +} + .border-collapse { border-collapse: collapse; } @@ -33640,18 +33640,6 @@ video { --tw-gradient-to: #831843; } - .sm\:bg-origin-border { - background-origin: border-box; - } - - .sm\:bg-origin-padding { - background-origin: padding-box; - } - - .sm\:bg-origin-content { - background-origin: content-box; - } - .sm\:bg-bottom { background-position: bottom; } @@ -33724,6 +33712,18 @@ video { background-size: contain; } + .sm\:bg-origin-border { + background-origin: border-box; + } + + .sm\:bg-origin-padding { + background-origin: padding-box; + } + + .sm\:bg-origin-content { + background-origin: content-box; + } + .sm\:border-collapse { border-collapse: collapse; } @@ -60207,18 +60207,6 @@ video { --tw-gradient-to: #831843; } - .md\:bg-origin-border { - background-origin: border-box; - } - - .md\:bg-origin-padding { - background-origin: padding-box; - } - - .md\:bg-origin-content { - background-origin: content-box; - } - .md\:bg-bottom { background-position: bottom; } @@ -60291,6 +60279,18 @@ video { background-size: contain; } + .md\:bg-origin-border { + background-origin: border-box; + } + + .md\:bg-origin-padding { + background-origin: padding-box; + } + + .md\:bg-origin-content { + background-origin: content-box; + } + .md\:border-collapse { border-collapse: collapse; } @@ -86774,18 +86774,6 @@ video { --tw-gradient-to: #831843; } - .lg\:bg-origin-border { - background-origin: border-box; - } - - .lg\:bg-origin-padding { - background-origin: padding-box; - } - - .lg\:bg-origin-content { - background-origin: content-box; - } - .lg\:bg-bottom { background-position: bottom; } @@ -86858,6 +86846,18 @@ video { background-size: contain; } + .lg\:bg-origin-border { + background-origin: border-box; + } + + .lg\:bg-origin-padding { + background-origin: padding-box; + } + + .lg\:bg-origin-content { + background-origin: content-box; + } + .lg\:border-collapse { border-collapse: collapse; } @@ -113341,18 +113341,6 @@ video { --tw-gradient-to: #831843; } - .xl\:bg-origin-border { - background-origin: border-box; - } - - .xl\:bg-origin-padding { - background-origin: padding-box; - } - - .xl\:bg-origin-content { - background-origin: content-box; - } - .xl\:bg-bottom { background-position: bottom; } @@ -113425,6 +113413,18 @@ video { background-size: contain; } + .xl\:bg-origin-border { + background-origin: border-box; + } + + .xl\:bg-origin-padding { + background-origin: padding-box; + } + + .xl\:bg-origin-content { + background-origin: content-box; + } + .xl\:border-collapse { border-collapse: collapse; } @@ -139908,18 +139908,6 @@ video { --tw-gradient-to: #831843; } - .\32xl\:bg-origin-border { - background-origin: border-box; - } - - .\32xl\:bg-origin-padding { - background-origin: padding-box; - } - - .\32xl\:bg-origin-content { - background-origin: content-box; - } - .\32xl\:bg-bottom { background-position: bottom; } @@ -139992,6 +139980,18 @@ video { background-size: contain; } + .\32xl\:bg-origin-border { + background-origin: border-box; + } + + .\32xl\:bg-origin-padding { + background-origin: padding-box; + } + + .\32xl\:bg-origin-content { + background-origin: content-box; + } + .\32xl\:border-collapse { border-collapse: collapse; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index bed20bab4d3e..9ae18ebf40e5 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -7790,18 +7790,6 @@ video { --tw-bg-opacity: 1; } -.bg-origin-border { - background-origin: border-box; -} - -.bg-origin-padding { - background-origin: padding-box; -} - -.bg-origin-content { - background-origin: content-box; -} - .bg-bottom { background-position: bottom; } @@ -7874,6 +7862,18 @@ video { background-size: contain; } +.bg-origin-border { + background-origin: border-box; +} + +.bg-origin-padding { + background-origin: padding-box; +} + +.bg-origin-content { + background-origin: content-box; +} + .border-collapse { border-collapse: collapse; } @@ -37048,18 +37048,6 @@ video { --tw-bg-opacity: 1; } - .sm\:bg-origin-border { - background-origin: border-box; - } - - .sm\:bg-origin-padding { - background-origin: padding-box; - } - - .sm\:bg-origin-content { - background-origin: content-box; - } - .sm\:bg-bottom { background-position: bottom; } @@ -37132,6 +37120,18 @@ video { background-size: contain; } + .sm\:bg-origin-border { + background-origin: border-box; + } + + .sm\:bg-origin-padding { + background-origin: padding-box; + } + + .sm\:bg-origin-content { + background-origin: content-box; + } + .sm\:border-collapse { border-collapse: collapse; } @@ -66171,18 +66171,6 @@ video { --tw-bg-opacity: 1; } - .md\:bg-origin-border { - background-origin: border-box; - } - - .md\:bg-origin-padding { - background-origin: padding-box; - } - - .md\:bg-origin-content { - background-origin: content-box; - } - .md\:bg-bottom { background-position: bottom; } @@ -66255,6 +66243,18 @@ video { background-size: contain; } + .md\:bg-origin-border { + background-origin: border-box; + } + + .md\:bg-origin-padding { + background-origin: padding-box; + } + + .md\:bg-origin-content { + background-origin: content-box; + } + .md\:border-collapse { border-collapse: collapse; } @@ -95294,18 +95294,6 @@ video { --tw-bg-opacity: 1; } - .lg\:bg-origin-border { - background-origin: border-box; - } - - .lg\:bg-origin-padding { - background-origin: padding-box; - } - - .lg\:bg-origin-content { - background-origin: content-box; - } - .lg\:bg-bottom { background-position: bottom; } @@ -95378,6 +95366,18 @@ video { background-size: contain; } + .lg\:bg-origin-border { + background-origin: border-box; + } + + .lg\:bg-origin-padding { + background-origin: padding-box; + } + + .lg\:bg-origin-content { + background-origin: content-box; + } + .lg\:border-collapse { border-collapse: collapse; } @@ -124417,18 +124417,6 @@ video { --tw-bg-opacity: 1; } - .xl\:bg-origin-border { - background-origin: border-box; - } - - .xl\:bg-origin-padding { - background-origin: padding-box; - } - - .xl\:bg-origin-content { - background-origin: content-box; - } - .xl\:bg-bottom { background-position: bottom; } @@ -124501,6 +124489,18 @@ video { background-size: contain; } + .xl\:bg-origin-border { + background-origin: border-box; + } + + .xl\:bg-origin-padding { + background-origin: padding-box; + } + + .xl\:bg-origin-content { + background-origin: content-box; + } + .xl\:border-collapse { border-collapse: collapse; } @@ -153540,18 +153540,6 @@ video { --tw-bg-opacity: 1; } - .\32xl\:bg-origin-border { - background-origin: border-box; - } - - .\32xl\:bg-origin-padding { - background-origin: padding-box; - } - - .\32xl\:bg-origin-content { - background-origin: content-box; - } - .\32xl\:bg-bottom { background-position: bottom; } @@ -153624,6 +153612,18 @@ video { background-size: contain; } + .\32xl\:bg-origin-border { + background-origin: border-box; + } + + .\32xl\:bg-origin-padding { + background-origin: padding-box; + } + + .\32xl\:bg-origin-content { + background-origin: content-box; + } + .\32xl\:border-collapse { border-collapse: collapse; } diff --git a/jit/tests/basic-usage.test.css b/jit/tests/basic-usage.test.css index 6bb6752d4e75..784da2da1d4b 100644 --- a/jit/tests/basic-usage.test.css +++ b/jit/tests/basic-usage.test.css @@ -450,6 +450,12 @@ .bg-clip-border { background-clip: border-box; } +.bg-top { + background-position: top; +} +.bg-no-repeat { + background-repeat: no-repeat; +} .bg-origin-border { background-origin: border-box; } @@ -459,12 +465,6 @@ .bg-origin-content { background-origin: content-box; } -.bg-top { - background-position: top; -} -.bg-no-repeat { - background-repeat: no-repeat; -} .fill-current { fill: currentColor; } diff --git a/jit/tests/basic-usage.test.html b/jit/tests/basic-usage.test.html index 5df8e87e439f..ade6904419a5 100644 --- a/jit/tests/basic-usage.test.html +++ b/jit/tests/basic-usage.test.html @@ -19,11 +19,11 @@
-
+
diff --git a/src/corePluginList.js b/src/corePluginList.js index b383e5eaf7f6..48496869ccda 100644 --- a/src/corePluginList.js +++ b/src/corePluginList.js @@ -14,10 +14,10 @@ export const corePluginList = [ 'backgroundImage', 'gradientColorStops', 'backgroundOpacity', - 'backgroundOrigin', 'backgroundPosition', 'backgroundRepeat', 'backgroundSize', + 'backgroundOrigin', 'borderCollapse', 'borderColor', 'borderOpacity', diff --git a/src/plugins/index.js b/src/plugins/index.js index 7c43a930a543..60673fc3d5c1 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -20,10 +20,10 @@ export { default as backgroundClip } from './backgroundClip' export { default as backgroundColor } from './backgroundColor' export { default as backgroundImage } from './backgroundImage' export { default as backgroundOpacity } from './backgroundOpacity' -export { default as backgroundOrigin } from './backgroundOrigin' export { default as backgroundPosition } from './backgroundPosition' export { default as backgroundRepeat } from './backgroundRepeat' export { default as backgroundSize } from './backgroundSize' +export { default as backgroundOrigin } from './backgroundOrigin' export { default as blur } from './blur' export { default as borderCollapse } from './borderCollapse' export { default as borderColor } from './borderColor' diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 866c8006d062..8e7bed9513f8 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -838,10 +838,10 @@ module.exports = { backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], backgroundImage: ['responsive'], backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], - backgroundOrigin: ['responsive'], backgroundPosition: ['responsive'], backgroundRepeat: ['responsive'], backgroundSize: ['responsive'], + backgroundOrigin: ['responsive'], blur: ['responsive'], borderCollapse: ['responsive'], borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],