@hyperframes/lint 0.8.29 → 0.8.31

package/dist/browser.js

@@ -188,57 +188,311 @@ function stripStringLiterals(source) {
     (literal) => literal[0] + " ".repeat(Math.max(0, literal.length - 1))
   );
 }
-function stripJsComments(source) {
+function scanJsComments(source) {
   let out = "";
   let i = 0;
   let quote = null;
   let escaped = false;
+  let inRegex = false;
+  let inRegexClass = false;
+  let regexMisread = false;
+  const ctx = new CodeContext();
+  const emitCode = (ch) => {
+    out += ch;
+    ctx.push(ch);
+  };
+  const emitOpaque = (ch) => {
+    out += ch;
+    ctx.push(" ");
+  };
   while (i < source.length) {
     const ch = source[i] ?? "";
     const next = source[i + 1] ?? "";
-    if (quote) {
+    if (inRegex) {
       out += ch;
       if (escaped) {
         escaped = false;
+        if (ch === "\n" || ch === "\r") {
+          inRegex = false;
+          inRegexClass = false;
+          regexMisread = true;
+        }
+      } else if (ch === "\\") {
+        escaped = true;
+      } else if (ch === "[") {
+        inRegexClass = true;
+      } else if (ch === "]") {
+        inRegexClass = false;
+      } else if (ch === "/" && !inRegexClass) {
+        inRegex = false;
+        ctx.push(ch);
+      } else if (ch === "\n" || ch === "\r") {
+        inRegex = false;
+        inRegexClass = false;
+        regexMisread = true;
+      }
+      i += 1;
+      continue;
+    }
+    if (quote) {
+      if (escaped) {
+        escaped = false;
+        emitOpaque(ch);
       } else if (ch === "\\") {
         escaped = true;
+        emitOpaque(ch);
       } else if (ch === quote) {
         quote = null;
+        emitCode(ch);
+      } else {
+        emitOpaque(ch);
       }
       i += 1;
       continue;
     }
     if (ch === "'" || ch === '"' || ch === "`") {
       quote = ch;
-      out += ch;
+      emitCode(ch);
       i += 1;
       continue;
     }
     if (ch === "/" && next === "/") {
       out += "  ";
+      ctx.push(" ");
+      ctx.push(" ");
       i += 2;
       while (i < source.length && source[i] !== "\n" && source[i] !== "\r") {
         out += " ";
+        ctx.push(" ");
         i += 1;
       }
       continue;
     }
     if (ch === "/" && next === "*") {
       out += "  ";
+      ctx.push(" ");
+      ctx.push(" ");
       i += 2;
       while (i < source.length) {
         const blockCh = source[i] ?? "";
         const blockNext = source[i + 1] ?? "";
         if (blockCh === "*" && blockNext === "/") {
           out += "  ";
+          ctx.push(" ");
+          ctx.push(" ");
           i += 2;
           break;
         }
-        out += blockCh === "\n" || blockCh === "\r" ? blockCh : " ";
+        const kept = blockCh === "\n" || blockCh === "\r" ? blockCh : " ";
+        out += kept;
+        ctx.push(kept);
         i += 1;
       }
       continue;
     }
+    if (ch === "/" && ctx.startsRegexLiteral()) {
+      inRegex = true;
+      emitCode(ch);
+      i += 1;
+      continue;
+    }
+    emitCode(ch);
+    i += 1;
+  }
+  return { out, balanced: quote === null && !inRegex && !regexMisread };
+}
+function stripJsComments(source) {
+  return scanJsComments(source).out;
+}
+function stripJsCode(source) {
+  const { out, balanced } = scanJsComments(source);
+  return balanced ? stripJsStringLiterals(out) : source;
+}
+var REGEX_ALLOWED_BEFORE = new Set("=(,:[!&|?{};+-*%^~<>");
+var REGEX_ALLOWED_KEYWORDS = /* @__PURE__ */ new Set([
+  "return",
+  "typeof",
+  "instanceof",
+  "in",
+  "of",
+  "new",
+  "delete",
+  "void",
+  "case",
+  "do",
+  "else",
+  "yield",
+  "await"
+]);
+var WORD_CHAR = /[A-Za-z0-9_$]/;
+var CodeContext = class {
+  last = "";
+  prev = "";
+  word = "";
+  wordEnded = false;
+  wordAfterDot = false;
+  push(ch) {
+    if (ch === " " || ch === "	" || ch === "\n" || ch === "\r") {
+      this.wordEnded = true;
+      return;
+    }
+    if (WORD_CHAR.test(ch)) {
+      if (this.wordEnded || this.word === "") this.wordAfterDot = this.last === ".";
+      this.word = this.wordEnded ? ch : this.word + ch;
+    } else {
+      this.word = "";
+      this.wordAfterDot = false;
+    }
+    this.wordEnded = false;
+    this.prev = this.last;
+    this.last = ch;
+  }
+  startsRegexLiteral() {
+    if (this.last === "") return true;
+    if (WORD_CHAR.test(this.last))
+      return !this.wordAfterDot && REGEX_ALLOWED_KEYWORDS.has(this.word);
+    if ((this.last === "+" || this.last === "-") && this.prev === this.last) return false;
+    return REGEX_ALLOWED_BEFORE.has(this.last);
+  }
+};
+function stripJsStringLiterals(source) {
+  let out = "";
+  let i = 0;
+  const templateBraces = [];
+  const ctx = new CodeContext();
+  let quote = null;
+  let escaped = false;
+  let inRegex = false;
+  let inRegexClass = false;
+  let regexMisread = false;
+  const blank = (ch) => ch === "\n" || ch === "\r" ? ch : " ";
+  const emit = (text) => {
+    out += text;
+    for (const ch of text) ctx.push(ch);
+  };
+  while (i < source.length) {
+    const ch = source[i] ?? "";
+    const next = source[i + 1] ?? "";
+    if (inRegex) {
+      if (escaped) {
+        escaped = false;
+        if (ch === "\n" || ch === "\r") {
+          inRegex = false;
+          inRegexClass = false;
+          regexMisread = true;
+        }
+        emit(blank(ch));
+      } else if (ch === "\\") {
+        escaped = true;
+        emit(" ");
+      } else if (ch === "[") {
+        inRegexClass = true;
+        emit(" ");
+      } else if (ch === "]") {
+        inRegexClass = false;
+        emit(" ");
+      } else if (ch === "/" && !inRegexClass) {
+        inRegex = false;
+        emit(ch);
+      } else if (ch === "\n" || ch === "\r") {
+        inRegex = false;
+        inRegexClass = false;
+        escaped = false;
+        regexMisread = true;
+        emit(ch);
+      } else {
+        emit(" ");
+      }
+      i += 1;
+      continue;
+    }
+    if (quote) {
+      if (escaped) {
+        escaped = false;
+        emit(blank(ch));
+      } else if (ch === "\\") {
+        escaped = true;
+        emit(" ");
+      } else if (ch === quote) {
+        quote = null;
+        emit(ch);
+      } else if (ch === "`" || quote !== "`" || ch !== "$" || next !== "{") {
+        emit(blank(ch));
+      } else {
+        templateBraces.push(0);
+        quote = null;
+        emit("${");
+        i += 2;
+        continue;
+      }
+      i += 1;
+      continue;
+    }
+    if (ch === "'" || ch === '"' || ch === "`") {
+      quote = ch;
+      emit(ch);
+      i += 1;
+      continue;
+    }
+    if (ch === "/" && next !== "/" && next !== "*" && ctx.startsRegexLiteral()) {
+      inRegex = true;
+      emit(ch);
+      i += 1;
+      continue;
+    }
+    if (templateBraces.length > 0) {
+      const depth = templateBraces[templateBraces.length - 1] ?? 0;
+      if (ch === "{") templateBraces[templateBraces.length - 1] = depth + 1;
+      else if (ch === "}") {
+        if (depth === 0) {
+          templateBraces.pop();
+          quote = "`";
+          emit(ch);
+          i += 1;
+          continue;
+        }
+        templateBraces[templateBraces.length - 1] = depth - 1;
+      }
+    }
+    emit(ch);
+    i += 1;
+  }
+  if (quote !== null || templateBraces.length > 0 || inRegex || regexMisread) return source;
+  return out;
+}
+function stripCssComments(source) {
+  let out = "";
+  let i = 0;
+  let quote = null;
+  while (i < source.length) {
+    const ch = source[i] ?? "";
+    if (quote) {
+      out += ch;
+      if (ch === "\\") {
+        out += source[i + 1] ?? "";
+        i += 2;
+        continue;
+      }
+      if (ch === quote) quote = null;
+      i += 1;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch;
+      out += ch;
+      i += 1;
+      continue;
+    }
+    if (ch === "/" && source[i + 1] === "*") {
+      const end = source.indexOf("*/", i + 2);
+      const stop = end === -1 ? source.length : end + 2;
+      for (let j = i; j < stop; j += 1) {
+        const c = source[j] ?? "";
+        out += c === "\n" || c === "\r" ? c : " ";
+      }
+      i = stop;
+      continue;
+    }
     out += ch;
     i += 1;
   }
@@ -803,6 +1057,12 @@ var VIDEO_SRC_EXT = /* @__PURE__ */ new Set([
   "mpg",
   "mpeg"
 ]);
+var AUDIO_SRC_EXT = /* @__PURE__ */ new Set(["mp3", "wav", "aac", "flac", "opus", "aiff", "wma"]);
+var SRC_KIND_NOUN = {
+  image: "an image",
+  video: "a video",
+  audio: "an audio file"
+};
 function srcKind(src) {
   const stripped = src.trim();
   if (!stripped) return null;
@@ -812,6 +1072,7 @@ function srcKind(src) {
     if (!mime) return null;
     if (mime.startsWith("image/")) return "image";
     if (mime.startsWith("video/")) return "video";
+    if (mime.startsWith("audio/")) return "audio";
     return null;
   }
   if (lower.startsWith("blob:")) return null;
@@ -831,6 +1092,7 @@ function srcKind(src) {
   const ext = base.slice(dot + 1).toLowerCase();
   if (IMAGE_SRC_EXT.has(ext)) return "image";
   if (VIDEO_SRC_EXT.has(ext)) return "video";
+  if (AUDIO_SRC_EXT.has(ext)) return "audio";
   return null;
 }
 function findMediaSrcKindMismatchFindings(ctx) {
@@ -841,16 +1103,15 @@ function findMediaSrcKindMismatchFindings(ctx) {
     if (!src) continue;
     const kind = srcKind(src);
     if (kind === null) continue;
-    if (tag.name === "video" && kind !== "image") continue;
-    if (tag.name === "img" && kind !== "video") continue;
-    const elementId = readAttr(tag.raw, "id") || void 0;
     const expected = tag.name === "video" ? "video" : "image";
+    if (kind === expected) continue;
+    const elementId = readAttr(tag.raw, "id") || void 0;
     findings.push({
       code: "media_src_kind_mismatch",
       severity: "error",
-      message: `<${tag.name}${elementId ? ` id="${elementId}"` : ""}> src is a ${kind}, not a ${expected}. The producer fail-closes when the tag and file kind disagree.`,
+      message: `<${tag.name}${elementId ? ` id="${elementId}"` : ""}> src is ${SRC_KIND_NOUN[kind]}, not ${SRC_KIND_NOUN[expected]}. The producer fail-closes when the tag and file kind disagree.`,
       elementId,
-      fixHint: tag.name === "video" ? "Use <img> for a still, or point <video> at a video URL (mp4/webm/mov/\u2026)." : "Use <video> for a video URL, or point <img> at a still (png/jpg/webp/\u2026).",
+      fixHint: tag.name === "video" ? "Use <img> for a still, <audio> for sound, or point <video> at a video URL (mp4/webm/mov/\u2026)." : "Use <video> for a video URL, <audio> for sound, or point <img> at a still (png/jpg/webp/\u2026).",
       snippet: truncateSnippet(tag.raw)
     });
   }
@@ -1635,6 +1896,14 @@ function isHiddenGsapState(values) {
   const display = stringValue(values.display)?.toLowerCase();
   return zeroValue(values.opacity) || zeroValue(values.autoAlpha) || visibility === "hidden" || display === "none";
 }
+function hiddenSetTargetSelectors(target, aliases) {
+  const parts = target.startsWith("[") && target.endsWith("]") ? target.slice(1, -1).split(",") : [target];
+  return parts.flatMap((part) => {
+    const trimmed = part.trim();
+    const resolved = /^(["'`])([^"'`]+)\1$/.exec(trimmed)?.[2] ?? aliases.get(trimmed);
+    return resolved === void 0 ? [] : resolved.split(",");
+  }).map((selector) => selector.trim()).filter((selector) => selector.length > 0);
+}
 function extractStandaloneHiddenSelectors(script) {
   const selectors = /* @__PURE__ */ new Set();
   const source = stripJsComments(script);
@@ -1645,16 +1914,15 @@ function extractStandaloneHiddenSelectors(script) {
   )) {
     aliases.set(match2[1] ?? "", match2[3] ?? "");
   }
-  const pattern = /gsap\.set\s*\(\s*([^,]+?)\s*,\s*\{([\s\S]*?)\}\s*\)/g;
+  const pattern = /gsap\.set\s*\(\s*(\[[^[\]]*\]|"[^"]*"|'[^']*'|`[^`]*`|[^,()[\]]+?)\s*,\s*\{([\s\S]*?)\}\s*\)/g;
   let match;
   while ((match = pattern.exec(source)) !== null) {
     if (indexInsideNonIifeRange(match.index, source, functionRanges)) continue;
-    const target = (match[1] ?? "").trim();
-    const selector = /^(["'`])([^"'`]+)\1$/.exec(target)?.[2] ?? aliases.get(target);
-    if (!selector) continue;
+    const targets = hiddenSetTargetSelectors((match[1] ?? "").trim(), aliases);
+    if (targets.length === 0) continue;
     const body = match[2] ?? "";
     if (/(?:opacity|autoAlpha)\s*:\s*0(?:\.0+)?\s*(?:,|$)/.test(body)) {
-      selectors.add(selector);
+      for (const selector of targets) selectors.add(selector);
     }
   }
   return selectors;
@@ -2234,6 +2502,9 @@ var gsapRules = [
   // fallow-ignore-next-line complexity
   async ({ source, tags, scripts, styles, rootCompositionId }) => {
     const findings = [];
+    const authoredHiddenSelectors = new Set(
+      scripts.flatMap((script) => [...extractStandaloneHiddenSelectors(script.content)])
+    );
     const clipIds = /* @__PURE__ */ new Map();
     const clipClasses = /* @__PURE__ */ new Map();
     for (const tag of tags) {
@@ -2326,9 +2597,10 @@ ${right.raw}`)
           );
         }).sort((a, b) => a.position - b.position);
         const startsHiddenAtZero = visibilityWindows.some(
-          (win) => win.position <= SCENE_BOUNDARY_EPSILON_SECONDS && isHiddenGsapState(win.propertyValues)
+          (win) => win.position <= SCENE_BOUNDARY_EPSILON_SECONDS && (isHiddenGsapState(win.propertyValues) || win.fromPropertyValues !== void 0 && isHiddenGsapState(win.fromPropertyValues))
         );
         if (startsHiddenAtZero) continue;
+        if (selectors.some((selector2) => authoredHiddenSelectors.has(selector2))) continue;
         const firstVisible = visibilityWindows.find((win) => makesOverlayVisible(win));
         if (!firstVisible) continue;
         const selector = selectors.find(
@@ -3796,8 +4068,8 @@ var compositionRules = [
         });
       }
     };
-    for (const style of styles) scan(style.content);
-    for (const script of scripts) scan(script.content);
+    for (const style of styles) scan(stripCssComments(style.content));
+    for (const script of scripts) scan(stripJsComments(script.content));
     return findings;
   },
   // template_literal_selector
@@ -3805,14 +4077,17 @@ var compositionRules = [
     const findings = [];
     for (const script of scripts) {
       const templateLiteralSelectorPattern = /(?:querySelector|querySelectorAll)\s*\(\s*`[^`]*\$\{[^}]+\}[^`]*`\s*\)/g;
+      const scanned = stripJsCode(script.content);
       let tlMatch;
-      while ((tlMatch = templateLiteralSelectorPattern.exec(script.content)) !== null) {
+      while ((tlMatch = templateLiteralSelectorPattern.exec(scanned)) !== null) {
         findings.push({
           code: "template_literal_selector",
           severity: "error",
           message: "querySelector uses a template literal variable (e.g. `${compId}`). The HTML bundler's CSS parser crashes on these. Use a hardcoded string instead.",
           fixHint: "Replace the template literal variable with a hardcoded string. The bundler's CSS parser cannot handle interpolated variables in script content.",
-          snippet: truncateSnippet(tlMatch[0])
+          snippet: truncateSnippet(
+            script.content.slice(tlMatch.index, tlMatch.index + tlMatch[0].length)
+          )
         });
       }
     }
@@ -3914,7 +4189,7 @@ var compositionRules = [
     if (isRegistrySourceFile(options.filePath) || isRegistryInstalledFile(rawSource)) return [];
     const findings = [];
     for (const script of scripts) {
-      const stripped = stripJsComments(script.content);
+      const stripped = stripJsCode(script.content);
       if (/requestAnimationFrame\s*\(/.test(stripped)) {
         findings.push({
           code: "requestanimationframe_in_composition",
@@ -4566,7 +4841,7 @@ var GENERIC_FAMILIES = /* @__PURE__ */ new Set([
   "unset",
   "revert"
 ]);
-function stripCssComments(css) {
+function stripCssComments2(css) {
   return css.replace(/\/\*[\s\S]*?\*\//g, " ");
 }
 function extractFontFaceFamilies(styles) {
@@ -4574,7 +4849,7 @@ function extractFontFaceFamilies(styles) {
   const fontFaceRe = /@font-face\s*\{[^}]*\}/gi;
   const familyRe = /font-family\s*:\s*(['"]?)([^;'"]+)\1/i;
   for (const style of styles) {
-    const content = stripCssComments(style.content);
+    const content = stripCssComments2(style.content);
     let match;
     while ((match = fontFaceRe.exec(content)) !== null) {
       const familyMatch = match[0].match(familyRe);
@@ -4595,7 +4870,7 @@ function extractUsedFontFamilies(styles) {
   const seen = /* @__PURE__ */ new Set();
   const propRe = /font-family\s*:\s*([^;}{]+)/gi;
   for (const style of styles) {
-    const withoutFontFace = stripCssComments(style.content).replace(/@font-face\s*\{[^}]*\}/gi, "");
+    const withoutFontFace = stripCssComments2(style.content).replace(/@font-face\s*\{[^}]*\}/gi, "");
     let match;
     while ((match = propRe.exec(withoutFontFace)) !== null) {
       for (const part of match[1].split(",")) {