0.3.11

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.9/build/index.min.js"></script>
+   <script src="https://cdn.jsdelivr.net/gh/ulyssear/css-in-js-in-html@0.3.11/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

@@ -7,26 +7,11 @@ function init() {
     return events;
   }
 
-  function getFullPathToElement(element) {
-    const path = [];
-    while (element.tagName !== 'HTML') {
-      let selector = element.tagName;
-      if (element.id) {
-        selector += '#' + element.id;
-        path.unshift(selector);
-        break;
-      } else {
-        let sib = element, nth = 1;
-        while (sib = sib.previousElementSibling) {
-          if (sib.tagName === element.tagName) nth++;
-        }
-        if (nth != 1) selector += `:nth-of-type(${nth})`;
-      }
-      path.unshift(selector);
-      element = element.parentElement;
-    }
-    path.unshift('HTML');
-    return path.join('>');
+  function generateUUID(prefix="") {
+    return (prefix ? prefix + "-" : "") + 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+      const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+      return v.toString(16);
+    });
   }
 
   function main() {
@@ -83,9 +68,16 @@ function init() {
 
         if (_entry.join(',') === 'events,query,classes') {
           const events = split[entry.events].split(',');
-          const query = split[entry.query].replaceAll(/current\s*,?/g, getFullPathToElement(element) + ',');
+          let query = split[entry.query].replaceAll(/current\s*,?/g, '#' + uuid + ',');
           const classes = Array.from(split[entry.classes].slice(1, -1).matchAll(regularExpressions[0])).map(e => e.slice(1));
+          if (query.startsWith('>')) {
+            query = '#' + uuid + query;
+          }
+          if (query.endsWith(',')) {
+            query = query.slice(0, -1);
+          }
           const elements = document.querySelectorAll(query);
+          element.removeAttribute('id');
           for (const element of elements) {
             for (const event of events) {
               if (event === 'hover') {
@@ -115,17 +107,18 @@ function init() {
         }
 
         if (_entry.join(',') === 'query,classes') {
-          let query = split[entry.query].replaceAll(/current\s*,?/g, getFullPathToElement(element) + ',');
+          const uuid = generateUUID('cijih');
+          element.setAttribute('id',uuid)
+          let query = split[entry.query].replaceAll(/current\s*,?/g, '#' + uuid + ',');
           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);
+            query = '#' + uuid + query;
           }
           if (query.endsWith(',')) {
             query = query.slice(0, -1);
           }
           const elements = document.querySelectorAll(query);
+          element.removeAttribute('id');
           for (const element of elements) {
             for (const [property, value] of classes) {
               element.style.setProperty(property, value);
@@ -164,22 +157,20 @@ function init() {
 let observer;
 window.addEventListener('css-in-js-in-html-ready', function () {
   if (!observer) {
-    observer = new MutationObserver((mutationsList) => {
+    observer = new MutationObserver(function (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)) {
+        if (
+          (mutation.type === 'childList' && mutation.addedNodes.length > 0) || 
+          (mutation.type === 'attributes' && mutation.attributeName === 'class')
+        ) {
           init();
-          break;
         }
       }
     });
 
     observer.observe(document.body, {
-      attributes: true,
       childList: true,
+      attributes: true,
       subtree: true,
       attributeFilter: ['class']
     });

build/index.min.js.gz

@@ -1,6 +1,6 @@
 {
   "name": "@ulyssear/css-in-js-in-html",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "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": {