Add mix-blend-mode and background-blend-mode utilities

[adamwathan]

This PR adds support for the mix-blend-mode and background-blend-mode properties.

Here's the API:

Class	CSS
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
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

Only responsive variants are enabled by default, but can be configured under the mixBlendMode and backgroundBlendMode keys in your tailwind.config.js file.

[codecov-io]

Codecov Report

Merging #3920 (27bce5c) into master (21a96af) will increase coverage by 0.02%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master    #3920      +/-   ##
==========================================
+ Coverage   86.85%   86.87%   +0.02%     
==========================================
  Files         315      317       +2     
  Lines        4259     4268       +9     
  Branches      788      788              
==========================================
+ Hits         3699     3708       +9     
  Misses        485      485              
  Partials       75       75              

Impacted Files	Coverage Δ
jit/corePlugins/index.js	90.32% <ø> (ø)
src/corePluginList.js	100.00% <ø> (ø)
stubs/defaultConfig.stub.js	100.00% <ø> (ø)
jit/corePlugins/mixBlendMode.js	100.00% <100.00%> (ø)
src/plugins/mixBlendMode.js	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 21a96af...27bce5c. Read the comment docs.

[neupauer]

Hi, nice work.

Have you thought about syntax like mix-blend-* and similar for background-blend-mode syntax like bg-blend-*?

Links (see section Available Utilities):
https://github.com/neupauer/tailwindcss-plugin-blend-mode#available-utilities

[adamwathan]

Yeah valid suggestion — my goal is always to keep the names as short as possible without being ambiguous which is why I settled on names like mix-multiply but I need to come up with names for background-blend-mode and you're right that might influence this 🤔

My thinking was just mix-multiply and bg-multiply, but the bg-* namespace is definitely starting to get crowded. I think you might be right that mix-blend-* and bg-blend-* are the better names even though they are quite verbose. They won't be used very often though so that's probably okay 👍🏻

I'll update this PR — would you be interested in adding background-blend-mode to get some credit in the git history? If not I can add it myself today or tomorrow.

[adamwathan]

Actually looks like GitHub makes it easy to add co-authors now, I'll get this in right now and add you as a co-author on the commit ❤️

[neupauer]

Actually looks like GitHub makes it easy to add co-authors now, I'll get this in right now and add you as a co-author on the commit ❤️

Thanks.