cotomy 2.0.3 → 2.0.4

package/README.md

@@ -149,6 +149,9 @@ Scoped CSS sharing/re-hydrationとインスタンス単位のイベント管理
 
 ```bash
 npm test -- --run tests/view.spec.ts -t "constructs from multiple sources and applies scoped css"
+npm test -- --run tests/view.spec.ts -t "auto-prefixes [root] when no scope placeholder is present"
+npm test -- --run tests/view.spec.ts -t "auto-prefixes every selector without a scope placeholder"
+npm test -- --run tests/view.spec.ts -t "scopes nested rules while preserving non-style at-rules"
 npm test -- --run tests/view.spec.ts -t "preserves scope ids when cloning, including descendants"
 npm test -- --run tests/view.spec.ts -t "regenerates instance ids and lifecycle hooks when cloning"
 npm test -- --run tests/view.spec.ts -t "keeps event handlers isolated by instance even when sharing scope"

package/dist/browser/cotomy.js

@@ -1690,9 +1690,7 @@ class CotomyElement {
             const cssid = this.scopedCssElementId;
             CotomyElement.find(`#${cssid}`).forEach(e => e.remove());
             const element = document.createElement("style");
-            const hasRoot = /\[root\]/.test(css);
-            const normalizedCss = hasRoot ? css : `[root] ${css}`;
-            const writeCss = normalizedCss.replace(/\[root\]/g, `[data-cotomy-scopeid="${this.scopeId}"]`);
+            const writeCss = this.createScopedCss(css);
             const node = document.createTextNode(writeCss);
             element.appendChild(node);
             element.id = cssid;
@@ -1708,6 +1706,219 @@ class CotomyElement {
         }
         return this;
     }
+    createScopedCss(css) {
+        return this.scopeCssRules(css);
+    }
+    scopeCssRules(css) {
+        let scoped = "";
+        let cursor = 0;
+        while (cursor < css.length) {
+            const open = this.findNextCssBlockStart(css, cursor);
+            if (open < 0) {
+                scoped += css.slice(cursor);
+                break;
+            }
+            const prelude = css.slice(cursor, open);
+            const statementEnd = this.findCssStatementEnd(prelude);
+            if (prelude.trimStart().startsWith("@") && statementEnd >= 0) {
+                scoped += css.slice(cursor, cursor + statementEnd + 1);
+                cursor += statementEnd + 1;
+                continue;
+            }
+            const close = this.findCssBlockEnd(css, open);
+            if (close < 0) {
+                scoped += css.slice(cursor);
+                break;
+            }
+            const body = css.slice(open + 1, close);
+            scoped += this.scopeCssPrelude(prelude) + "{";
+            scoped += this.shouldScopeNestedCss(prelude) ? this.scopeCssRules(body) : body;
+            scoped += "}";
+            cursor = close + 1;
+        }
+        return scoped;
+    }
+    scopeCssPrelude(prelude) {
+        const trimmed = prelude.trimStart();
+        if (trimmed.startsWith("@"))
+            return prelude;
+        return this.scopeSelectorList(prelude);
+    }
+    shouldScopeNestedCss(prelude) {
+        const atRule = prelude.trimStart().match(/^@([a-z-]+)/i)?.[1].toLowerCase();
+        return atRule === "media"
+            || atRule === "supports"
+            || atRule === "container"
+            || atRule === "layer"
+            || atRule === "document";
+    }
+    scopeSelectorList(selectors) {
+        return this.splitCssSelectorList(selectors).map(selector => {
+            if (!selector.trim())
+                return selector;
+            const leading = selector.match(/^\s*/)?.[0] ?? "";
+            const trailing = selector.match(/\s*$/)?.[0] ?? "";
+            const body = selector.slice(leading.length, selector.length - trailing.length);
+            if (/\[root\]/.test(body)) {
+                return leading + body.replace(/\[root\]/g, this.scopedRootSelector) + trailing;
+            }
+            return `${leading}${this.scopedRootSelector} ${body}${trailing}`;
+        }).join(",");
+    }
+    splitCssSelectorList(selectors) {
+        const result = [];
+        let start = 0;
+        let stringQuote = null;
+        let bracketDepth = 0;
+        let parenthesisDepth = 0;
+        for (let i = 0; i < selectors.length; i++) {
+            const char = selectors[i];
+            const next = selectors[i + 1];
+            if (stringQuote) {
+                if (char === "\\") {
+                    i++;
+                }
+                else if (char === stringQuote) {
+                    stringQuote = null;
+                }
+                continue;
+            }
+            if (char === "/" && next === "*") {
+                i = selectors.indexOf("*/", i + 2);
+                if (i < 0)
+                    break;
+                i++;
+                continue;
+            }
+            if (char === "\"" || char === "'") {
+                stringQuote = char;
+            }
+            else if (char === "[") {
+                bracketDepth++;
+            }
+            else if (char === "]") {
+                bracketDepth = Math.max(0, bracketDepth - 1);
+            }
+            else if (char === "(") {
+                parenthesisDepth++;
+            }
+            else if (char === ")") {
+                parenthesisDepth = Math.max(0, parenthesisDepth - 1);
+            }
+            else if (char === "," && bracketDepth === 0 && parenthesisDepth === 0) {
+                result.push(selectors.slice(start, i));
+                start = i + 1;
+            }
+        }
+        result.push(selectors.slice(start));
+        return result;
+    }
+    findCssStatementEnd(css) {
+        let stringQuote = null;
+        let parenthesisDepth = 0;
+        for (let i = 0; i < css.length; i++) {
+            const char = css[i];
+            const next = css[i + 1];
+            if (stringQuote) {
+                if (char === "\\") {
+                    i++;
+                }
+                else if (char === stringQuote) {
+                    stringQuote = null;
+                }
+                continue;
+            }
+            if (char === "/" && next === "*") {
+                i = css.indexOf("*/", i + 2);
+                if (i < 0)
+                    return -1;
+                i++;
+                continue;
+            }
+            if (char === "\"" || char === "'") {
+                stringQuote = char;
+            }
+            else if (char === "(") {
+                parenthesisDepth++;
+            }
+            else if (char === ")") {
+                parenthesisDepth = Math.max(0, parenthesisDepth - 1);
+            }
+            else if (char === ";" && parenthesisDepth === 0) {
+                return i;
+            }
+        }
+        return -1;
+    }
+    findNextCssBlockStart(css, start) {
+        let stringQuote = null;
+        for (let i = start; i < css.length; i++) {
+            const char = css[i];
+            const next = css[i + 1];
+            if (stringQuote) {
+                if (char === "\\") {
+                    i++;
+                }
+                else if (char === stringQuote) {
+                    stringQuote = null;
+                }
+                continue;
+            }
+            if (char === "/" && next === "*") {
+                i = css.indexOf("*/", i + 2);
+                if (i < 0)
+                    return -1;
+                i++;
+                continue;
+            }
+            if (char === "\"" || char === "'") {
+                stringQuote = char;
+            }
+            else if (char === "{") {
+                return i;
+            }
+        }
+        return -1;
+    }
+    findCssBlockEnd(css, open) {
+        let depth = 0;
+        let stringQuote = null;
+        for (let i = open; i < css.length; i++) {
+            const char = css[i];
+            const next = css[i + 1];
+            if (stringQuote) {
+                if (char === "\\") {
+                    i++;
+                }
+                else if (char === stringQuote) {
+                    stringQuote = null;
+                }
+                continue;
+            }
+            if (char === "/" && next === "*") {
+                i = css.indexOf("*/", i + 2);
+                if (i < 0)
+                    return -1;
+                i++;
+                continue;
+            }
+            if (char === "\"" || char === "'") {
+                stringQuote = char;
+            }
+            else if (char === "{") {
+                depth++;
+            }
+            else if (char === "}") {
+                depth--;
+                if (depth === 0)
+                    return i;
+            }
+        }
+        return -1;
+    }
+    get scopedRootSelector() {
+        return `[data-cotomy-scopeid="${this.scopeId}"]`;
+    }
     ensureScopedCss() {
         if (!this._scopedCss || !this.stylable)
             return;