Skip to content

Commit

Permalink
Add mix-blend-mode and background-blend-mode utilities (#3920)
Browse files Browse the repository at this point in the history
* Add mix-blend-mode utilities

* Rename mix-blend-mode utilities to `mix-blend-*`

Co-Authored-By: Peter Neupauer <peter@neupauer.sk>

* Add `background-blend-mode` utilities

Co-Authored-By: Peter Neupauer <peter@neupauer.sk>

Co-authored-by: Peter Neupauer <peter@neupauer.sk>
  • Loading branch information
adamwathan and neupauer authored Apr 4, 2021
1 parent 21a96af commit 1cb060d
Show file tree
Hide file tree
Showing 14 changed files with 3,146 additions and 0 deletions.
768 changes: 768 additions & 0 deletions __tests__/fixtures/tailwind-output-flagged.css

Large diffs are not rendered by default.

768 changes: 768 additions & 0 deletions __tests__/fixtures/tailwind-output-important.css

Large diffs are not rendered by default.

768 changes: 768 additions & 0 deletions __tests__/fixtures/tailwind-output-no-color-opacity.css

Large diffs are not rendered by default.

768 changes: 768 additions & 0 deletions __tests__/fixtures/tailwind-output.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions jit/corePlugins/backgroundBlendMode.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require('../../lib/plugins/backgroundBlendMode').default()
2 changes: 2 additions & 0 deletions jit/corePlugins/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,8 @@ module.exports = {
placeholderOpacity: require('./placeholderOpacity'),

opacity: require('./opacity'),
backgroundBlendMode: require('./backgroundBlendMode'),
mixBlendMode: require('./mixBlendMode'),
boxShadow: require('./boxShadow'),
outline: require('./outline'),
ringWidth: require('./ringWidth'),
Expand Down
1 change: 1 addition & 0 deletions jit/corePlugins/mixBlendMode.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require('../../lib/plugins/mixBlendMode').default()
12 changes: 12 additions & 0 deletions jit/tests/basic-usage.test.css
Original file line number Diff line number Diff line change
Expand Up @@ -576,6 +576,18 @@
.opacity-90 {
opacity: 0.9;
}
.bg-blend-darken {
background-blend-mode: darken;
}
.bg-blend-difference {
background-blend-mode: difference;
}
.mix-blend-multiply {
mix-blend-mode: multiply;
}
.mix-blend-saturation {
mix-blend-mode: saturation;
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
Expand Down
2 changes: 2 additions & 0 deletions jit/tests/basic-usage.test.html
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,8 @@
<div class="object-cover"></div>
<div class="object-bottom"></div>
<div class="opacity-90"></div>
<div class="bg-blend-darken bg-blend-difference"></div>
<div class="mix-blend-multiply mix-blend-saturation"></div>
<div class="order-last order-2"></div>
<div class="outline-none outline-black"></div>
<div class="overflow-hidden"></div>
Expand Down
2 changes: 2 additions & 0 deletions src/corePluginList.js
Original file line number Diff line number Diff line change
Expand Up @@ -120,4 +120,6 @@ export const corePluginList = [
'transitionDuration',
'transitionDelay',
'animation',
'mixBlendMode',
'backgroundBlendMode',
]
25 changes: 25 additions & 0 deletions src/plugins/backgroundBlendMode.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
export default function () {
return function ({ addUtilities, variants }) {
addUtilities(
{
'.bg-blend-normal': { 'background-blend-mode': 'normal' },
'.bg-blend-multiply': { 'background-blend-mode': 'multiply' },
'.bg-blend-screen': { 'background-blend-mode': 'screen' },
'.bg-blend-overlay': { 'background-blend-mode': 'overlay' },
'.bg-blend-darken': { 'background-blend-mode': 'darken' },
'.bg-blend-lighten': { 'background-blend-mode': 'lighten' },
'.bg-blend-color-dodge': { 'background-blend-mode': 'color-dodge' },
'.bg-blend-color-burn': { 'background-blend-mode': 'color-burn' },
'.bg-blend-hard-light': { 'background-blend-mode': 'hard-light' },
'.bg-blend-soft-light': { 'background-blend-mode': 'soft-light' },
'.bg-blend-difference': { 'background-blend-mode': 'difference' },
'.bg-blend-exclusion': { 'background-blend-mode': 'exclusion' },
'.bg-blend-hue': { 'background-blend-mode': 'hue' },
'.bg-blend-saturation': { 'background-blend-mode': 'saturation' },
'.bg-blend-color': { 'background-blend-mode': 'color' },
'.bg-blend-luminosity': { 'background-blend-mode': 'luminosity' },
},
variants('backgroundBlendMode')
)
}
}
2 changes: 2 additions & 0 deletions src/plugins/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export { default as alignSelf } from './alignSelf'
export { default as animation } from './animation'
export { default as appearance } from './appearance'
export { default as backgroundAttachment } from './backgroundAttachment'
export { default as backgroundBlendMode } from './backgroundBlendMode'
export { default as backgroundClip } from './backgroundClip'
export { default as backgroundColor } from './backgroundColor'
export { default as backgroundImage } from './backgroundImage'
Expand Down Expand Up @@ -70,6 +71,7 @@ export { default as maxHeight } from './maxHeight'
export { default as maxWidth } from './maxWidth'
export { default as minHeight } from './minHeight'
export { default as minWidth } from './minWidth'
export { default as mixBlendMode } from './mixBlendMode'
export { default as objectFit } from './objectFit'
export { default as objectPosition } from './objectPosition'
export { default as opacity } from './opacity'
Expand Down
25 changes: 25 additions & 0 deletions src/plugins/mixBlendMode.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
export default function () {
return function ({ addUtilities, variants }) {
addUtilities(
{
'.mix-blend-normal': { 'mix-blend-mode': 'normal' },
'.mix-blend-multiply': { 'mix-blend-mode': 'multiply' },
'.mix-blend-screen': { 'mix-blend-mode': 'screen' },
'.mix-blend-overlay': { 'mix-blend-mode': 'overlay' },
'.mix-blend-darken': { 'mix-blend-mode': 'darken' },
'.mix-blend-lighten': { 'mix-blend-mode': 'lighten' },
'.mix-blend-color-dodge': { 'mix-blend-mode': 'color-dodge' },
'.mix-blend-color-burn': { 'mix-blend-mode': 'color-burn' },
'.mix-blend-hard-light': { 'mix-blend-mode': 'hard-light' },
'.mix-blend-soft-light': { 'mix-blend-mode': 'soft-light' },
'.mix-blend-difference': { 'mix-blend-mode': 'difference' },
'.mix-blend-exclusion': { 'mix-blend-mode': 'exclusion' },
'.mix-blend-hue': { 'mix-blend-mode': 'hue' },
'.mix-blend-saturation': { 'mix-blend-mode': 'saturation' },
'.mix-blend-color': { 'mix-blend-mode': 'color' },
'.mix-blend-luminosity': { 'mix-blend-mode': 'luminosity' },
},
variants('mixBlendMode')
)
}
}
2 changes: 2 additions & 0 deletions stubs/defaultConfig.stub.js
Original file line number Diff line number Diff line change
Expand Up @@ -740,6 +740,7 @@ module.exports = {
animation: ['responsive'],
appearance: ['responsive'],
backgroundAttachment: ['responsive'],
backgroundBlendMode: ['responsive'],
backgroundClip: ['responsive'],
backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
backgroundImage: ['responsive'],
Expand Down Expand Up @@ -805,6 +806,7 @@ module.exports = {
maxWidth: ['responsive'],
minHeight: ['responsive'],
minWidth: ['responsive'],
mixBlendMode: ['responsive'],
objectFit: ['responsive'],
objectPosition: ['responsive'],
opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
Expand Down

0 comments on commit 1cb060d

Please sign in to comment.