fix: parsing bug

CoCreate-app · Apr 22, 2021 · b03143a · b03143a
1 parent 81e312d
commit b03143a
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # CoCreateCSS
 
-A simple SS component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API. Take it for a spin in our [playground!](https://cocreate.app/docs/CoCreateCSS)
+A lightweight utility-first Atomic CSS framework promoting rapid UI development. No learning curve... Apply your native css property:value directly in class, then extract and transform it.. Take it for a spin in our [playground!](https://cocreate.app/docs/CoCreateCSS)
 
 ![GitHub file size in bytes](https://img.shields.io/github/size/CoCreate-app/CoCreateCSS/dist/CoCreateCSS.min.js?label=minified%20size&style=for-the-badge)
 ![GitHub latest release](https://img.shields.io/github/v/release/CoCreate-app/CoCreateCSS?style=for-the-badge)

diff --git a/src/index.js b/src/index.js
@@ -37,13 +37,6 @@ let selectorList = [];
 let styleList = [];
 let tempStyleList = [];
 let styleElSheet = styleEl.sheet;
-let onStyleChange
-
-export default {
-  setOnStyleChange(callback) {
-    onStyleChange = callback;
-  }
-}
 
 
 
@@ -67,16 +60,16 @@ window.addEventListener("load", function() {
         hasChange = addParsingClassList(mutation.target.classList);
       // styleList.forEach(i => styleElSheet.insertRule(i))
       addNewRules()
-      if (onStyleChange && hasChange) {
-        const event = new CustomEvent("newCoCreateCssStyles", {
+
+      if (hasChange)
+        window.dispatchEvent(new CustomEvent("newCoCreateCssStyles", {
           detail: {
             isOnload: true,
             styleList
           },
-        });
-        window.dispatchEvent(event);
-        onStyleChange(false, styleList)
-      }
+        }));
+
+
     },
   });
 
@@ -92,19 +85,13 @@ window.addEventListener("load", function() {
   tempStyleList = []
   styleList.sort();
   styleList.forEach(i => styleElSheet.insertRule(i))
-  if (onStyleChange && hasChange) {
-    const event = new CustomEvent("newCoCreateCssStyles", {
+  if (hasChange)
+    window.dispatchEvent(new CustomEvent("newCoCreateCssStyles", {
       detail: {
         isOnload: true,
         styleList
       },
-    });
-    window.dispatchEvent(event);
-    onStyleChange(true, styleList)
-  }
-
-
-
+    }));
 
 });
 
@@ -143,44 +130,46 @@ function addNewRules() {
 
 function addParsingClassList(classList) {
   let re = /.+:.+/;
+  let hasChanged = false;
   for (let classname of classList) {
-    try {
-      if (re.exec(classname)) {
-        if (selectorList.indexOf(classname) == -1) {
-          let re_at = /.+@.+/;
-          if (re_at.exec(classname)) {
-            let parts = classname.split("@");
-            let main_rule = parseClass(classname);
-
-            for (let i = 1; i < parts.length; i++) {
-              let range_num = mediaRangeNames.indexOf(parts[i]);
-              if (range_num == -1) continue;
-              let range = rangesArray[range_num];
-              let prefix = "@media screen";
-              if (range[0] != 0) {
-                prefix += " and (min-width:" + range[0] + "px)";
-              }
-              if (range[1] != 0) {
-                prefix += " and (max-width:" + range[1] + "px)";
-              }
-              let rule = prefix + "{" + main_rule + "}";
-              tempStyleList.push(rule)
-              selectorList.push(classname);
-              return true;
-            }
-          }
-          else {
-            let rule = parseClass(classname);
 
+    if (re.exec(classname)) {
+      if (selectorList.indexOf(classname) == -1) {
+        let re_at = /.+@.+/;
+        if (re_at.exec(classname)) {
+          let parts = classname.split("@");
+          let main_rule = parseClass(classname);
+
+          for (let i = 1; i < parts.length; i++) {
+            let range_num = mediaRangeNames.indexOf(parts[i]);
+            if (range_num == -1) continue;
+            let range = rangesArray[range_num];
+            let prefix = "@media screen";
+            if (range[0] != 0) {
+              prefix += " and (min-width:" + range[0] + "px)";
+            }
+            if (range[1] != 0) {
+              prefix += " and (max-width:" + range[1] + "px)";
+            }
+            let rule = prefix + "{" + main_rule + "}";
             tempStyleList.push(rule)
             selectorList.push(classname);
-            return true;
+            hasChanged = true;
+
           }
         }
+        else {
+          let rule = parseClass(classname);
+
+          tempStyleList.push(rule)
+          selectorList.push(classname);
+          hasChanged = true;
+
+        }
       }
     }
-    catch (e) {}
   }
+  return hasChanged;
 }
 
 function parseClass(classname) {