Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
Apr 4, 2021
Merged

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

merged 3 commits into from
Apr 4, 2021

Conversation

adamwathan
Copy link
Member

@adamwathan adamwathan commented Apr 3, 2021 •
edited
Loading

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
Copy link

codecov-io commented Apr 3, 2021 •
edited
Loading

Codecov Report

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

Impacted file tree graph

@@            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
Copy link
Contributor

neupauer commented Apr 4, 2021

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
Copy link
Member Author

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
Copy link
Member Author

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 ❤️

@adamwathan adamwathan changed the title Add mix-blend-mode utilities Add mix-blend-mode and background-blend-mode utilities Apr 4, 2021
@neupauer
Copy link
Contributor

neupauer commented Apr 4, 2021

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.

@adamwathan adamwathan merged commit 1cb060d into master Apr 4, 2021
@adamwathan adamwathan deleted the mix-blend-mode-utilities branch April 4, 2021 10:50
neupauer added a commit to neupauer/tailwindcss-plugin-blend-mode that referenced this pull request Apr 4, 2021
@neupauer
Update README.md — No longer maintained
9cc29af 
tailwindlabs/tailwindcss#3920
@muhammadsammy muhammadsammy mentioned this pull request Apr 6, 2021
Closed
@ben-rogerson ben-rogerson mentioned this pull request Apr 7, 2021
Closed
adamwathan added a commit that referenced this pull request May 7, 2021
@adamwathan @neupauer
Add mix-blend-mode and background-blend-mode utilities (#3920)
f34214e 
* Add mix-blend-mode utilities

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

Co-Authored-By: Peter Neupauer <[email protected]>

* Add `background-blend-mode` utilities

Co-Authored-By: Peter Neupauer <[email protected]>

Co-authored-by: Peter Neupauer <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@adamwathan @codecov-io @neupauer