feat: 🎸 improve cssom addon

BREAKING CHANGE: cssom addon API changed, pipe addon as a consequence now behaves
differently, too

Author: streamich

.storybook/CSSOM.stories.js

@@ -8,16 +8,21 @@ addonCSSOM(nano);
 
 const rule = nano.createRule('.test_cssom_rule');
 rule.style.color = 'red';
+rule.style.borderColor = 'red';
+rule.selectorText = '.test_cssom_rule2';
 console.log('rule', rule);
+for (let i = 0; i < rule.style.length; i++) {
+    console.log(rule.style[i]);
+}
 
 const atrule = nano.createRule('.test_cssom_atrule', '@media only screen and (max-width: 600px)');
 atrule.style.color = 'blue';
 console.log('atrule', atrule);
 
 storiesOf('Addons/CSSOM', module)
     .add('rule', () =>
-        h('div', {className: 'test_cssom_rule'}, 'Hello world')
+        h('div', {className: 'test_cssom_rule2'}, 'Hello world')
     )
     .add('with @media at rule', () =>
-        h('div', {className: 'test_cssom_rule test_cssom_atrule'}, 'Hello world')
+        h('div', {className: 'test_cssom_atrule'}, 'Hello world')
     )

addon/cssom.js

@@ -8,10 +8,13 @@ exports.addon = function (renderer) {
     // CSSOM support only browser environment.
     if (!renderer.client) return;
 
+    // Style sheet for media queries.
+    document.head.appendChild(renderer.msh = document.createElement('style'));
+
     renderer.createRule = function (selector, prelude) {
         var rawCss = selector + '{}';
         if (prelude) rawCss = prelude + '{' + rawCss + '}';
-        var sheet = renderer.sh.sheet;
+        var sheet = prelude ? renderer.msh.sheet : renderer.sh.sheet;
         var index = sheet.insertRule(rawCss, sheet.cssRules.length);
         var rule = (sheet.cssRules || sheet.rules)[index];
 
@@ -23,7 +26,9 @@ exports.addon = function (renderer) {
             // If rule has media query (it has prelude), move style (CSSStyleDeclaration)
             // object to the "top" to normalize it with a rule without the media
             // query, so that both rules have `.style` property available.
-            rule.style = (rule.cssRules || rule.rules)[0].style;
+            var selectorRule = (rule.cssRules || rule.rules)[0];
+            rule.style = selectorRule.style;
+            rule.styleMap = selectorRule.styleMap;
         }
 
         return rule;

addon/pipe.js

@@ -48,7 +48,7 @@ exports.addon = function (renderer) {
             },
             remove: function () {
                 for (var selectorTemplate in rules)
-                    rules[selectorTemplate].remove();
+                    renderer.sh.deleteRule(rule.index);
             }
         };