Add mix-blend-plus-darker utility (#12923)

* feat: add plus-darker support for mix-blend-mode

* Fix failing test

* Update changelog

* Formatting

---------

Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>
This commit is contained in:
Clement Chang 2024-02-20 19:07:13 +00:00 • committed by Kris Braun
parent f2a7c2c453
commit 576798620c
3 changed files with 81 additions and 1 deletions

View file

@ -9,9 +9,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed
- Ensure max specificity of `0,0,1` for button and input Preflight rules ([#12735](https://github.com/tailwindlabs/tailwindcss/pull/12735))
- Ensure max specificity of `0,0,1` for button and input Preflight rules ([#12735](https://github.com/tailwindlabs/tailwindcss/pull/12735))
- Improve glob handling for folders with `(`, `)`, `[` or `]` in the file path ([#12715](https://github.com/tailwindlabs/tailwindcss/pull/12715))
- Split `:has` rules when using `experimental.optimizeUniversalDefaults` ([#12736](https://github.com/tailwindlabs/tailwindcss/pull/12736))
- Sort arbitrary properties alphabetically across multiple class lists ([#12911](https://github.com/tailwindlabs/tailwindcss/pull/12911))
- Add `mix-blend-plus-darker` utility ([#12923](https://github.com/tailwindlabs/tailwindcss/pull/12923))
## [3.4.1] - 2014-01-05

View file

@ -2384,6 +2384,7 @@ export let corePlugins = {
'.mix-blend-saturation': { 'mix-blend-mode': 'saturation' },
'.mix-blend-color': { 'mix-blend-mode': 'color' },
'.mix-blend-luminosity': { 'mix-blend-mode': 'luminosity' },
'.mix-blend-plus-darker': { 'mix-blend-mode': 'plus-darker' },
'.mix-blend-plus-lighter': { 'mix-blend-mode': 'plus-lighter' },
})
},

View file

@ -0,0 +1,77 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should test the 'mixBlendMode' plugin 1`] = `
"
.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;
}
.mix-blend-plus-darker {
mix-blend-mode: plus-darker;
}
.mix-blend-plus-lighter {
mix-blend-mode: plus-lighter;
}
"
`;