@ethisyscore/vite-plugin 1.59.0 → 1.62.0

package/dist/index.cjs

@@ -607,6 +607,327 @@ function titleCase(s) {
 function escapeRegExp(s) {
   return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
+
+// src/platform-react/scope-plugin-css.ts
+var EHX_PLUGIN_CSS_SCOPE = ":where(.ehx-plugin-root, [data-ehx-plugin-portal])";
+var EHX_PLUGIN_ROOT_SCOPE = ":is(.ehx-plugin-root, [data-ehx-plugin-portal])";
+var EHX_SCOPED_CSS_LAYERS = ["utilities", "properties"];
+var VERBATIM_AT_RULES = /* @__PURE__ */ new Set([
+  "keyframes",
+  "-webkit-keyframes",
+  "property",
+  "font-face",
+  "font-feature-values",
+  "font-palette-values",
+  "counter-style",
+  "page",
+  "viewport"
+]);
+var CONDITIONAL_AT_RULES = /* @__PURE__ */ new Set([
+  "media",
+  "supports",
+  "container",
+  "layer",
+  "scope",
+  "starting-style",
+  "document",
+  "-moz-document"
+]);
+var EHX_PLUGIN_SCOPE_ROOTS = [
+  /\.ehx-plugin-root\b/,
+  /\.ethisys-[a-z0-9-]+-root\b/,
+  /\[data-ehx-plugin-portal\]/
+];
+var DOCUMENT_ROOT_PREFIX = /^:(?:root|host)\b/;
+function isSpace(ch) {
+  return ch === " " || ch === "\n" || ch === "	" || ch === "\r" || ch === "\f";
+}
+function skipString(css, i) {
+  const quote = css[i];
+  let j = i + 1;
+  while (j < css.length) {
+    const ch = css[j];
+    if (ch === "\\") {
+      j += 2;
+      continue;
+    }
+    if (ch === quote) return j + 1;
+    j++;
+  }
+  return j;
+}
+function skipComment(css, i) {
+  const end = css.indexOf("*/", i + 2);
+  return end === -1 ? css.length : end + 2;
+}
+function readPrelude(css, i) {
+  let j = i;
+  let depth = 0;
+  while (j < css.length) {
+    const ch = css[j];
+    if (ch === "\\") {
+      j += 2;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      j = skipString(css, j);
+      continue;
+    }
+    if (ch === "/" && css[j + 1] === "*") {
+      j = skipComment(css, j);
+      continue;
+    }
+    if (ch === "(" || ch === "[") {
+      depth++;
+    } else if (ch === ")" || ch === "]") {
+      if (depth > 0) depth--;
+    } else if (depth === 0) {
+      if (ch === "{") return { end: j, terminator: "{" };
+      if (ch === ";") return { end: j + 1, terminator: ";" };
+      if (ch === "}") return { end: j, terminator: "" };
+    }
+    j++;
+  }
+  return { end: css.length, terminator: "" };
+}
+function matchBrace(css, open) {
+  let j = open + 1;
+  let depth = 1;
+  while (j < css.length) {
+    const ch = css[j];
+    if (ch === "\\") {
+      j += 2;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      j = skipString(css, j);
+      continue;
+    }
+    if (ch === "/" && css[j + 1] === "*") {
+      j = skipComment(css, j);
+      continue;
+    }
+    if (ch === "{") depth++;
+    else if (ch === "}") {
+      depth--;
+      if (depth === 0) return j + 1;
+    }
+    j++;
+  }
+  return css.length;
+}
+function splitTopLevel(text) {
+  const parts = [];
+  let depth = 0;
+  let start = 0;
+  let j = 0;
+  while (j < text.length) {
+    const ch = text[j];
+    if (ch === "\\") {
+      j += 2;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      j = skipString(text, j);
+      continue;
+    }
+    if (ch === "/" && text[j + 1] === "*") {
+      j = skipComment(text, j);
+      continue;
+    }
+    if (ch === "(" || ch === "[") depth++;
+    else if (ch === ")" || ch === "]") {
+      if (depth > 0) depth--;
+    } else if (ch === "," && depth === 0) {
+      parts.push(text.slice(start, j));
+      start = j + 1;
+    }
+    j++;
+  }
+  parts.push(text.slice(start));
+  return parts;
+}
+function atRuleName(prelude) {
+  const m = /^@([\w-]*)/.exec(prelude.trim());
+  return (m?.[1] ?? "").toLowerCase();
+}
+function layerNames(prelude) {
+  const body = prelude.trim().replace(/^@layer\s*/i, "");
+  return splitTopLevel(body).map((n) => n.trim()).filter(Boolean);
+}
+function rewriteSelector(selector, ctx, prefixing) {
+  if (DOCUMENT_ROOT_PREFIX.test(selector)) {
+    return selector.replace(DOCUMENT_ROOT_PREFIX, ctx.rootScope);
+  }
+  if (!prefixing) return selector;
+  if (selector.startsWith(ctx.scope) || selector.startsWith(ctx.rootScope)) return selector;
+  return `${ctx.scope} ${selector}`;
+}
+function rewriteSelectorList(selectors, ctx, prefixing) {
+  const seen = /* @__PURE__ */ new Set();
+  let changed = false;
+  for (const part of splitTopLevel(selectors)) {
+    const trimmed = part.trim();
+    if (trimmed.length === 0) continue;
+    const rewritten = rewriteSelector(trimmed, ctx, prefixing);
+    if (rewritten !== trimmed) changed = true;
+    seen.add(rewritten);
+  }
+  return changed ? [...seen].join(",\n") : selectors;
+}
+function walk(css, scoping, ctx) {
+  let out = "";
+  let i = 0;
+  while (i < css.length) {
+    const ch = css[i];
+    if (isSpace(ch)) {
+      out += ch;
+      i++;
+      continue;
+    }
+    if (ch === "/" && css[i + 1] === "*") {
+      const end2 = skipComment(css, i);
+      out += css.slice(i, end2);
+      i = end2;
+      continue;
+    }
+    if (ch === "}") {
+      out += ch;
+      i++;
+      continue;
+    }
+    const { end, terminator } = readPrelude(css, i);
+    if (terminator !== "{") {
+      out += css.slice(i, end);
+      i = end;
+      continue;
+    }
+    const raw = css.slice(i, end);
+    const blockEnd = matchBrace(css, end);
+    const inner = css.slice(end + 1, blockEnd - 1);
+    if (raw.trimStart().startsWith("@")) {
+      const name = atRuleName(raw);
+      if (VERBATIM_AT_RULES.has(name) || !CONDITIONAL_AT_RULES.has(name)) {
+        out += css.slice(i, blockEnd);
+      } else {
+        const nextScoping = name === "layer" ? scoping || layerNames(raw).some((n) => ctx.layers.has(n)) : scoping;
+        out += `${raw}{${walk(inner, nextScoping, ctx)}}`;
+      }
+    } else {
+      const trailing = /\s*$/.exec(raw)?.[0] ?? "";
+      const selectors = raw.slice(0, raw.length - trailing.length);
+      const rewritten = rewriteSelectorList(selectors, ctx, scoping);
+      out += rewritten === selectors ? css.slice(i, blockEnd) : `${rewritten}${trailing}{${inner}}`;
+    }
+    i = blockEnd;
+  }
+  return out;
+}
+function scopePluginCss(css, options = {}) {
+  const ctx = {
+    scope: options.scope ?? EHX_PLUGIN_CSS_SCOPE,
+    rootScope: options.rootScope ?? EHX_PLUGIN_ROOT_SCOPE,
+    layers: new Set(options.layers ?? EHX_SCOPED_CSS_LAYERS)
+  };
+  return walk(css, false, ctx);
+}
+function findUnscopedSelectors(css, options = {}) {
+  const roots = options.scopeRoots ?? EHX_PLUGIN_SCOPE_ROOTS;
+  const found = [];
+  collectSelectors(css, (selector) => {
+    if (!roots.some((re) => re.test(selector))) found.push(selector);
+  });
+  return found;
+}
+function collectSelectors(css, visit) {
+  let i = 0;
+  while (i < css.length) {
+    const ch = css[i];
+    if (isSpace(ch) || ch === "}") {
+      i++;
+      continue;
+    }
+    if (ch === "/" && css[i + 1] === "*") {
+      i = skipComment(css, i);
+      continue;
+    }
+    const { end, terminator } = readPrelude(css, i);
+    if (terminator !== "{") {
+      i = end;
+      continue;
+    }
+    const raw = css.slice(i, end).trim();
+    const blockEnd = matchBrace(css, end);
+    if (raw.startsWith("@")) {
+      const name = atRuleName(raw);
+      if (CONDITIONAL_AT_RULES.has(name) && !VERBATIM_AT_RULES.has(name)) {
+        collectSelectors(css.slice(end + 1, blockEnd - 1), visit);
+      }
+    } else {
+      for (const part of splitTopLevel(raw)) {
+        const selector = part.trim();
+        if (selector.length > 0 && !selector.startsWith("&")) visit(selector);
+      }
+    }
+    i = blockEnd;
+  }
+}
+var MAX_REPORTED_LEAKS = 12;
+function formatUnscopedSelectorError(id, leaks) {
+  const shown = leaks.slice(0, MAX_REPORTED_LEAKS);
+  const more = leaks.length - shown.length;
+  return [
+    `${leaks.length} selector(s) in ${id} would leak into the host document.`,
+    "",
+    "A plugin's compiled CSS is injected into the HOST <head>, so every selector must",
+    "be scoped to a plugin root (`.ehx-plugin-root`, `.ethisys-<name>-root`) or the",
+    "portal marker `[data-ehx-plugin-portal]`. Unscoped selectors restyle host chrome.",
+    "",
+    ...shown.map((s) => `  ${s}`),
+    ...more > 0 ? [`  \u2026 and ${more} more`] : [],
+    "",
+    'Most common cause: `@import "tailwindcss"` re-emits Tailwind\'s global preflight.',
+    "Use the split import so the host's own preflight governs shared resets:",
+    '  @import "@ethisyscore/plugin-ui/plugin-base.css";',
+    '  @import "tailwindcss/theme.css" layer(theme) source(none);',
+    '  @import "tailwindcss/utilities.css" layer(utilities) source(none);'
+  ].join("\n");
+}
+function isScopableCssId(id) {
+  const qIndex = id.indexOf("?");
+  const path = qIndex === -1 ? id : id.slice(0, qIndex);
+  const query = qIndex === -1 ? "" : id.slice(qIndex + 1);
+  if (!path.endsWith(".css")) return false;
+  if (path.endsWith(".module.css")) return false;
+  if (/(?:^|&)(?:raw|url)(?:=|&|$)/.test(query)) return false;
+  return true;
+}
+function scopePluginCssPlugin(options = {}) {
+  return {
+    name: "ethisys-scope-plugin-css",
+    transform(code, id) {
+      if (!isScopableCssId(id)) return null;
+      const scoped = scopePluginCss(code, options);
+      const guard = options.guard ?? "error";
+      if (guard !== "off") {
+        const leaks = findUnscopedSelectors(scoped, options);
+        if (leaks.length > 0) {
+          const message = formatUnscopedSelectorError(id, leaks);
+          const ctx = this;
+          if (guard === "error") {
+            if (ctx?.error) ctx.error(message);
+            throw new Error(message);
+          }
+          if (ctx?.warn) ctx.warn(message);
+          else console.warn(message);
+        }
+      }
+      return scoped === code ? null : { code: scoped, map: null };
+    }
+  };
+}
+
+// src/platform-react/build-pages.ts
 var PLATFORM_REACT_EXTERNALS = [
   "react",
   "react/jsx-runtime",
@@ -705,7 +1026,16 @@ function makeDefaultBuild(viteBuild) {
     await build({
       root: ctx.root,
       configFile: false,
-      plugins: [ctx.surfacePlugin, ...ctx.plugins, rewriteAliasedExternalImports()],
+      // `scopePluginCssPlugin` must sit AFTER the plugin's own `tailwindcss()` in
+      // effect, which it does by enforce ordering, not array position: Tailwind is
+      // `enforce: "pre"`, this one declares none. See its doc for why "none" is the
+      // only position that sees compiled CSS.
+      plugins: [
+        ctx.surfacePlugin,
+        ...ctx.plugins,
+        scopePluginCssPlugin(),
+        rewriteAliasedExternalImports()
+      ],
       resolve: {
         dedupe: [...ctx.dedupe],
         alias: ctx.alias
@@ -849,6 +1179,9 @@ function assertHostOriginRelativePath2(value, label) {
   }
 }
 function ethisysPlatformReactPlugin(options = {}) {
+  return [ethisysPlatformReactPagesPlugin(options), scopePluginCssPlugin()];
+}
+function ethisysPlatformReactPagesPlugin(options = {}) {
   const explicitRoot = options.root;
   const manifestRel = options.manifestPath ?? "feature.manifest.json";
   const outputPrefix = (options.outputPrefix ?? "platform-react/").replace(/\/+$/, "/").replace(/^\/+/, "");
@@ -971,7 +1304,7 @@ function ethisysPlatformReactPlugin(options = {}) {
     }
   }
   let isBuild = false;
-  return {
+  const plugin = {
     name: "ethisys-platform-react",
     // `pre` ordering: validation should fire before user-supplied plugins.
     enforce: "pre",
@@ -1127,6 +1460,7 @@ function ethisysPlatformReactPlugin(options = {}) {
       });
     }
   };
+  return plugin;
 }
 var ID_REGEX2 = /^[a-z0-9]+(?:[-_][a-z0-9]+)*$/i;
 function assertHostOriginRelativePath3(value, label) {
@@ -1256,12 +1590,12 @@ function computePlatformReactPages(input) {
   }
   return { entries, missingViews };
 }
-function walk(dir) {
+function walk2(dir) {
   const out = [];
   for (const n of fs.readdirSync(dir)) {
     const p = path.resolve(dir, n);
     if (fs.statSync(p).isDirectory()) {
-      out.push(...walk(p));
+      out.push(...walk2(p));
     } else {
       out.push(p);
     }
@@ -1282,7 +1616,7 @@ function generatePlatformReactManifest(config) {
   const exclude = new Set(config.paths?.pageExclude ?? []);
   const viewFiles = {};
   if (fs.existsSync(adapterDir)) {
-    for (const f of walk(adapterDir)) {
+    for (const f of walk2(adapterDir)) {
       if (f.endsWith(".tsx")) {
         viewFiles[path.basename(f, ".tsx")] = slash2(path.relative(root, f));
       }
@@ -1706,6 +2040,10 @@ function ethisysManifestPlugin(options = {}) {
 exports.CONTRACT_B_IMPORT_MAP_ALLOWLIST = CONTRACT_B_IMPORT_MAP_ALLOWLIST;
 exports.CONTRACT_B_RUNTIME_IMPORTS = CONTRACT_B_RUNTIME_IMPORTS;
 exports.CONTRACT_B_SEMANTIC_PRIMITIVES = CONTRACT_B_SEMANTIC_PRIMITIVES;
+exports.EHX_PLUGIN_CSS_SCOPE = EHX_PLUGIN_CSS_SCOPE;
+exports.EHX_PLUGIN_ROOT_SCOPE = EHX_PLUGIN_ROOT_SCOPE;
+exports.EHX_PLUGIN_SCOPE_ROOTS = EHX_PLUGIN_SCOPE_ROOTS;
+exports.EHX_SCOPED_CSS_LAYERS = EHX_SCOPED_CSS_LAYERS;
 exports.PLATFORM_REACT_DEDUPE = PLATFORM_REACT_DEDUPE;
 exports.PLATFORM_REACT_EXTERNALS = PLATFORM_REACT_EXTERNALS;
 exports.buildIframeSandboxPages = buildIframeSandboxPages;
@@ -1715,10 +2053,16 @@ exports.ethisysContractAPlugin = ethisysContractAPlugin;
 exports.ethisysContractBPlugin = ethisysContractBPlugin;
 exports.ethisysIframeSandboxPlugin = ethisysIframeSandboxPlugin;
 exports.ethisysManifestPlugin = ethisysManifestPlugin;
+exports.ethisysPlatformReactPagesPlugin = ethisysPlatformReactPagesPlugin;
 exports.ethisysPlatformReactPlugin = ethisysPlatformReactPlugin;
+exports.findUnscopedSelectors = findUnscopedSelectors;
+exports.formatUnscopedSelectorError = formatUnscopedSelectorError;
 exports.generatePlatformReactManifest = generatePlatformReactManifest;
+exports.isScopableCssId = isScopableCssId;
 exports.parsePlatformReactPages = parsePlatformReactPages;
 exports.rewriteAliasedExternalImports = rewriteAliasedExternalImports;
+exports.scopePluginCss = scopePluginCss;
+exports.scopePluginCssPlugin = scopePluginCssPlugin;
 exports.validateDeclarativeResource = validateDeclarativeResource;
 exports.validateReactiveRule = validateReactiveRule;
 exports.virtualPageEntry = virtualPageEntry;