@micro-zoe/micro-app 0.8.3 → 0.8.4

package/lib/index.d.ts

@@ -190,6 +190,7 @@ declare module '@micro-zoe/micro-app/libs/utils' {
         * trim start & end
         */
     export function trim(str: string): string;
+    export function isFireFox(): boolean;
 }
 
 declare module '@micro-zoe/micro-app/interact' {

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '0.8.3';
+const version = '0.8.4';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -303,6 +303,9 @@ function getRootContainer(target) {
 function trim(str) {
     return str ? str.replace(/^\s+|\s+$/g, '') : '';
 }
+function isFireFox() {
+    return navigator.userAgent.indexOf('Firefox') > -1;
+}
 
 var ObservedAttrName;
 (function (ObservedAttrName) {
@@ -403,7 +406,7 @@ class CSSParser {
         this.baseURI = baseURI;
         this.linkPath = linkPath || '';
         this.matchRules();
-        return this.result;
+        return isFireFox() ? decodeURIComponent(this.result) : this.result;
     }
     reset() {
         this.cssText = this.prefix = this.baseURI = this.linkPath = this.result = '';
@@ -422,17 +425,37 @@ class CSSParser {
     }
     // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleRule
     matchStyleRule() {
-        const selectorList = this.formatSelector();
+        const selectors = this.formatSelector(true);
         // reset scopecssDisableNextLine
         this.scopecssDisableNextLine = false;
-        if (!selectorList)
+        if (!selectors)
             return parseError('selector missing', this.linkPath);
-        this.result += selectorList.join(', ');
+        this.recordResult(selectors);
         this.matchComments();
         this.styleDeclarations();
         this.matchLeadingSpaces();
         return true;
     }
+    formatSelector(skip) {
+        const m = this.commonMatch(/^([^{]+)/, skip);
+        if (!m)
+            return false;
+        return m[0].replace(/(^|,[\n\s]*)([^,]+)/g, (_, separator, selector) => {
+            selector = trim(selector);
+            if (!(this.scopecssDisableNextLine ||
+                (this.scopecssDisable && (!this.scopecssDisableSelectors.length ||
+                    this.scopecssDisableSelectors.includes(selector))) ||
+                rootSelectorREG.test(selector))) {
+                if (bodySelectorREG.test(selector)) {
+                    selector = selector.replace(bodySelectorREG, this.prefix + ' micro-app-body');
+                }
+                else {
+                    selector = this.prefix + ' ' + selector;
+                }
+            }
+            return separator + selector;
+        });
+    }
     // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration
     styleDeclarations() {
         if (!this.matchOpenBrace())
@@ -458,7 +481,7 @@ class CSSParser {
                     return `url("${CompletionPath($1, this.baseURI)}")`;
                 });
             }
-            this.result += cssValue;
+            this.recordResult(cssValue);
         }
         // reset scopecssDisableNextLine
         this.scopecssDisableNextLine = false;
@@ -473,39 +496,6 @@ class CSSParser {
         }
         return this.matchAllDeclarations();
     }
-    formatSelector() {
-        const m = this.commonMatch(/^([^{]+)/, true);
-        if (!m)
-            return false;
-        return trim(m[0])
-            .replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '')
-            .replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, (r) => {
-            return r.replace(/,/g, '\u200C');
-        })
-            .split(/\s*(?![^(]*\)),\s*/)
-            .map((s) => {
-            const selectorText = s.replace(/\u200C/g, ',');
-            if (this.scopecssDisableNextLine) {
-                return selectorText;
-            }
-            else if (this.scopecssDisable) {
-                if (!this.scopecssDisableSelectors.length ||
-                    this.scopecssDisableSelectors.includes(selectorText)) {
-                    return selectorText;
-                }
-            }
-            if (selectorText === '*') {
-                return this.prefix + ' *';
-            }
-            else if (bodySelectorREG.test(selectorText)) {
-                return selectorText.replace(bodySelectorREG, this.prefix + ' micro-app-body');
-            }
-            else if (rootSelectorREG.test(selectorText)) { // ignore root selector
-                return selectorText;
-            }
-            return this.prefix + ' ' + selectorText;
-        });
-    }
     matchAtRule() {
         if (this.cssText[0] !== '@')
             return false;
@@ -565,7 +555,7 @@ class CSSParser {
     pageRule() {
         if (!this.commonMatch(/^@page */))
             return false;
-        this.formatSelector();
+        this.formatSelector(false);
         // reset scopecssDisableNextLine
         this.scopecssDisableNextLine = false;
         return this.commonHandlerForAtRuleWithSelfRule('page');
@@ -598,7 +588,7 @@ class CSSParser {
             if (!this.commonMatch(reg))
                 return false;
             this.matchLeadingSpaces();
-            return false;
+            return true;
         };
     }
     // common handler for @font-face, @page
@@ -631,7 +621,7 @@ class CSSParser {
         }
         // get comment content
         let commentText = this.cssText.slice(2, i - 2);
-        this.result += `/*${commentText}*/`;
+        this.recordResult(`/*${commentText}*/`);
         commentText = trim(commentText.replace(/^\s*!/, ''));
         // set ignore config
         if (commentText === 'scopecss-disable-next-line') {
@@ -664,7 +654,7 @@ class CSSParser {
         const matchStr = matchArray[0];
         this.cssText = this.cssText.slice(matchStr.length);
         if (!skip)
-            this.result += matchStr;
+            this.recordResult(matchStr);
         return matchArray;
     }
     matchOpenBrace() {
@@ -677,6 +667,16 @@ class CSSParser {
     matchLeadingSpaces() {
         this.commonMatch(/^\s*/);
     }
+    // splice string
+    recordResult(strFragment) {
+        // Firefox is slow when string contain special characters, see https://github.com/micro-zoe/micro-app/issues/256
+        if (isFireFox()) {
+            this.result += encodeURIComponent(strFragment);
+        }
+        else {
+            this.result += strFragment;
+        }
+    }
 }
 /**
  * common method of bind CSS
@@ -3503,6 +3503,7 @@ function getGlobalAssets(assets) {
         });
     }
 }
+// TODO: requestIdleCallback for every file
 function fetchGlobalResources(resources, suffix, cache) {
     if (isArray(resources)) {
         const effectiveResource = resources.filter((path) => isString(path) && path.includes(`.${suffix}`) && !cache.has(path));