feat(atomizer): Add blend modes

CONTRIBUTING.md

@@ -77,6 +77,9 @@ The website files are located in a few directories:
 - `app/` - The "References" page which uses React on the client to dynamically filter Atomizer classes
 - `docs/` - The main Jekyll site that contains all the markdown files for the website
 
+### Testing new rules
+Add new rules in `src/rules.js` create a new example file in `examples/html` eg `sample-2.html` then run `./node_modules/.bin/atomizer examples/html/sample-2.html`. You could also copy the output and paste into the PR to be extra nice :)
+
 ### Quick CSS Glossary
 
 ```text
@@ -147,7 +150,6 @@ Examples:
 Example: https://github.com/yahoo/atomizer/blob/master/examples/example-config.js
 
 [BSD license]: https://github.com/acss-io/atomizer/blob/master/LICENSE.md
-[CLA]: https://yahoocla.herokuapp.com/
 [monorepo]: https://en.wikipedia.org/wiki/Monorepo
 [Support]: https://acss.io/support.html
 [workspaces]: https://docs.npmjs.com/cli/v8/using-npm/workspaces

examples/html/sample-2.html

@@ -0,0 +1,2 @@
+<div class="Bgbm(n) Mbm(pl)">Test Blend modes</div>
+<div class="foo_Bgbm(h) bar_Mbm(s)">Test parent Blend modes</div>

packages/atomizer/src/blendmodes.js

@@ -0,0 +1,18 @@
+module.exports = {
+    'c': 'color',
+    'cb': 'color-burn',
+    'cd': 'color-dodge',
+    'd': 'darken',
+    'di': 'difference',
+    'e': 'exclusion',
+    'h': 'hue',
+    'hl': 'hard-light',
+    'l': 'lighten',
+    'lu': 'luminosity',
+    'm': 'multiply',
+    'n': 'normal',
+    'o': 'overlay',
+    's': 'saturation',
+    'sc': 'screen',
+    'sl': 'soft-light'
+};

packages/atomizer/src/rules.js

@@ -32,7 +32,8 @@
  *   "start" and "end".
  * - Rules is written as an array because ORDER is important for the CSS generation.
  **/
-
+const blendModes = require('./blendmodes');
+const mixBlendModes = Object.assign(blendModes, {'pd': 'plus-darker', 'pl': 'plus-lighter'});
 const colors = require('./colors');
 
 module.exports = [
@@ -648,6 +649,17 @@ module.exports = [
             't': 'transparent'
         }]
     },
+    // background-blend-mode
+    {
+        'type': 'pattern',
+        'name': 'Background blend mode',
+        'matcher': 'Bgbm',
+        'allowParamToValue': false,
+        'styles': {
+            'background-blend-mode': '$0'
+        },
+        'arguments': [blendModes]
+    },
     // background-image
     {
         'type': 'pattern',
@@ -2058,6 +2070,21 @@ module.exports = [
     },
     /**
     ==================================================================
+    MIX BLEND MODE
+    ==================================================================
+    */
+    {
+        'type': 'pattern',
+        'name': 'Mix blend mode',
+        'matcher': 'Mbm',
+        'allowParamToValue': false,
+        'styles': {
+            'mix-blend-mode': '$0'
+        },
+        'arguments': [mixBlendModes]
+    },
+    /**
+    ==================================================================
     OBJECTS
     ==================================================================
     */
@@ -3139,6 +3166,7 @@ module.exports = [
     /**
     ==================================================================
     SVG
+    note: 'i': 'inherit' has been left for backwards compat, `inh`: 'inherit' is the global that should be used
     ==================================================================
     */
     {