lib/nano_css.rb in isomorfeus-preact-10.6.25 vs lib/nano_css.rb in isomorfeus-preact-10.6.26

@@ -56,31 +56,28 @@
           document.head.appendChild(renderer.shTest);
         }
 
         renderer.putRaw = function (rawCssRule) {
           // .insertRule() is faster than .appendChild(), that's why we use it in PROD.
-          // But CSS injected using .insertRule() is not displayed in Chrome Devtools,
-          // that's why we use .appendChild in DEV.
+          // But CSS injected using .insertRule() is not displayed in Chrome Devtools
+          var sheet = renderer.sh.sheet;
           if (process.env.NODE_ENV === 'production') {
-            var sheet = renderer.sh.sheet;
-
             // Unknown pseudo-selectors will throw, this try/catch swallows all errors.
             try { sheet.insertRule(rawCssRule, sheet.cssRules.length); }
             catch (error) {}
           } else {
             // Test if .insertRule() works in dev mode. Unknown pseudo-selectors will throw when
-            // .insertRule() is used, but .appendChild() will not throw.
             try {
-              renderer.shTest.sheet.insertRule(rawCssRule, renderer.shTest.sheet.cssRules.length);
+              var testSheet = renderer.shTest.sheet;
+              testSheet.insertRule(rawCssRule, testSheet.cssRules.length);
+              testSheet.deleteRule(testSheet.cssRules.length - 1);
             } catch (error) {
               if (config.verbose) {
                 console.error(error);
               }
             }
-
-            // Insert pretty-printed CSS for dev mode.
-            renderer.sh.appendChild(document.createTextNode(rawCssRule));
+            sheet.insertRule(rawCssRule, sheet.cssRules.length);
           }
         };
       }
 
       renderer.put = function (selector, decls, atrule) {
@@ -130,15 +127,21 @@
 
   # addons
 
   %x{
     self.rule = function (renderer) {
-      var blocks;
       if (process.env.NODE_ENV !== 'production') {
-          blocks = {};
+        renderer.rule_blocks = {};
       }
 
+      renderer.delete_from_rule_blocks = function (rule_name) {
+        rule_name = rule_name + '-';
+        for(const rule in renderer.rule_blocks) {
+          if (rule.startsWith(rule_name)) { delete renderer.rule_blocks[rule]; }
+        }
+      }
+
       renderer.rule = function (css, block) {
           // Warn user if CSS selectors clash.
           if (process.env.NODE_ENV !== 'production') {
               if (block) {
                   if (typeof block !== 'string') {
@@ -146,15 +149,15 @@
                           'nano-css block name must be a string. ' +
                           'For example, use nano.rule({color: "red"}, "RedText").'
                       );
                   }
 
-                  if (blocks[block]) {
+                  if (renderer.rule_blocks[block]) {
                       console.error('nano-css block name "' + block + '" used more than once.');
                   }
 
-                  blocks[block] = 1;
+                  renderer.rule_blocks[block] = 1;
               }
           }
 
           block = block || renderer.hash(css);
           block = renderer.pfx + block;
@@ -165,10 +168,24 @@
     };
   }
 
   %x{
     self.sheet = function (renderer) {
+      renderer.delete_from_sheet = function(rule_name) {
+        let selector_rule_name = "._" + rule_name + "-";
+        if (renderer.sh && renderer.sh.sheet) {
+          let sheet = renderer.sh.sheet;
+          let rules = sheet.cssRules;
+          for (let i=rules.length-1;i>=0;i--) {
+            let rule = rules.item(i);
+            if (rule.cssText.includes(selector_rule_name)) {
+              sheet.deleteRule(i);
+            }
+          }
+        }
+      }
+
       renderer.sheet = function (map, block) {
         var result = {};
 
         if (!block) {
           block = renderer.hash(map);
@@ -246,11 +263,11 @@
   }
 
   %x{
     self.hydrate = function (renderer) {
       var hydrated = {};
-
+      renderer.hydrate_force_put = false;
       renderer.hydrate = function (sh) {
         var cssRules = sh.cssRules || sh.sheet.cssRules;
 
         for (var i = 0; i < cssRules.length; i++)
           hydrated[cssRules[i].selectorText] = 1;
@@ -260,10 +277,10 @@
         if (renderer.sh) renderer.hydrate(renderer.sh);
 
         var put = renderer.put;
 
         renderer.put = function (selector, css) {
-          if (selector in hydrated) return;
+          if (!renderer.hydrate_force_put && selector in hydrated) return;
 
           put(selector, css);
         };
       }
     };
\ No newline at end of file