wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add background-clip utilities

Browse source
This commit is contained in:
Adam Wathan 2020-08-15 16:20:33 -04:00
parent 8a066c27a2
commit 5b82b6f5ac
8 changed files with 420 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

85
__tests__/fixtures/tailwind-output-flagged.css
View file

@ -2907,6 +2907,23 @@ video {
background-attachment: scroll;
}
.bg-clip-border {
background-clip: border-box;
}
.bg-clip-padding {
background-clip: padding-box;
}
.bg-clip-content {
background-clip: content-box;
}
.bg-clip-text {
background-clip: text;
-webkit-background-clip: text;
}
.bg-transparent {
background-color: transparent;
}
@ -27988,6 +28005,23 @@ video {
background-attachment: scroll;
}
.sm\:bg-clip-border {
background-clip: border-box;
}
.sm\:bg-clip-padding {
background-clip: padding-box;
}
.sm\:bg-clip-content {
background-clip: content-box;
}
.sm\:bg-clip-text {
background-clip: text;
-webkit-background-clip: text;
}
.sm\:bg-transparent {
background-color: transparent;
}
@ -53039,6 +53073,23 @@ video {
background-attachment: scroll;
}
.md\:bg-clip-border {
background-clip: border-box;
}
.md\:bg-clip-padding {
background-clip: padding-box;
}
.md\:bg-clip-content {
background-clip: content-box;
}
.md\:bg-clip-text {
background-clip: text;
-webkit-background-clip: text;
}
.md\:bg-transparent {
background-color: transparent;
}
@ -78090,6 +78141,23 @@ video {
background-attachment: scroll;
}
.lg\:bg-clip-border {
background-clip: border-box;
}
.lg\:bg-clip-padding {
background-clip: padding-box;
}
.lg\:bg-clip-content {
background-clip: content-box;
}
.lg\:bg-clip-text {
background-clip: text;
-webkit-background-clip: text;
}
.lg\:bg-transparent {
background-color: transparent;
}
@ -103141,6 +103209,23 @@ video {
background-attachment: scroll;
}
.xl\:bg-clip-border {
background-clip: border-box;
}
.xl\:bg-clip-padding {
background-clip: padding-box;
}
.xl\:bg-clip-content {
background-clip: content-box;
}
.xl\:bg-clip-text {
background-clip: text;
-webkit-background-clip: text;
}
.xl\:bg-transparent {
background-color: transparent;
}

60
__tests__/fixtures/tailwind-output-ie11.css
View file

@ -1379,6 +1379,18 @@ video {
background-attachment: scroll;
}
.bg-clip-border {
background-clip: border-box;
}
.bg-clip-padding {
background-clip: padding-box;
}
.bg-clip-content {
background-clip: content-box;
}
.bg-transparent {
background-color: transparent;
}
@ -11809,6 +11821,18 @@ video {
background-attachment: scroll;
}
.sm\:bg-clip-border {
background-clip: border-box;
}
.sm\:bg-clip-padding {
background-clip: padding-box;
}
.sm\:bg-clip-content {
background-clip: content-box;
}
.sm\:bg-transparent {
background-color: transparent;
}
@ -22209,6 +22233,18 @@ video {
background-attachment: scroll;
}
.md\:bg-clip-border {
background-clip: border-box;
}
.md\:bg-clip-padding {
background-clip: padding-box;
}
.md\:bg-clip-content {
background-clip: content-box;
}
.md\:bg-transparent {
background-color: transparent;
}
@ -32609,6 +32645,18 @@ video {
background-attachment: scroll;
}
.lg\:bg-clip-border {
background-clip: border-box;
}
.lg\:bg-clip-padding {
background-clip: padding-box;
}
.lg\:bg-clip-content {
background-clip: content-box;
}
.lg\:bg-transparent {
background-color: transparent;
}
@ -43009,6 +43057,18 @@ video {
background-attachment: scroll;
}
.xl\:bg-clip-border {
background-clip: border-box;
}
.xl\:bg-clip-padding {
background-clip: padding-box;
}
.xl\:bg-clip-content {
background-clip: content-box;
}
.xl\:bg-transparent {
background-color: transparent;
}

85
__tests__/fixtures/tailwind-output-important.css
View file

@ -1767,6 +1767,23 @@ video {
background-attachment: scroll !important;
}
.bg-clip-border {
background-clip: border-box !important;
}
.bg-clip-padding {
background-clip: padding-box !important;
}
.bg-clip-content {
background-clip: content-box !important;
}
.bg-clip-text {
background-clip: text !important;
-webkit-background-clip: text !important;
}
.bg-transparent {
background-color: transparent !important;
}
@ -15813,6 +15830,23 @@ video {
background-attachment: scroll !important;
}
.sm\:bg-clip-border {
background-clip: border-box !important;
}
.sm\:bg-clip-padding {
background-clip: padding-box !important;
}
.sm\:bg-clip-content {
background-clip: content-box !important;
}
.sm\:bg-clip-text {
background-clip: text !important;
-webkit-background-clip: text !important;
}
.sm\:bg-transparent {
background-color: transparent !important;
}
@ -29829,6 +29863,23 @@ video {
background-attachment: scroll !important;
}
.md\:bg-clip-border {
background-clip: border-box !important;
}
.md\:bg-clip-padding {
background-clip: padding-box !important;
}
.md\:bg-clip-content {
background-clip: content-box !important;
}
.md\:bg-clip-text {
background-clip: text !important;
-webkit-background-clip: text !important;
}
.md\:bg-transparent {
background-color: transparent !important;
}
@ -43845,6 +43896,23 @@ video {
background-attachment: scroll !important;
}
.lg\:bg-clip-border {
background-clip: border-box !important;
}
.lg\:bg-clip-padding {
background-clip: padding-box !important;
}
.lg\:bg-clip-content {
background-clip: content-box !important;
}
.lg\:bg-clip-text {
background-clip: text !important;
-webkit-background-clip: text !important;
}
.lg\:bg-transparent {
background-color: transparent !important;
}
@ -57861,6 +57929,23 @@ video {
background-attachment: scroll !important;
}
.xl\:bg-clip-border {
background-clip: border-box !important;
}
.xl\:bg-clip-padding {
background-clip: padding-box !important;
}
.xl\:bg-clip-content {
background-clip: content-box !important;
}
.xl\:bg-clip-text {
background-clip: text !important;
-webkit-background-clip: text !important;
}
.xl\:bg-transparent {
background-color: transparent !important;
}

85
__tests__/fixtures/tailwind-output-no-color-opacity.css
View file

@ -1563,6 +1563,23 @@ video {
background-attachment: scroll;
}
.bg-clip-border {
background-clip: border-box;
}
.bg-clip-padding {
background-clip: padding-box;
}
.bg-clip-content {
background-clip: content-box;
}
.bg-clip-text {
background-clip: text;
-webkit-background-clip: text;
}
.bg-transparent {
background-color: transparent;
}
@ -13161,6 +13178,23 @@ video {
background-attachment: scroll;
}
.sm\:bg-clip-border {
background-clip: border-box;
}
.sm\:bg-clip-padding {
background-clip: padding-box;
}
.sm\:bg-clip-content {
background-clip: content-box;
}
.sm\:bg-clip-text {
background-clip: text;
-webkit-background-clip: text;
}
.sm\:bg-transparent {
background-color: transparent;
}
@ -24729,6 +24763,23 @@ video {
background-attachment: scroll;
}
.md\:bg-clip-border {
background-clip: border-box;
}
.md\:bg-clip-padding {
background-clip: padding-box;
}
.md\:bg-clip-content {
background-clip: content-box;
}
.md\:bg-clip-text {
background-clip: text;
-webkit-background-clip: text;
}
.md\:bg-transparent {
background-color: transparent;
}
@ -36297,6 +36348,23 @@ video {
background-attachment: scroll;
}
.lg\:bg-clip-border {
background-clip: border-box;
}
.lg\:bg-clip-padding {
background-clip: padding-box;
}
.lg\:bg-clip-content {
background-clip: content-box;
}
.lg\:bg-clip-text {
background-clip: text;
-webkit-background-clip: text;
}
.lg\:bg-transparent {
background-color: transparent;
}
@ -47865,6 +47933,23 @@ video {
background-attachment: scroll;
}
.xl\:bg-clip-border {
background-clip: border-box;
}
.xl\:bg-clip-padding {
background-clip: padding-box;
}
.xl\:bg-clip-content {
background-clip: content-box;
}
.xl\:bg-clip-text {
background-clip: text;
-webkit-background-clip: text;
}
.xl\:bg-transparent {
background-color: transparent;
}

85
__tests__/fixtures/tailwind-output.css
View file

@ -1767,6 +1767,23 @@ video {
background-attachment: scroll;
}
.bg-clip-border {
background-clip: border-box;
}
.bg-clip-padding {
background-clip: padding-box;
}
.bg-clip-content {
background-clip: content-box;
}
.bg-clip-text {
background-clip: text;
-webkit-background-clip: text;
}
.bg-transparent {
background-color: transparent;
}
@ -15813,6 +15830,23 @@ video {
background-attachment: scroll;
}
.sm\:bg-clip-border {
background-clip: border-box;
}
.sm\:bg-clip-padding {
background-clip: padding-box;
}
.sm\:bg-clip-content {
background-clip: content-box;
}
.sm\:bg-clip-text {
background-clip: text;
-webkit-background-clip: text;
}
.sm\:bg-transparent {
background-color: transparent;
}
@ -29829,6 +29863,23 @@ video {
background-attachment: scroll;
}
.md\:bg-clip-border {
background-clip: border-box;
}
.md\:bg-clip-padding {
background-clip: padding-box;
}
.md\:bg-clip-content {
background-clip: content-box;
}
.md\:bg-clip-text {
background-clip: text;
-webkit-background-clip: text;
}
.md\:bg-transparent {
background-color: transparent;
}
@ -43845,6 +43896,23 @@ video {
background-attachment: scroll;
}
.lg\:bg-clip-border {
background-clip: border-box;
}
.lg\:bg-clip-padding {
background-clip: padding-box;
}
.lg\:bg-clip-content {
background-clip: content-box;
}
.lg\:bg-clip-text {
background-clip: text;
-webkit-background-clip: text;
}
.lg\:bg-transparent {
background-color: transparent;
}
@ -57861,6 +57929,23 @@ video {
background-attachment: scroll;
}
.xl\:bg-clip-border {
background-clip: border-box;
}
.xl\:bg-clip-padding {
background-clip: padding-box;
}
.xl\:bg-clip-content {
background-clip: content-box;
}
.xl\:bg-clip-text {
background-clip: text;
-webkit-background-clip: text;
}
.xl\:bg-transparent {
background-color: transparent;
}

2
src/corePlugins.js
View file

@ -6,6 +6,7 @@ import divideColor from './plugins/divideColor'
import accessibility from './plugins/accessibility'
import appearance from './plugins/appearance'
import backgroundAttachment from './plugins/backgroundAttachment'
import backgroundClip from './plugins/backgroundClip'
import backgroundColor from './plugins/backgroundColor'
import backgroundPosition from './plugins/backgroundPosition'
import backgroundRepeat from './plugins/backgroundRepeat'
@ -113,6 +114,7 @@ export default function({ corePlugins: corePluginConfig }) {
accessibility,
appearance,
backgroundAttachment,
backgroundClip,
backgroundColor,
backgroundOpacity,
backgroundPosition,

17
src/plugins/backgroundClip.js Normal file
View file

@ -0,0 +1,17 @@
export default function() {
return function({ addUtilities, variants, target }) {
addUtilities(
{
'.bg-clip-border': { 'background-clip': 'border-box' },
'.bg-clip-padding': { 'background-clip': 'padding-box' },
'.bg-clip-content': { 'background-clip': 'content-box' },
...(target('display') === 'ie11'
? {}
: {
'.bg-clip-text': { 'background-clip': 'text', '-webkit-background-clip': 'text' },
}),
},
variants('backgroundClip')
)
}
}

1
stubs/defaultConfig.stub.js
View file

@ -658,6 +658,7 @@ module.exports = {
alignSelf: ['responsive'],
appearance: ['responsive'],
backgroundAttachment: ['responsive'],
backgroundClip: ['responsive'],
backgroundColor: ['responsive', 'hover', 'focus'],
backgroundOpacity: ['responsive', 'hover', 'focus'],
backgroundPosition: ['responsive'],