@hyperframes/lint 0.7.20 → 0.7.22

package/dist/browser.js

@@ -1058,6 +1058,31 @@ var mediaRules = [
     }
     return findings;
   },
+  // media_crossorigin_breaks_preview — `crossorigin` on <video>/<audio> forces a
+  // CORS-checked fetch. The server-side renderer downloads media directly (no CORS),
+  // so it always works there; but Studio preview runs in the browser, where a media
+  // host that omits Access-Control-Allow-Origin silently fails the load — the media
+  // shows BLANK/black in preview while renders look fine, hiding the bug. Plain
+  // displayed media never needs crossorigin; it's only required to read pixels/samples
+  // back (canvas/WebGL texture, WebAudio createMediaElementSource) AND only when the
+  // host is known CORS-enabled.
+  ({ tags }) => {
+    const findings = [];
+    for (const tag of tags) {
+      if (tag.name !== "video" && tag.name !== "audio") continue;
+      if (!hasAttrName(tag.raw, "crossorigin")) continue;
+      const elementId = readAttr(tag.raw, "id") || void 0;
+      findings.push({
+        code: "media_crossorigin_breaks_preview",
+        severity: "error",
+        message: `<${tag.name}${elementId ? ` id="${elementId}"` : ""}> has crossorigin, which forces a CORS-checked fetch. If the media host omits Access-Control-Allow-Origin, the load silently fails in Studio preview (media shows BLANK/black) while server-side renders still work \u2014 hiding the bug.`,
+        elementId,
+        fixHint: "Remove the crossorigin attribute unless you read the media back via canvas/WebGL/WebAudio AND the host is known to send CORS headers. Plain displayed media never needs it.",
+        snippet: truncateSnippet(tag.raw)
+      });
+    }
+    return findings;
+  },
   // video_audio_double_source — catches audible <video> paired with a separate
   // <audio> pointing to the same file, which causes double playback at runtime
   ({ tags }) => {
@@ -1102,6 +1127,7 @@ async function loadParseGsapScript() {
   return mod.parseGsapScriptAcorn;
 }
 var SCENE_BOUNDARY_EPSILON_SECONDS = 0.05;
+var UNRESOLVED_TARGET = "__unresolved__";
 function countClassUsage(tags) {
   const counts = /* @__PURE__ */ new Map();
   for (const tag of tags) {
@@ -1464,6 +1490,7 @@ var gsapRules = [
         const left = gsapWindows[i];
         if (!left) continue;
         if (left.end <= left.position) continue;
+        if (left.targetSelector === UNRESOLVED_TARGET) continue;
         for (let j = i + 1; j < gsapWindows.length; j++) {
           const right = gsapWindows[j];
           if (!right) continue;
@@ -1490,6 +1517,7 @@ ${right.raw}`)
       }
       if (clipStartBoundaries.length > 0) {
         for (const win of gsapWindows) {
+          if (win.targetSelector === UNRESOLVED_TARGET) continue;
           if (!isSceneBoundaryExit(win)) continue;
           const boundary = findMatchingSceneBoundary(win.end, clipStartBoundaries);
           if (boundary == null) continue;
@@ -2726,7 +2754,7 @@ var adapterRules = [
       (t) => /["']three["']/.test(t) && /importmap/.test(scripts.find((s) => s.content === t)?.attrs || "")
     );
     const hasThreeModuleImport = texts.some(
-      (t) => /\bimport\b.*['"]three['"]/.test(t) || /\bfrom\s+['"]three['"]/.test(t)
+      (t) => /\b(?:import|from)\s*[^;\n]*['"][^'"]*three[^'"]*['"]/i.test(t)
     );
     if (!usesThree || hasThreeScript || hasThreeImportMap || hasThreeModuleImport) return [];
     return [
@@ -2933,6 +2961,12 @@ var GENERIC_FAMILIES = /* @__PURE__ */ new Set([
   "math",
   "emoji",
   "fangsong",
+  // Vendor-prefixed system-font keywords. Like `system-ui`, the engine resolves
+  // these to the OS UI font — they are never installable files and must not be
+  // flagged as a missing @font-face, even when a generic fallback follows them
+  // (e.g. `-apple-system, system-ui, sans-serif`).
+  "-apple-system",
+  "blinkmacsystemfont",
   "inherit",
   "initial",
   "unset",
@@ -2957,6 +2991,11 @@ function extractFontFaceFamilies(styles) {
   }
   return families;
 }
+function normalizeUsedFontName(part) {
+  const name = part.trim().replace(/^['"]|['"]$/g, "").trim().toLowerCase();
+  if (!name || name.includes("(") || name.includes(")")) return null;
+  return name;
+}
 function extractUsedFontFamilies(styles) {
   const used = [];
   const seen = /* @__PURE__ */ new Set();
@@ -2965,9 +3004,8 @@ function extractUsedFontFamilies(styles) {
     const withoutFontFace = stripCssComments(style.content).replace(/@font-face\s*\{[^}]*\}/gi, "");
     let match;
     while ((match = propRe.exec(withoutFontFace)) !== null) {
-      const stack = match[1];
-      for (const part of stack.split(",")) {
-        const name = part.trim().replace(/^['"]|['"]$/g, "").trim().toLowerCase();
+      for (const part of match[1].split(",")) {
+        const name = normalizeUsedFontName(part);
         if (name && !GENERIC_FAMILIES.has(name) && !seen.has(name)) {
           seen.add(name);
           used.push(name);