@ikas/component-cli 1.4.0-beta.41 → 1.4.0-beta.43

package/dist/utils/compile.js

@@ -95,15 +95,11 @@ export async function compileComponent(entryPath, stylesPath, componentId) {
     }
 }
 /**
- * Scope CSS selectors with a component-specific class prefix, then namespace any
- * document-global CSS identifiers (`@keyframes`, `@font-face` font-family,
- * `@counter-style`) DEFINED in this component so two components — or the host theme —
- * declaring the same name can't collide in the page's global namespace.
+ * Scope CSS selectors with a component-specific class prefix
  */
 export function scopeCSS(css, componentId) {
     const scopeClass = `cc_${componentId.replace(/[^a-zA-Z0-9]/g, "_")}`;
-    const scoped = scopeCSSWithClasses(css, [scopeClass]);
-    return renameCollidingGlobals(scoped, `${scopeClass}_`);
+    return scopeCSSWithClasses(css, [scopeClass]);
 }
 /**
  * Scope CSS selectors with multiple class prefixes (for shared chunks).
@@ -113,519 +109,63 @@ export function scopeCSSMulti(css, componentIds) {
     const scopeClasses = componentIds.map(id => `cc_${id.replace(/[^a-zA-Z0-9]/g, "_")}`);
     return scopeCSSWithClasses(css, scopeClasses);
 }
-// Conditional group at-rules whose blocks nest normal style rules and must be
-// scoped recursively. This is an ALLOWLIST on purpose: at-rules NOT listed here
-// (@keyframes, @font-face, @page, @property, @counter-style, ...) have non-selector
-// bodies — e.g. @keyframes contains `0%`/`from` keyframe selectors that must NOT be
-// prefixed — so their bodies are copied through untouched. Vendor-prefixed conditional
-// rules (@-moz-document) match via the optional prefix group; @-webkit-keyframes does
-// NOT match (the alternation excludes "keyframes"), which is what we want.
-//
-// NOTE: This scoper is duplicated in editor-models/src/helpers/code-component-css-scope.ts
-// (the editor-preview / code-generator path). The CLI ships standalone to npm and cannot
-// import that private package, so the two intentionally diverge. Keep parsing fixes in sync.
-const NESTING_AT_RULES = /^@(?:-\w+-)?(media|supports|container|layer|document|scope|starting-style)\b/i;
 /**
- * Internal: scope CSS selectors with one or more scope class prefixes.
- *
- * Character-based walker, NOT line-based: a rule's selector list is everything up
- * to its opening `{`, so lists written across multiple lines (`.a,\n.b { ... }`)
- * are scoped as a whole. The previous line-based implementation only scoped the
- * selector fragment sharing a line with `{`, leaving the other selectors unscoped
- * (they either lost the cascade to scoped rules or leaked into other components).
- *
- * Comments, string literals, and `\` escapes are treated as inert spans (via
- * `skipInertSpan`) by every structural scanner, so a `{`, `}`, `;`, or `,` that
- * appears inside a comment / string / escape can never be mistaken for real
- * structure (which would otherwise drop the scope prefix and leak styles globally).
+ * Internal: scope CSS selectors with one or more scope class prefixes
  */
 function scopeCSSWithClasses(css, scopeClasses) {
-    let out = "";
-    for (let i = 0; i < css.length;) {
-        const ch = css[i];
-        // Copy comments verbatim
-        if (ch === "/" && css[i + 1] === "*") {
-            const end = css.indexOf("*/", i + 2);
-            if (end === -1)
-                return out + css.slice(i);
-            out += css.slice(i, end + 2);
-            i = end + 2;
-            continue;
-        }
-        // Copy whitespace and stray closing braces
-        if (/\s/.test(ch) || ch === "}") {
-            out += ch;
-            i++;
-            continue;
-        }
-        if (ch === "@") {
-            const headerEnd = findAtRuleHeaderEnd(css, i);
-            // Block-less at-rule (@import, @charset, @layer a;, ...) — copy through
-            if (headerEnd >= css.length || css[headerEnd] === ";") {
-                out += css.slice(i, Math.min(headerEnd + 1, css.length));
-                i = headerEnd + 1;
-                continue;
-            }
-            const header = css.slice(i, headerEnd);
-            const blockEnd = findBlockEnd(css, headerEnd + 1);
-            const body = css.slice(headerEnd + 1, blockEnd);
-            const transformed = NESTING_AT_RULES.test(header.trim())
-                ? scopeCSSWithClasses(body, scopeClasses)
-                : body;
-            // Always emit the closing brace: when the source block is unterminated
-            // (blockEnd === css.length) this repairs it, so concatenated component CSS
-            // can't leak one component's block over the next.
-            out += `${header}{${transformed}}`;
-            i = blockEnd + 1;
-            continue;
-        }
-        // Normal style rule: selector list runs up to the rule's opening `{`
-        const selEnd = findSelectorListEnd(css, i);
-        if (selEnd >= css.length) {
-            // Trailing content with no block (e.g. a dangling declaration at EOF) — copy through
-            out += css.slice(i);
-            break;
-        }
-        if (css[selEnd] === ";") {
-            // A stray top-level `;` (or a stray declaration fragment ending in `;`) — not a rule.
-            // DROP it. Copying it through is not enough: per the CSS syntax spec a browser folds a
-            // stray `;` into the NEXT rule's prelude when consuming a qualified rule, which makes
-            // that selector invalid and drops the whole following rule. Dropping the stray token
-            // keeps the next rule valid and correctly scoped.
-            i = selEnd + 1;
-            continue;
-        }
-        if (css[selEnd] === "}") {
-            // Content before a stray closing brace — copy through verbatim and let the main loop
-            // emit the `}`.
-            out += css.slice(i, selEnd);
-            i = selEnd;
-            continue;
-        }
-        const selectorList = css.slice(i, selEnd);
-        const blockEnd = findBlockEnd(css, selEnd + 1);
-        const body = css.slice(selEnd + 1, blockEnd);
-        const scopedSelector = splitSelectorList(selectorList)
-            .map(s => s.trim())
-            .filter(Boolean)
-            .flatMap(s => scopeClasses.map(cls => `.${cls} ${s}`))
-            .join(", ");
-        // Always emit the closing brace (see at-rule branch above for rationale).
-        out += `${scopedSelector} {${body}}`;
-        i = blockEnd + 1;
-    }
-    return out;
-}
-/**
- * If an inert span — a `/* ... *\/` comment, a `"..."` / `'...'` string literal, an
- * unquoted `url(...)` token, or a `\x` escape — starts at `s[i]`, return the index just
- * past it; otherwise return -1.
- *
- * Every structural scanner below funnels through this so that delimiters (`{ } ; , ( )`)
- * living inside comments, strings, urls, or escapes are never treated as structure. String
- * scanning honors `\` escapes and stops at a raw newline, matching CSS "bad-string" error
- * recovery (an unterminated string ends at the line break) so a missing quote can't
- * swallow every rule that follows it.
- */
-function skipInertSpan(s, i) {
-    const c = s[i];
-    if (c === "/" && s[i + 1] === "*") {
-        const end = s.indexOf("*/", i + 2);
-        return end === -1 ? s.length : end + 2;
-    }
-    if (c === '"' || c === "'") {
-        for (let j = i + 1; j < s.length; j++) {
-            const d = s[j];
-            if (d === "\\") {
-                j++; // escape: skip the next char
-                continue;
-            }
-            if (d === c)
-                return j + 1; // closing quote
-            if (d === "\n" || d === "\r" || d === "\f")
-                return j; // bad-string ends at newline
-        }
-        return s.length;
-    }
-    // Unquoted url(...) token: per the CSS tokenizer its content is opaque, so braces,
-    // semicolons, and parens inside it must NOT be read as structure (an unbalanced `}` in
-    // `url(x}y.png)` or `{` in an inline SVG data-uri would otherwise mis-terminate the
-    // enclosing block). A QUOTED url (`url("...")`) is a normal function + string and is left
-    // to the string branch above. `url` must be a standalone ident, not the tail of a longer
-    // identifier like `myurl(`.
-    if ((c === "u" || c === "U") && /^url\(/i.test(s.slice(i, i + 4))) {
-        const prev = i > 0 ? s[i - 1] : "";
-        if (!/[A-Za-z0-9_-]/.test(prev)) {
-            let j = i + 4;
-            while (j < s.length && /\s/.test(s[j]))
-                j++; // optional leading whitespace
-            if (s[j] !== '"' && s[j] !== "'") {
-                for (; j < s.length; j++) {
-                    if (s[j] === "\\") {
-                        j++; // escaped char inside the url (e.g. `url(foo\)bar)`)
-                        continue;
-                    }
-                    if (s[j] === ")")
-                        return j + 1; // end of url token
-                }
-                return s.length; // unterminated url() — consume to EOF (bad-url)
-            }
-        }
-    }
-    if (c === "\\")
-        return i + 2; // escaped char outside a string (e.g. `.a\,b`)
-    return -1;
-}
-/** Find the first top-level `{` or `;` that ends an at-rule's header. Respects `()` / `[]`
- *  and inert spans (strings/comments/escapes). */
-function findAtRuleHeaderEnd(css, start) {
-    let pDepth = 0;
-    for (let j = start; j < css.length;) {
-        const skip = skipInertSpan(css, j);
-        if (skip !== -1) {
-            j = skip;
-            continue;
-        }
-        const c = css[j];
-        if (c === "(" || c === "[")
-            pDepth++;
-        else if (c === ")" || c === "]")
-            pDepth--;
-        else if (pDepth === 0 && (c === "{" || c === ";"))
-            return j;
-        j++;
-    }
-    return css.length;
-}
-/**
- * Find the matching `}` for the block whose body starts at `blockStart` (char after `{`).
- * Inert spans are skipped so braces inside `content: "}"`, comments, or escapes don't
- * terminate the block early.
- */
-function findBlockEnd(css, blockStart) {
-    let depth = 1;
-    for (let j = blockStart; j < css.length;) {
-        const skip = skipInertSpan(css, j);
-        if (skip !== -1) {
-            j = skip;
-            continue;
-        }
-        const c = css[j];
-        if (c === "{")
-            depth++;
-        else if (c === "}") {
-            depth--;
-            if (depth === 0)
-                return j;
-        }
-        j++;
-    }
-    return css.length;
-}
-/** Find the `{`, `}`, or `;` that terminates a selector list. A `}` or `;` here means the
- *  run was not a real style rule. Respects `()` / `[]` and inert spans. */
-function findSelectorListEnd(css, start) {
-    let pDepth = 0;
-    for (let j = start; j < css.length;) {
-        const skip = skipInertSpan(css, j);
-        if (skip !== -1) {
-            j = skip;
+    const lines = css.split("\n");
+    const scopedLines = [];
+    let inMediaQuery = false;
+    let keyframesDepth = 0;
+    for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed) {
+            scopedLines.push(line);
             continue;
         }
-        const c = css[j];
-        if (c === "(" || c === "[")
-            pDepth++;
-        else if (c === ")" || c === "]")
-            pDepth--;
-        else if (pDepth === 0 && (c === "{" || c === "}" || c === ";"))
-            return j;
-        j++;
-    }
-    return css.length;
-}
-/** Split a selector list on top-level commas. Respects `()` / `[]` and inert spans, so a
- *  comma inside a comment, string, or `\` escape (e.g. `.a\,b`) does not split the list. */
-function splitSelectorList(s) {
-    const result = [];
-    let depth = 0;
-    let start = 0;
-    for (let i = 0; i < s.length;) {
-        const skip = skipInertSpan(s, i);
-        if (skip !== -1) {
-            i = skip;
+        if (trimmed.startsWith("@media")) {
+            inMediaQuery = true;
+            scopedLines.push(line);
             continue;
         }
-        const ch = s[i];
-        if (ch === "(" || ch === "[")
-            depth++;
-        else if (ch === ")" || ch === "]")
-            depth--;
-        else if (ch === "," && depth === 0) {
-            result.push(s.slice(start, i));
-            start = i + 1;
-        }
-        i++;
-    }
-    result.push(s.slice(start));
-    return result;
-}
-/* ============================================================================
- * Global-identifier namespacing.
- *
- * `@keyframes`, `@font-face` font-family names, and `@counter-style` names live in a
- * DOCUMENT-GLOBAL namespace — scoping selectors with `.cc_<id>` does not isolate them, so
- * two components (or the theme) defining the same name would collide (last definition wins
- * document-wide). `renameCollidingGlobals` prefixes every such name DEFINED in this CSS,
- * plus its references within the SAME CSS, with the component's scope prefix.
- *
- * Only names defined in THIS css are renamed — a reference to a name defined elsewhere
- * (global.css, a shared chunk, the theme) is left untouched, so cross-file references keep
- * resolving. Shared-chunk CSS (scopeCSSMulti) is intentionally NOT renamed, to avoid
- * breaking a chunk-defined keyframe referenced from a consuming component's own CSS.
- *
- * NOTE: ported from packages/editor-models/src/helpers/code-component-css-scope.ts
- * (renameCollidingGlobals + helpers, the global.css path's `cc_<projectId>_` variant).
- * Keep parsing/rename fixes in sync between the two.
- * ============================================================================ */
-// Declarations whose VALUE may reference a global identifier of the given type.
-const KEYFRAME_REF_PROPS = new Set(["animation", "animation-name"]);
-const FONT_FAMILY_REF_PROPS = new Set(["font", "font-family"]);
-const COUNTER_STYLE_REF_PROPS = new Set(["list-style", "list-style-type"]);
-function renameCollidingGlobals(css, prefix) {
-    // Comment/string/url-masked copy: defining-site regex scans run against this so a name
-    // inside a comment or `content: "..."` string can't contribute a rename or be rewritten.
-    const scanCss = maskInertSpans(css);
-    const keyframeNames = new Set();
-    const fontFamilyNames = new Set();
-    const counterStyleNames = new Set();
-    let out = css;
-    out = out.replace(/@keyframes(\s+)([\w-]+)/g, (m, ws, name, offset) => {
-        if (scanCss.substr(offset, 10) !== "@keyframes")
-            return m;
-        keyframeNames.add(name);
-        return `@keyframes${ws}${prefix}${name}`;
-    });
-    out = out.replace(/@counter-style(\s+)([\w-]+)/g, (m, ws, name, offset) => {
-        if (scanCss.substr(offset, 14) !== "@counter-style")
-            return m;
-        counterStyleNames.add(name);
-        return `@counter-style${ws}${prefix}${name}`;
-    });
-    out = rewriteFontFaceBlocks(out, fontFamilyNames, prefix);
-    if (keyframeNames.size === 0 && fontFamilyNames.size === 0 && counterStyleNames.size === 0) {
-        return out;
-    }
-    return rewriteDeclarationReferences(out, keyframeNames, fontFamilyNames, counterStyleNames, prefix);
-}
-/** Replace every inert span (comment / string / url() / escape) with equal-length spaces so
- *  position-based regex scans still align but can't match tokens hidden inside them. */
-function maskInertSpans(css) {
-    let out = "";
-    for (let i = 0; i < css.length;) {
-        const skip = skipInertSpan(css, i);
-        if (skip !== -1) {
-            out += " ".repeat(skip - i);
-            i = skip;
+        if (trimmed.startsWith("@keyframes") || trimmed.startsWith("@-webkit-keyframes")) {
+            keyframesDepth = 1;
+            scopedLines.push(line);
             continue;
         }
-        out += css[i];
-        i++;
-    }
-    return out;
-}
-function rewriteFontFaceBlocks(css, collect, prefix) {
-    const matches = [];
-    css.replace(/@font-face\s*\{/g, (m, offset) => {
-        matches.push({ index: offset, length: m.length });
-        return m;
-    });
-    if (matches.length === 0)
-        return css;
-    let out = "";
-    let lastIdx = 0;
-    for (const match of matches) {
-        const openBraceIdx = match.index + match.length - 1;
-        if (openBraceIdx < lastIdx)
-            continue;
-        const endIdx = findBlockEnd(css, openBraceIdx + 1);
-        const before = css.slice(lastIdx, openBraceIdx + 1);
-        const body = css.slice(openBraceIdx + 1, endIdx);
-        const rewrittenBody = body.replace(/(font-family\s*:\s*)(?:"([^"]+)"|'([^']+)'|([\w-]+))/i, (_m, pre, dq, sq, bare) => {
-            const name = dq || sq || bare;
-            if (!name)
-                return _m;
-            collect.add(name);
-            const prefixed = `${prefix}${name}`;
-            if (dq)
-                return `${pre}"${prefixed}"`;
-            if (sq)
-                return `${pre}'${prefixed}'`;
-            return `${pre}${prefixed}`;
-        });
-        out += before + rewrittenBody + "}";
-        lastIdx = endIdx + 1;
-    }
-    out += css.slice(lastIdx);
-    return out;
-}
-function rewriteDeclarationReferences(css, keyframeNames, fontFamilyNames, counterStyleNames, prefix) {
-    const keyframeRe = buildBareIdentRegex(keyframeNames);
-    const fontFamilyRe = buildFontFamilyValueRegex(fontFamilyNames);
-    const counterStyleRe = buildBareIdentRegex(counterStyleNames);
-    // counter(<name>, <style>?) / counters(<name>, <string>, <style>?) — the counter-style
-    // identifier, when present, is always the LAST optional argument.
-    const counterFnRe = counterStyleNames.size > 0
-        ? new RegExp(`(\\bcounters?\\([^)]*?,\\s*)(${bareUnion(counterStyleNames)})(\\s*\\))`, "gi")
-        : null;
-    return mapRuleBlocks(css, block => {
-        return mapDeclarations(block, (prop, value) => {
-            let v = value;
-            const lower = prop.toLowerCase();
-            if (keyframeRe && KEYFRAME_REF_PROPS.has(lower)) {
-                v = v.replace(keyframeRe, m => `${prefix}${m}`);
-            }
-            if (fontFamilyRe && FONT_FAMILY_REF_PROPS.has(lower)) {
-                v = v.replace(fontFamilyRe, (m, dq, sq, bare) => {
-                    const name = dq || sq || bare;
-                    if (!name || !fontFamilyNames.has(name))
-                        return m;
-                    if (dq !== undefined)
-                        return `"${prefix}${name}"`;
-                    if (sq !== undefined)
-                        return `'${prefix}${name}'`;
-                    return `${prefix}${name}`;
-                });
-            }
-            if (counterStyleRe && COUNTER_STYLE_REF_PROPS.has(lower)) {
-                v = v.replace(counterStyleRe, m => `${prefix}${m}`);
+        // Inside @keyframes: track brace depth, pass lines through unscoped
+        if (keyframesDepth > 0) {
+            for (const ch of trimmed) {
+                if (ch === "{")
+                    keyframesDepth++;
+                else if (ch === "}")
+                    keyframesDepth--;
             }
-            if (counterFnRe) {
-                v = v.replace(counterFnRe, (_m, pre, name, post) => `${pre}${prefix}${name}${post}`);
-            }
-            return v;
-        });
-    });
-}
-function bareUnion(names) {
-    return Array.from(names).map(escapeRegex).join("|");
-}
-function buildBareIdentRegex(names) {
-    if (names.size === 0)
-        return null;
-    return new RegExp(`(?<![\\w-])(?:${bareUnion(names)})(?![\\w-])`, "g");
-}
-function buildFontFamilyValueRegex(names) {
-    if (names.size === 0)
-        return null;
-    const u = bareUnion(names);
-    return new RegExp(`"(${u})"|'(${u})'|(?<![\\w-])(${u})(?![\\w-])`, "g");
-}
-function escapeRegex(s) {
-    return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-/**
- * Walk every top-level rule block `{ ... }` (recursing into nested at-rule contents) and
- * pass the block body through `transform`. Inert spans are skipped so a `{` inside a string
- * or `url(a{b)` is not mistaken for a block. At-rule preambles and inter-rule whitespace
- * are left untouched.
- */
-function mapRuleBlocks(css, transform) {
-    let out = "";
-    for (let i = 0; i < css.length;) {
-        const skip = skipInertSpan(css, i);
-        if (skip !== -1) {
-            out += css.slice(i, skip);
-            i = skip;
-            continue;
-        }
-        if (css[i] === "{") {
-            const blockEnd = findBlockEnd(css, i + 1);
-            const body = css.slice(i + 1, blockEnd);
-            const processed = hasTopLevelBrace(body) ? mapRuleBlocks(body, transform) : transform(body);
-            out += "{" + processed + "}";
-            i = blockEnd + 1;
+            scopedLines.push(line);
             continue;
         }
-        out += css[i];
-        i++;
-    }
-    return out;
-}
-/** Inert-span-aware: true iff a real `{` appears outside comments/strings/url()/escapes. */
-function hasTopLevelBrace(s) {
-    for (let i = 0; i < s.length;) {
-        const skip = skipInertSpan(s, i);
-        if (skip !== -1) {
-            i = skip;
+        if (trimmed === "}" && inMediaQuery) {
+            inMediaQuery = false;
+            scopedLines.push(line);
             continue;
         }
-        if (s[i] === "{")
-            return true;
-        i++;
-    }
-    return false;
-}
-/**
- * Split a rule block body into `prop: value` declarations on top-level `;`, apply
- * `transform(prop, value)` to each, and rejoin preserving separators. Inert spans are
- * skipped so a `;` inside a string or `url(a;b)` doesn't split a declaration.
- */
-function mapDeclarations(body, transform) {
-    const parts = [];
-    let start = 0;
-    let pDepth = 0;
-    for (let i = 0; i < body.length;) {
-        const skip = skipInertSpan(body, i);
-        if (skip !== -1) {
-            i = skip;
+        if (!trimmed.includes("{") || trimmed.startsWith("@")) {
+            scopedLines.push(line);
             continue;
         }
-        const c = body[i];
-        if (c === "(" || c === "[" || c === "{")
-            pDepth++;
-        else if (c === ")" || c === "]" || c === "}")
-            pDepth--;
-        else if (c === ";" && pDepth === 0) {
-            parts.push(body.slice(start, i));
-            start = i + 1;
+        const [selector, rest] = line.split("{");
+        if (selector && rest !== undefined) {
+            const scopedSelector = selector
+                .split(",")
+                .flatMap((s) => scopeClasses.map(cls => `.${cls} ${s.trim()}`))
+                .join(", ");
+            scopedLines.push(`${scopedSelector} {${rest}`);
         }
-        i++;
-    }
-    parts.push(body.slice(start));
-    return parts
-        .map((part, idx) => {
-        const isLast = idx === parts.length - 1;
-        const colonIdx = findTopLevelColon(part);
-        if (colonIdx === -1)
-            return part + (isLast ? "" : ";");
-        const valueRaw = part.slice(colonIdx + 1);
-        const leading = valueRaw.match(/^\s*/)?.[0] ?? "";
-        const trailing = valueRaw.match(/\s*$/)?.[0] ?? "";
-        const prop = part.slice(0, colonIdx).trim();
-        const value = valueRaw.slice(leading.length, valueRaw.length - trailing.length);
-        const transformed = transform(prop, value);
-        return part.slice(0, colonIdx) + ":" + leading + transformed + trailing + (isLast ? "" : ";");
-    })
-        .join("");
-}
-function findTopLevelColon(s) {
-    let pDepth = 0;
-    for (let i = 0; i < s.length;) {
-        const skip = skipInertSpan(s, i);
-        if (skip !== -1) {
-            i = skip;
-            continue;
+        else {
+            scopedLines.push(line);
         }
-        const c = s[i];
-        if (c === "(" || c === "[")
-            pDepth++;
-        else if (c === ")" || c === "]")
-            pDepth--;
-        else if (c === ":" && pDepth === 0)
-            return i;
-        i++;
     }
-    return -1;
+    return scopedLines.join("\n");
 }
 /**
  * Common esbuild options shared between server and client builds