@ikas/component-cli 1.4.0-beta.15 → 1.4.0-beta.150

package/dist/utils/compile.js

@@ -4,34 +4,64 @@ import * as os from "os";
 import * as path from "path";
 import { resolveCssImports } from "./css-import-resolver.js";
 import { ikasComponentUtilsPlugin } from "./observer-runtime.js";
+import { forbidDeepStorefrontImportsPlugin } from "./forbid-deep-imports.js";
+import { forbidExternalPackagesPlugin } from "./forbid-external-packages.js";
 /**
- * Shim file that tells esbuild `h` and `Fragment` are reserved identifiers.
- * Unlike `banner` (which is appended after minification), `inject` is processed
- * during compilation so the minifier will never reuse these names.
+ * Shim that provides the JSX factory/fragment under collision-proof names.
+ *
+ * The classic JSX pragma must be a bare identifier in scope. Using `h`/`Fragment`
+ * directly means any user-authored local named `h` or `Fragment` (e.g. a `.map`
+ * callback param) shadows the factory, so JSX in that scope compiles to a call on
+ * the local value → runtime "x is not a function". Aliasing to `__ikas_h` /
+ * `__ikas_Fragment` (names users won't write) eliminates that shadowing footgun.
+ *
+ * Unlike `banner` (appended after minification), `inject` is processed during
+ * compilation so the minifier will never reuse these names. The bundled import
+ * still references preact's `h`/`Fragment`, so the canvas esm-transform keying off
+ * those source export names is unaffected.
  */
 const PREACT_JSX_SHIM = path.join(os.tmpdir(), "ikas-preact-jsx-shim.mjs");
-fs.writeFileSync(PREACT_JSX_SHIM, 'export{h,Fragment}from"preact";\n');
+fs.writeFileSync(PREACT_JSX_SHIM, 'export{h as __ikas_h,Fragment as __ikas_Fragment}from"preact";\n');
 /**
- * External dependencies - these will be provided by the generated storefront
+ * External dependencies - these will be provided by the generated storefront.
+ *
+ * The `@ikas/bp-storefront*` packages are intentionally NOT listed here: they are externalized
+ * by `forbidDeepStorefrontImportsPlugin()` instead, which externalizes the allowed ROOT import
+ * and rejects private deep subpaths. (esbuild applies this `external` array before plugin
+ * onResolve, so keeping them here would let `/dist/...` deep imports slip through unchecked.)
  */
 const SERVER_EXTERNALS = [
     "preact",
     "preact/hooks",
     "preact-render-to-string",
-    "mobx",
-    "@ikas/bp-storefront",
-    "@ikas/bp-storefront-models",
-    "@ikas/bp-storefront-config",
-    "@ikas/bp-storefront-api"
+    "mobx"
 ];
 const CLIENT_EXTERNALS = [
     "preact",
     "preact/hooks",
-    "mobx",
-    "@ikas/bp-storefront",
-    "@ikas/bp-storefront-models",
-    "@ikas/bp-storefront-config"
+    "mobx"
 ];
+/**
+ * The server and client builds MUST compile with the SAME esbuild `target` so
+ * syntax is lowered identically and code-split shared chunks come out
+ * byte-identical (same content hash) on both sides.
+ *
+ * If the targets diverge (previously server=node18 vs client=es2020), esbuild
+ * lowers modern syntax differently: e.g. a class field (`x = 1`, ES2022) stays
+ * native on node18 but is down-leveled into a `__publicField` helper on es2020.
+ * That helper lands in the shared runtime-helper chunk, so the helper chunk's
+ * hash differs between builds — and every chunk that imports it by hashed name
+ * (`./chunk-<hash>.js`) diverges too. The result is "server-only" shared chunks
+ * with no client twin, which the client-derived `usedSharedModuleIds` never
+ * lists, so they get pruned/dropped downstream ("Could not resolve
+ * ./chunk-XXXX.js" at SSR build).
+ *
+ * es2020 is the floor the browser build needs; node18 executes es2020 fine, so
+ * both builds use es2020 and produce identical shared chunks. Keep this the
+ * single source of truth for both `platform: node` and `platform: browser`
+ * builds — do not set per-build `target` overrides.
+ */
+const SHARED_BUILD_TARGET = "es2020";
 /**
  * Compile a single component's TSX and CSS
  */
@@ -43,10 +73,14 @@ export async function compileComponent(entryPath, stylesPath, componentId) {
             entryPoints: [path.resolve(process.cwd(), entryPath)],
             format: "esm",
             platform: "node",
-            target: "node18",
+            target: SHARED_BUILD_TARGET,
             write: false,
             external: SERVER_EXTERNALS,
-            plugins: [ikasComponentUtilsPlugin()],
+            plugins: [
+                forbidDeepStorefrontImportsPlugin(),
+                forbidExternalPackagesPlugin(),
+                ikasComponentUtilsPlugin(),
+            ],
         });
         // Build client bundle (for hydration)
         const clientResult = await esbuild.build({
@@ -54,10 +88,14 @@ export async function compileComponent(entryPath, stylesPath, componentId) {
             entryPoints: [path.resolve(process.cwd(), entryPath)],
             format: "esm",
             platform: "browser",
-            target: "es2020",
+            target: SHARED_BUILD_TARGET,
             write: false,
             external: CLIENT_EXTERNALS,
-            plugins: [ikasComponentUtilsPlugin()],
+            plugins: [
+                forbidDeepStorefrontImportsPlugin(),
+                forbidExternalPackagesPlugin(),
+                ikasComponentUtilsPlugin(),
+            ],
         });
         // Read CSS (with import resolution)
         const cssPath = path.resolve(process.cwd(), stylesPath);
@@ -86,11 +124,15 @@ export async function compileComponent(entryPath, stylesPath, componentId) {
     }
 }
 /**
- * Scope CSS selectors with a component-specific class prefix
+ * 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.
  */
 export function scopeCSS(css, componentId) {
     const scopeClass = `cc_${componentId.replace(/[^a-zA-Z0-9]/g, "_")}`;
-    return scopeCSSWithClasses(css, [scopeClass]);
+    const scoped = scopeCSSWithClasses(css, [scopeClass]);
+    return renameCollidingGlobals(scoped, `${scopeClass}_`);
 }
 /**
  * Scope CSS selectors with multiple class prefixes (for shared chunks).
@@ -100,63 +142,519 @@ 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
+ * 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).
  */
 function scopeCSSWithClasses(css, scopeClasses) {
-    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);
+    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;
         }
-        if (trimmed.startsWith("@media")) {
-            inMediaQuery = true;
-            scopedLines.push(line);
+        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;
         }
-        if (trimmed.startsWith("@keyframes") || trimmed.startsWith("@-webkit-keyframes")) {
-            keyframesDepth = 1;
-            scopedLines.push(line);
+        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;
+            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;
+            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;
             continue;
         }
-        // Inside @keyframes: track brace depth, pass lines through unscoped
-        if (keyframesDepth > 0) {
-            for (const ch of trimmed) {
-                if (ch === "{")
-                    keyframesDepth++;
-                else if (ch === "}")
-                    keyframesDepth--;
+        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}`;
+                });
             }
-            scopedLines.push(line);
+            if (counterStyleRe && COUNTER_STYLE_REF_PROPS.has(lower)) {
+                v = v.replace(counterStyleRe, m => `${prefix}${m}`);
+            }
+            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;
             continue;
         }
-        if (trimmed === "}" && inMediaQuery) {
-            inMediaQuery = false;
-            scopedLines.push(line);
+        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;
             continue;
         }
-        if (!trimmed.includes("{") || trimmed.startsWith("@")) {
-            scopedLines.push(line);
+        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;
             continue;
         }
-        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}`);
+        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;
         }
-        else {
-            scopedLines.push(line);
+        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;
         }
+        const c = s[i];
+        if (c === "(" || c === "[")
+            pDepth++;
+        else if (c === ")" || c === "]")
+            pDepth--;
+        else if (c === ":" && pDepth === 0)
+            return i;
+        i++;
     }
-    return scopedLines.join("\n");
+    return -1;
 }
 /**
  * Common esbuild options shared between server and client builds
@@ -165,14 +663,14 @@ function commonBuildOptions() {
     return {
         bundle: true,
         jsx: "transform",
-        jsxFactory: "h",
-        jsxFragment: "Fragment",
+        jsxFactory: "__ikas_h",
+        jsxFragment: "__ikas_Fragment",
         inject: [PREACT_JSX_SHIM],
         tsconfigRaw: {
             compilerOptions: {
                 jsx: "react",
-                jsxFactory: "h",
-                jsxFragmentFactory: "Fragment"
+                jsxFactory: "__ikas_h",
+                jsxFragmentFactory: "__ikas_Fragment"
             }
         },
         minify: true,
@@ -206,19 +704,24 @@ export async function compileAllComponents(components, globalStylesPath) {
         entryPoints[comp.id] = path.resolve(process.cwd(), comp.entryPath);
     }
     try {
-        // Server build with code splitting
-        await esbuild.build({
+        // Server build with code splitting (metafile enabled for dependency tracking)
+        const serverBuildResult = await esbuild.build({
             ...commonBuildOptions(),
             entryPoints,
             format: "esm",
             platform: "node",
-            target: "node18",
+            target: SHARED_BUILD_TARGET,
             external: SERVER_EXTERNALS,
-            plugins: [ikasComponentUtilsPlugin()],
+            plugins: [
+                forbidDeepStorefrontImportsPlugin(),
+                forbidExternalPackagesPlugin(),
+                ikasComponentUtilsPlugin(),
+            ],
             splitting: true,
             outdir: serverDir,
             entryNames: "[name]",
             chunkNames: "chunk-[hash]",
+            metafile: true,
         });
         // Client build with code splitting (metafile enabled for dependency tracking)
         const clientBuildResult = await esbuild.build({
@@ -226,9 +729,13 @@ export async function compileAllComponents(components, globalStylesPath) {
             entryPoints,
             format: "esm",
             platform: "browser",
-            target: "es2020",
+            target: SHARED_BUILD_TARGET,
             external: CLIENT_EXTERNALS,
-            plugins: [ikasComponentUtilsPlugin()],
+            plugins: [
+                forbidDeepStorefrontImportsPlugin(),
+                forbidExternalPackagesPlugin(),
+                ikasComponentUtilsPlugin(),
+            ],
             splitting: true,
             outdir: clientDir,
             entryNames: "[name]",
@@ -269,17 +776,29 @@ export async function compileAllComponents(components, globalStylesPath) {
                 chunks.set(key, { serverJs, clientJs });
             }
         }
-        // Build dependency maps from metafile
-        const metafile = clientBuildResult.metafile;
+        // Build dependency maps from BOTH the server and client metafiles.
+        //
+        // Only the client metafile used to be consulted here. But SERVER_EXTERNALS
+        // differs from CLIENT_EXTERNALS (e.g. preact-render-to-string is external on
+        // the server only), so esbuild splits the two builds differently and emits
+        // server-only shared chunks whose names have no client twin. Those chunks are
+        // written to disk and captured in `chunks` above, yet — with a client-only
+        // graph — they never entered any component's chunk closure, so publish pruned
+        // them as orphaned. The result: `compiledServerJs` went missing on the shared
+        // module and the server bundle imported a `./chunk-XXXX.js` that was never
+        // emitted ("Could not resolve ./chunk-XXXX.js"). Merging both graphs keeps
+        // server and client chunk closures symmetric.
+        const clientMetafile = clientBuildResult.metafile;
+        const serverMetafile = serverBuildResult.metafile;
         const entryDirSet = new Map(); // entryId → absolute dir of entry file
         for (const comp of components) {
             entryDirSet.set(comp.id, path.dirname(path.resolve(process.cwd(), comp.entryPath)));
         }
-        // Map each output to its input source files
+        // CSS is a browser-only concern, so entry/chunk input source maps are derived
+        // from the CLIENT metafile only (they feed the CSS collection passes below).
         const entryInputs = new Map(); // entryId → list of input paths
         const chunkInputs = new Map(); // chunkId → list of input paths
-        const chunkConsumers = new Map(); // chunkId → list of entry IDs that import it
-        for (const [outputPath, outputMeta] of Object.entries(metafile.outputs)) {
+        for (const [outputPath, outputMeta] of Object.entries(clientMetafile.outputs)) {
             const baseName = path.basename(outputPath, ".js");
             const inputPaths = Object.keys(outputMeta.inputs || {});
             if (entryIds.has(baseName)) {
@@ -289,40 +808,49 @@ export async function compileAllComponents(components, globalStylesPath) {
                 chunkInputs.set(baseName, inputPaths);
             }
         }
-        // Determine chunk→consumers: which entries import each chunk
-        for (const [outputPath, outputMeta] of Object.entries(metafile.outputs)) {
-            const baseName = path.basename(outputPath, ".js");
-            if (!entryIds.has(baseName))
-                continue;
-            const imports = outputMeta.imports || [];
-            for (const imp of imports) {
-                const impBaseName = path.basename(imp.path, ".js");
-                if (chunkInputs.has(impBaseName)) {
-                    if (!chunkConsumers.has(impBaseName)) {
-                        chunkConsumers.set(impBaseName, []);
-                    }
-                    chunkConsumers.get(impBaseName).push(baseName);
-                }
-            }
-        }
-        // Build chunk→chunk dependency graph and topologically sort chunks
-        // so that chunks are evaluated in dependency-first order
+        // Recognize any emitted chunk — server OR client — by its output basename.
+        // `chunks` was populated above from both the server and client output dirs.
+        const allChunkIds = new Set(chunks.keys());
+        const chunkConsumers = new Map(); // chunkId → list of entry IDs that import it
         const chunkDeps = new Map(); // chunkId → list of chunk IDs it depends on
-        for (const chunkId of chunkInputs.keys()) {
+        for (const chunkId of allChunkIds) {
             chunkDeps.set(chunkId, []);
         }
-        for (const [outputPath, outputMeta] of Object.entries(metafile.outputs)) {
-            const baseName = path.basename(outputPath, ".js");
-            if (!chunkInputs.has(baseName))
-                continue;
-            const imports = outputMeta.imports || [];
-            for (const imp of imports) {
-                const impBaseName = path.basename(imp.path, ".js");
-                if (chunkInputs.has(impBaseName) && impBaseName !== baseName) {
-                    chunkDeps.get(baseName).push(impBaseName);
+        // Fold one metafile's output graph into the shared consumer/dependency maps.
+        // Called for both builds so server-only chunks are tracked alongside client ones.
+        const ingestMetafile = (mf) => {
+            for (const [outputPath, outputMeta] of Object.entries(mf.outputs)) {
+                const baseName = path.basename(outputPath, ".js");
+                const imports = outputMeta.imports || [];
+                if (entryIds.has(baseName)) {
+                    // entry → chunk consumer edges
+                    for (const imp of imports) {
+                        const impBaseName = path.basename(imp.path, ".js");
+                        if (!allChunkIds.has(impBaseName))
+                            continue;
+                        if (!chunkConsumers.has(impBaseName)) {
+                            chunkConsumers.set(impBaseName, []);
+                        }
+                        const consumers = chunkConsumers.get(impBaseName);
+                        if (!consumers.includes(baseName))
+                            consumers.push(baseName);
+                    }
+                }
+                else if (allChunkIds.has(baseName)) {
+                    // chunk → chunk dependency edges
+                    for (const imp of imports) {
+                        const impBaseName = path.basename(imp.path, ".js");
+                        if (allChunkIds.has(impBaseName) && impBaseName !== baseName) {
+                            const deps = chunkDeps.get(baseName);
+                            if (!deps.includes(impBaseName))
+                                deps.push(impBaseName);
+                        }
+                    }
                 }
             }
-        }
+        };
+        ingestMetafile(clientMetafile);
+        ingestMetafile(serverMetafile);
         // Kahn's algorithm for topological sort
         const inDegree = new Map();
         for (const chunkId of chunkDeps.keys()) {