Add isBlendMode utility.
Closed this issue · 2 comments
We need to be able to validate any given blend mode. This will enable us to check the following CSS properties:
background-blend-modemix-blend-mode
We can do this by creating a helper function in the validators folder named isBlendMode.js. If you need an implementation reference, you can use https://github.com/ben-eb/css-values/blob/master/src/validators/isGenericFamily.js. All we need to do here is to reference the blending modes instead! You can find the list here: https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode
Don't forget to add isBlendMode to the index of validators, located at https://github.com/ben-eb/css-values/blob/master/src/validators/index.js.
Next, we need some way to tell css-values how to generate tests for these values. You can basically follow the existing format in https://github.com/ben-eb/css-values/blob/master/src/fixtures.js - import the list of blend modes and export an object named blendMode with those as valid values, and some made up invalid value.
We then need to add this to the tests. You can do this by updating https://github.com/ben-eb/css-values/blob/master/src/__tests__/validators.js with the isBlendMode validator that you created, named blendMode. If you run the tests now with npm test you will see that blend modes are validated properly.
Hopefully if everything worked correctly, css-values will now output a file that validates the properties listed above. You can check that it does by running npm run prepublish && npm run generate. There should be a new file in output/properties/compositingAndBlending. If this worked, then please add the properties to https://github.com/ben-eb/css-values/blob/master/src/completed.js.
If you're stuck, please post here and I'll help out in any way that I can. And with that being said, PRs welcome! 😃
I'd like to take a stab on it