@tokenoftrust/storefront-runner 2.0.49 → 2.0.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenoftrust/storefront-runner",
-  "version": "2.0.49",
+  "version": "2.0.51",
   "license": "SEE LICENSE IN LICENSE",
   "description": "World-shareable storefront runner: multi-tenant renderer on Astro/Cloudflare. No control plane.",
   "packageManager": "pnpm@11.9.0",

package/packages/public-runtime/package.json

@@ -20,7 +20,7 @@
     "./integration/native-ga4-sandbox-asset": "./src/integration/native-ga4-sandbox-asset.mjs"
   },
   "dependencies": {
-    "lightningcss": "^1.32.0",
+    "css-tree": "2.2.1",
     "parse5": "^7.2.1"
   },
   "scripts": {
@@ -31,6 +31,7 @@
     "generate:managed-analytics-schemas": "node --experimental-strip-types scripts/generate-managed-analytics-api-v1-schemas.mjs"
   },
   "devDependencies": {
+    "@types/css-tree": "^3.2.0",
     "ajv": "^8.20.0",
     "typescript": "^5.6.3",
     "vitest": "^2.1.8"

package/packages/public-runtime/src/image-dependencies.ts

@@ -1,4 +1,4 @@
-import { transform, transformStyleAttribute, type CustomAtRules, type Declaration, type Image, type TokenOrValue, type Url, type Visitor } from "lightningcss";
+import { ident, parse, string as cssString, tokenize, tokenNames, url as cssUrl } from "css-tree";
 import { parseFragment, type DefaultTreeAdapterMap } from "parse5";
 
 /**
@@ -394,64 +394,46 @@ function rememberCssLocator(refs: ExtractedReference[], locator: string): boolea
   return true;
 }
 
-function urlLocationKey(url: Url): string {
-  return `${url.loc.line}:${url.loc.column}`;
-}
-
-function cssFunctionName(name: string): string {
-  return name.toLowerCase();
-}
-
-function declarationPropertyName(declaration: Declaration): string {
-  // Custom properties keep author case. Image properties match case-insensitively.
-  const name = declaration.property === "unparsed"
-    ? declaration.value.propertyId.property
-    : declaration.property === "custom"
-      ? String(declaration.value.name)
-      : declaration.property;
-  return name.toLowerCase();
-}
-
-/** Quoted URL() / uRl() inside an unparsed image() is a nested function. Its source is the first string. */
-function quotedUrlFunctionLocator(nodes: readonly TokenOrValue[]): string | null {
-  for (const argument of nodes) {
-    if (argument.type === "token" && argument.value.type === "string") return String(argument.value.value);
-  }
-  return null;
-}
-
-function suppressImageFunctionUrls(
-  nodes: readonly TokenOrValue[],
-  locations: Set<string>,
-  walkVariableFallbacks = false,
-): void {
-  for (const argument of nodes) {
-    if (argument.type === "url") {
-      locations.add(urlLocationKey(argument.value));
-      continue;
-    }
-    if (argument.type === "function") {
-      suppressImageFunctionUrls(argument.value.arguments, locations, walkVariableFallbacks);
-      continue;
+type CssScanNode = {
+  type: string;
+  name?: string;
+  value?: string;
+  property?: string;
+  children?: CssScanNode[];
+  block?: CssScanNode | null;
+};
+
+function cssChildren(node: CssScanNode): CssScanNode[] {
+  return node.children ?? [];
+}
+
+function rawEscapedUrlReferences(raw: string, refs: ExtractedReference[]): void {
+  const tokens: Array<{ name: string; start: number; end: number }> = [];
+  tokenize(raw, (type, start, end) => tokens.push({ name: tokenNames[type] ?? "", start, end }));
+  for (let index = 0; index < tokens.length; index++) {
+    const token = tokens[index]!;
+    const rawName = raw.slice(token.start, token.end - 1);
+    if (token.name !== "function-token" || !rawName.includes("\\") || ident.decode(rawName).toLowerCase() !== "url") continue;
+    let depth = 1;
+    for (let next = index + 1; next < tokens.length; next++) {
+      const nextToken = tokens[next]!;
+      if (nextToken.name === "function-token" || nextToken.name === "(-token") depth++;
+      if (nextToken.name === ")-token") depth--;
+      if (depth !== 0) continue;
+      const argument = raw.slice(token.end, nextToken.start).trim();
+      const locator = argument.startsWith('"') || argument.startsWith("'")
+        ? cssString.decode(argument)
+        : cssUrl.decode(`url(${argument})`);
+      rememberCssLocator(refs, locator);
+      index = next;
+      break;
     }
-    // image-set suppression stays on nested functions. image() also suppresses var()/env() fallback urls.
-    if (!walkVariableFallbacks || (argument.type !== "var" && argument.type !== "env")) continue;
-    const fallback = argument.value.fallback;
-    if (fallback) suppressImageFunctionUrls(fallback, locations, true);
-  }
-}
-
-/** url() nodes nested in an unparsed image-set option are not that option. Direct url() arguments stay visible. */
-function suppressNestedFunctionUrls(nodes: readonly TokenOrValue[], locations: Set<string>): void {
-  for (const argument of nodes) {
-    if (argument.type === "function") suppressImageFunctionUrls(argument.value.arguments, locations);
   }
 }
 
 function deferredFunctionName(name: string): "var" | "env" | "cross-fade" | null {
-  const normalized = cssFunctionName(name);
+  const normalized = name.toLowerCase();
   if (normalized === "var" || normalized === "env") return normalized;
-  // -webkit-cross-fade is cross-fade. Any vendor prefix stays unresolved.
   if (normalized === "cross-fade" || /^-[a-z]+-cross-fade$/.test(normalized)) return "cross-fade";
   return null;
 }
@@ -460,170 +442,150 @@ function rememberDeferred(refs: ExtractedReference[], name: "var" | "env" | "cro
   refs.push({ locator: `css-function:${name}`, surface: "css-url", deferredFunction: name });
 }
 
-/** One kept locator. type(), format(), and a discarded non-image do not consume it. var(), env(), and cross-fade() consume it without walking children. Nested image() keeps its own one source. */
-function recordImageFunctionSource(refs: ExtractedReference[], nodes: readonly TokenOrValue[]): boolean {
-  for (const argument of nodes) {
-    if (argument.type === "url") {
-      if (rememberCssLocator(refs, argument.value.url)) return true;
-      continue;
-    }
-    if (argument.type === "token" && argument.value.type === "string") {
-      if (rememberCssLocator(refs, String(argument.value.value))) return true;
-      continue;
-    }
-    // The visitor records the deferred dependency. Children are not a source.
-    if (argument.type === "var" || argument.type === "env") return true;
-    if (argument.type !== "function") continue;
-    const name = cssFunctionName(argument.value.name);
-    if (name === "url") {
-      const locator = quotedUrlFunctionLocator(argument.value.arguments);
-      if (locator != null && rememberCssLocator(refs, locator)) return true;
-      continue;
-    }
-    // MIME tags, not image sources. Recursing would keep "image/png" and consume the one slot.
-    if (name === "type" || name === "format") continue;
-    if (deferredFunctionName(name)) return true;
-    if (recordImageFunctionSource(refs, argument.value.arguments)) return true;
-  }
-  return false;
-}
-
 function adoptCssReferences(refs: ExtractedReference[], cssRefs: readonly ExtractedReference[], afterBase: boolean): void {
   for (const ref of cssRefs) refs.push(afterBase ? { ...ref, afterBase: true } : ref);
 }
 
-function rememberCssImage(refs: ExtractedReference[], image: Image): void {
-  if (image.type === "url") {
-    rememberCssLocator(refs, image.value.url);
-    return;
-  }
-  if (image.type !== "image-set") return;
-  for (const option of image.value.options) rememberCssImage(refs, option.image);
-}
-
+/**
+ * CSS extraction uses a JavaScript parser because this module is imported by
+ * Worker routes. A native CSS binding cannot be evaluated by workerd, which
+ * would prevent every route sharing its bundle chunk from loading.
+ */
 function cssReferences(css: string, kind: "stylesheet" | "declaration"): ExtractedReference[] {
   if (!css) return [];
   const refs: ExtractedReference[] = [];
-  const fontFaceUrls: string[] = [];
-  // url() nodes anywhere inside image() are still walked by the Url visitor after Function.
-  // The visitor rebuilds a fresh object per callback, so identity can't dedupe — key on source
-  // position, which is stable for the same node. One image() keeps one source; the rest stay suppressed.
-  const imageFunctionUrlLocations = new Set<string>();
-  // Function enter runs before children. "image" means this image() recorded its one source;
-  // a nested image() visit must not record again. "image-set" means a direct string token is an option.
-  // "deferred" is var(), env(), or cross-fade(): their children are not resolved.
-  const frames: Array<"image" | "image-set" | "deferred" | "skip"> = [];
-  let valueDeferDepth = 0;
-  const propertyStack: string[] = [];
-  const deferredOpen = (): boolean => valueDeferDepth > 0 || frames.includes("deferred");
-  const inImageValue = (): boolean => {
-    if (frames.includes("image") || frames.includes("image-set")) return true;
-    const property = propertyStack.at(-1);
-    return property != null && IMAGE_VALUE_PROPERTIES.has(property);
+  const parseValue = (value: string): CssScanNode | null => {
+    try {
+      const parsed = parse(value, { context: "value", list: false }) as unknown as CssScanNode;
+      return parsed.type === "Value" ? parsed : null;
+    } catch {
+      return null;
+    }
   };
-  const noteDeferred = (name: "var" | "env" | "cross-fade"): void => {
-    if (!deferredOpen() && inImageValue()) rememberDeferred(refs, name);
+  const noteDeferred = (name: "var" | "env" | "cross-fade", imageValue: boolean): void => {
+    if (imageValue) rememberDeferred(refs, name);
   };
-  const visitor: Visitor<CustomAtRules> = {
-    Declaration(declaration) {
-      propertyStack.push(declarationPropertyName(declaration));
-    },
-    DeclarationExit() {
-      propertyStack.pop();
-    },
-    Rule: {
-      "font-face"(rule) {
-        for (const property of rule.value.properties) {
-          if (property.type !== "source") continue;
-          for (const source of property.value) {
-            if (source.type === "url") fontFaceUrls.push(source.value.url.url);
-          }
-        }
-      },
-    },
-    Url(url) {
-      if (imageFunctionUrlLocations.has(urlLocationKey(url))) return;
-      if (fontFaceUrls[0] === url.url) {
-        fontFaceUrls.shift();
-        return;
+
+  // image() resolves one source. A discarded non-image argument does not consume it.
+  const scanNestedDeferred = (node: CssScanNode): void => {
+    if (node.type !== "Function") {
+      for (const child of cssChildren(node)) scanNestedDeferred(child);
+      return;
+    }
+    const deferred = deferredFunctionName(node.name ?? "");
+    if (deferred) {
+      noteDeferred(deferred, true);
+      return;
+    }
+    for (const child of cssChildren(node)) scanNestedDeferred(child);
+  };
+
+  const firstImageSource = (nodes: CssScanNode[]): boolean => {
+    let chosen = false;
+    for (const node of nodes) {
+      if (chosen) {
+        scanNestedDeferred(node);
+        continue;
       }
-      if (deferredOpen()) return;
-      rememberCssLocator(refs, url.url);
-    },
-    Image(image) {
-      if (deferredOpen()) return;
-      if (image.type === "image-set") rememberCssImage(refs, image);
-    },
-    Token: {
-      string(token) {
-        if (deferredOpen()) return;
-        if (frames.at(-1) !== "image-set") return;
-        rememberCssLocator(refs, String(token.value));
-      },
-    },
-    Variable() {
-      noteDeferred("var");
-      valueDeferDepth++;
-    },
-    VariableExit() {
-      valueDeferDepth--;
-    },
-    EnvironmentVariable() {
-      noteDeferred("env");
-      valueDeferDepth++;
-    },
-    EnvironmentVariableExit() {
-      valueDeferDepth--;
-    },
-    // image() stays unparsed. Quoted URL()/uRl() is a nested function, not argument type "url".
-    // image-set() with a string or image() option stays unparsed too; its string options are tokens.
-    // Lowercase var() and env() are not functions; VAR()/ENV() are. cross-fade(), including a vendor prefix, is always a function.
-    Function(fn) {
-      const deferred = deferredFunctionName(fn.name);
+      if (node.type === "Url" || node.type === "String") {
+        if (rememberCssLocator(refs, node.value ?? "")) chosen = true;
+        continue;
+      }
+      if (node.type === "Raw") {
+        const parsed = parseValue(node.value ?? "");
+        if (parsed && firstImageSource(cssChildren(parsed))) chosen = true;
+        continue;
+      }
+      if (node.type !== "Function") continue;
+      const name = (node.name ?? "").toLowerCase();
+      const deferred = deferredFunctionName(name);
       if (deferred) {
-        noteDeferred(deferred);
-        frames.push("deferred");
-        return;
+        noteDeferred(deferred, true);
+        chosen = true;
+        continue;
       }
-      if (deferredOpen()) {
-        frames.push("skip");
-        return;
+      if (name === "type" || name === "format") continue;
+      if (firstImageSource(cssChildren(node))) chosen = true;
+    }
+    return chosen;
+  };
+
+  const imageSetSources = (nodes: CssScanNode[]): void => {
+    let option: CssScanNode[] = [];
+    const flush = (): void => {
+      firstImageSource(option);
+      option = [];
+    };
+    for (const node of nodes) {
+      if (node.type === "Operator" && node.value === ",") flush();
+      else option.push(node);
+    }
+    flush();
+  };
+
+  const scanValue = (nodes: CssScanNode[], imageValue: boolean): void => {
+    for (const node of nodes) {
+      if (node.type === "Url") {
+        rememberCssLocator(refs, node.value ?? "");
+        continue;
+      }
+      if (node.type === "Raw") {
+        const parsed = parseValue(node.value ?? "");
+        if (parsed) scanValue(cssChildren(parsed), imageValue);
+        else rawEscapedUrlReferences(node.value ?? "", refs);
+        continue;
+      }
+      if (node.type !== "Function") {
+        if (node.children) scanValue(cssChildren(node), imageValue);
+        continue;
+      }
+      const name = (node.name ?? "").toLowerCase();
+      const deferred = deferredFunctionName(name);
+      if (deferred) {
+        noteDeferred(deferred, imageValue);
+        continue;
       }
-      const name = cssFunctionName(fn.name);
       if (name === "image") {
-        if (frames.includes("image")) {
-          frames.push("skip");
-          return;
-        }
-        frames.push("image");
-        suppressImageFunctionUrls(fn.arguments, imageFunctionUrlLocations, true);
-        recordImageFunctionSource(refs, fn.arguments);
-        return;
+        firstImageSource(cssChildren(node));
+        continue;
       }
-      if ((name === "image-set" || name === "-webkit-image-set") && !frames.includes("image")) {
-        frames.push("image-set");
-        suppressNestedFunctionUrls(fn.arguments, imageFunctionUrlLocations);
-        return;
+      if (name === "image-set" || name === "-webkit-image-set") {
+        imageSetSources(cssChildren(node));
+        continue;
       }
-      if (name === "url" && frames.at(-1) === "image-set") {
-        const locator = quotedUrlFunctionLocator(fn.arguments);
-        if (locator != null) rememberCssLocator(refs, locator);
+      if (name === "url") {
+        const quoted = cssChildren(node).find((child) => child.type === "String");
+        if (quoted) rememberCssLocator(refs, quoted.value ?? "");
+        continue;
       }
-      frames.push("skip");
-    },
-    FunctionExit() {
-      frames.pop();
-    },
+      scanValue(cssChildren(node), imageValue);
+    }
   };
-  const code = textEncoder.encode(css);
-  try {
-    if (kind === "declaration") {
-      transformStyleAttribute({ filename: CSS_FILENAME, code, errorRecovery: true, visitor });
-    } else {
-      transform({ filename: CSS_FILENAME, code, errorRecovery: true, visitor });
+
+  const scanTree = (node: CssScanNode, fontFace = false): void => {
+    if (node.type === "Atrule") {
+      if (node.block) scanTree(node.block, (node.name ?? "").toLowerCase() === "font-face");
+      return;
+    }
+    if (node.type === "Declaration") {
+      const property = (node.property ?? "").toLowerCase();
+      if (fontFace && property === "src") return;
+      const value = node.value as unknown as CssScanNode | undefined;
+      if (value) scanValue(value.type === "Raw" ? [value] : cssChildren(value), IMAGE_VALUE_PROPERTIES.has(property));
+      return;
     }
+    if (node.block) scanTree(node.block, fontFace);
+    for (const child of cssChildren(node)) scanTree(child, fontFace);
+  };
+
+  try {
+    const parsed = parse(css, {
+      context: kind === "declaration" ? "declarationList" : "stylesheet",
+      list: false,
+    }) as unknown as CssScanNode;
+    scanTree(parsed);
   } catch {
-    return refs;
+    // Invalid CSS never causes image inventory to fail open on other artifacts.
   }
   return refs;
 }

package/pnpm-lock.runner.yaml

@@ -112,13 +112,16 @@ importers:
 
   packages/public-runtime:
     dependencies:
-      lightningcss:
-        specifier: ^1.32.0
-        version: 1.32.0
+      css-tree:
+        specifier: 2.2.1
+        version: 2.2.1
       parse5:
         specifier: ^7.2.1
         version: 7.3.0
     devDependencies:
+      '@types/css-tree':
+        specifier: ^3.2.0
+        version: 3.2.0
       ajv:
         specifier: ^8.20.0
         version: 8.20.0
@@ -1916,6 +1919,9 @@ packages:
   '@tybys/wasm-util@0.10.3':
     resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
 
+  '@types/css-tree@3.2.0':
+    resolution: {integrity: sha512-J5KXmk6BFIepOT7280FdFyNs4c5fh0Uee0otjKEvzchrRs38Ii9qminqc4ds0L19X8Zd/rT+brR9jkBthygjWw==}
+
   '@types/estree-jsx@1.0.5':
     resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
 
@@ -5201,6 +5207,8 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@types/css-tree@3.2.0': {}
+
   '@types/estree-jsx@1.0.5':
     dependencies:
       '@types/estree': 1.0.9