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.

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

feat(atomizer): Add blend modes #422

Merged
merged 11 commits into from
Jul 14, 2022
Merged

Conversation

carriemorrison
Copy link
Collaborator

@carriemorrison carriemorrison commented Jul 13, 2022

Add missing blend modes:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
https://drafts.fxtf.org/compositing/#mix-blend-mode

We only support 1 background-blend-mode since atomic only supports 1 bg image

How Has This Been Tested?

Ran atomizer as per the testing docs:

➜  atomizer git:(blendModes) ./node_modules/.bin/atomizer examples/html/sample-2.html
Parsing file examples/html/sample-2.html for Atomic CSS classes

.Bgbm\(n\) {
  background-blend-mode: normal;
}
.foo .foo_Bgbm\(h\) {
  background-blend-mode: hue;
}
.bar .bar_Mbm\(s\) {
  mix-blend-mode: saturation;
}
.Mbm\(pl\) {
  mix-blend-mode: plus-lighter;
}

Also added a basic unit test.

Types of changes

What types of changes does your code introduce? Put an x in all the boxes that apply:

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Checklist

Review the following points, and put an x in all the boxes that apply. If you’re unsure about any of these, don’t hesitate to ask. We’re here to help!

  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.

I confirm that this contribution is made under a BSD license and that I have the authority necessary to make this contribution on behalf of its copyright owner.

@carriemorrison carriemorrison marked this pull request as ready for review July 14, 2022 00:12
@@ -1302,4 +1302,33 @@ describe('Atomizer()', function () {
]);
});
});
describe('Blend modes', function () {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think if we are going to start adding tests for rules, we should create a new file called rules.js and start adding them there. Then it can be a 1 to 1 relationship with the existing rules.js file.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, I guess we need to decide if its beneficial as @src-code had mentioned we aren't really testing anything new here, just the values added...

Copy link
Contributor

@redonkulus redonkulus Jul 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could probably automate the whole thing by looping through the entire rules.js file and running the test for each rule and creating a snapshot or something. I think all of this could be in a separate PR since we can do it for all rules at one time.

@carriemorrison
Copy link
Collaborator Author

Just added the 2 extra modes for https://drafts.fxtf.org/compositing/#mix-blend-mode

@redonkulus redonkulus merged commit 5b2f69c into acss-io:master Jul 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants