0.3.8

Author: Ulysse ARNAUD

README.md

@@ -111,7 +111,7 @@ __Older browsers__
 
 1. Import `main.js` in your HTML file
    ```html
-   <script src="https://cdn.jsdelivr.net/gh/ulyssear/css-in-js-in-html@0.3.7/build/index.min.js"></script>
+   <script src="https://cdn.jsdelivr.net/gh/ulyssear/css-in-js-in-html@0.3.8/build/index.min.js"></script>
    ```
 
 2. Add one line of CSS to hide the page while building (and permits to hide elements with hidden attribute)

build/index.min.js

@@ -118,7 +118,9 @@ function init() {
           let query = split[entry.query].replaceAll(/current\s*,?/g, getFullPathToElement(element) + ',');
           const classes = Array.from(split[entry.classes].slice(1, -1).matchAll(regularExpressions[0])).map(e => e.slice(1));
           if (query.startsWith('>')) {
+            console.log('before : ', query);
             query = getFullPathToElement(element) + query;
+            console.log('after : ', query);
           }
           if (query.endsWith(',')) {
             query = query.slice(0, -1);
@@ -159,11 +161,28 @@ function init() {
 
   main();
 }
-document.addEventListener('DOMContentLoaded', init);
 let observer;
 window.addEventListener('css-in-js-in-html-ready', function () {
   if (!observer) {
-    observer = new MutationObserver(init);
-    observer.observe(document, { attributes: true, childList: true, subtree: true });
+    observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          init();
+          break;
+        }
+        if (mutation.type === 'childList' && (mutation.addedNodes.length || mutation.removedNodes.length)) {
+          init();
+          break;
+        }
+      }
+    });
+
+    observer.observe(document.body, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+      attributeFilter: ['class']
+    });
   }
-} );
+});
+document.addEventListener('DOMContentLoaded', init);

build/index.min.js.gz

@@ -1,12 +1,12 @@
 {
   "name": "@ulyssear/css-in-js-in-html",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "CSS-in-JS-in-HTML is a library that allows you to use CSS-in-JS with HTML only.",
   "main": "build/index.js",
   "scripts": {
     "tests": "echo \"Error: no test specified\" && exit 1",
-    "build": "esbuild index.js --bundle --outfile=build/index.min.js --minify",
-    "compress": "node scripts/compress.js"
+    "compress": "node scripts/compress.js",
+    "build": "npm run compress && esbuild index.js --bundle --outfile=build/index.min.js --minify"
   },
   "repository": {
     "type": "git",