@hyperframes/lint 0.8.220 → 0.8.222

package/dist/browser.d.ts

@@ -51,6 +51,7 @@ type HyperframeLinterOptions = {
      * render time — the font will silently fall back to whatever the OS provides.
      */
     distributed?: boolean;
+    projectFontFamilies?: string[];
     /** Who is running the lint: Studio raises the structure rules to errors, the CLI keeps them warnings. */
     host?: "studio" | "cli";
 };

package/dist/browser.js

@@ -4309,7 +4309,7 @@ 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);
+    const resolved = /^(["'`])([^"'`]+)\1$/.exec(trimmed)?.[2] ?? /^[\w$.]+\.querySelector(?:All)?\(\s*(["'`])([^"'`]+)\1\s*\)$/.exec(trimmed)?.[2] ?? aliases.get(trimmed);
     return resolved === void 0 ? [] : resolved.split(",");
   }).map((selector) => selector.trim()).filter((selector) => selector.length > 0);
 }
@@ -4323,7 +4323,12 @@ function extractStandaloneHiddenSelectors(script) {
   )) {
     aliases.set(match2[1] ?? "", match2[3] ?? "");
   }
-  const pattern = /gsap\.set\s*\(\s*(\[[^[\]]*\]|"[^"]*"|'[^']*'|`[^`]*`|[^,()[\]]+?)\s*,\s*\{([\s\S]*?)\}\s*\)/g;
+  for (const match2 of source.matchAll(
+    /(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*[\w$.]+\.querySelector(?:All)?\(\s*(["'`])([^"'`]+)\2\s*\)/g
+  )) {
+    aliases.set(match2[1] ?? "", match2[3] ?? "");
+  }
+  const pattern = /gsap\.set\s*\(\s*(\[[^[\]]*\]|"[^"]*"|'[^']*'|`[^`]*`|[\w$.]+\.querySelector(?:All)?\(\s*(?:"[^"]*"|'[^']*'|`[^`]*`)\s*\)|[^,()[\]]+?)\s*,\s*\{([\s\S]*?)\}\s*\)/g;
   let match;
   while ((match = pattern.exec(source)) !== null) {
     if (indexInsideNonIifeRange(match.index, source, functionRanges)) continue;
@@ -4984,7 +4989,12 @@ ${right.raw}`)
           (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;
+        if (selectors.some(
+          (selector2) => [...authoredHiddenSelectors].some(
+            (hidden) => hidden === selector2 || targetedSelectorTokens(hidden).has(selector2)
+          )
+        ))
+          continue;
         const firstVisible = visibilityWindows.find((win) => makesOverlayVisible(win));
         if (!firstVisible) continue;
         const selector = selectors.find(
@@ -6429,6 +6439,9 @@ function extractFontFaceFamilies(styles) {
   }
   return families;
 }
+function declaredFontFamilies(styles, options) {
+  return /* @__PURE__ */ new Set([...extractFontFaceFamilies(styles), ...options.projectFontFamilies ?? []]);
+}
 function normalizeUsedFontName(part) {
   const name = part.trim().replace(/\s*!important\s*$/i, "").replace(/^['"]|['"]$/g, "").trim().toLowerCase();
   if (!name || name.includes("(") || name.includes(")")) return null;
@@ -6538,7 +6551,7 @@ var fontRules = [
   // so there is nothing for the author to act on.
   ({ styles, options }) => {
     if (!options.distributed) return [];
-    const declared = extractFontFaceFamilies(styles);
+    const declared = declaredFontFamilies(styles, options);
     const used = extractUsedFontFamilies(styles);
     const aliased = collectAliasedFonts(used, declared);
     if (aliased.length === 0) return [];
@@ -6554,7 +6567,7 @@ var fontRules = [
   ({ styles, source, rawSource, options, locate }) => {
     if (isRegistrySourceFile(options.filePath) || isRegistryInstalledFile(rawSource)) return [];
     const findings = [];
-    const declared = extractFontFaceFamilies(styles);
+    const declared = declaredFontFamilies(styles, options);
     const used = extractUsedFontFamilies(styles);
     const googleFonts = collectGoogleFontFamilies(source, styles);
     const undeclared = used.filter(

package/dist/index.d.ts

@@ -51,6 +51,7 @@ type HyperframeLinterOptions = {
      * render time — the font will silently fall back to whatever the OS provides.
      */
     distributed?: boolean;
+    projectFontFamilies?: string[];
     /** Who is running the lint: Studio raises the structure rules to errors, the CLI keeps them warnings. */
     host?: "studio" | "cli";
 };

package/dist/index.js

@@ -4315,7 +4315,7 @@ 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);
+    const resolved = /^(["'`])([^"'`]+)\1$/.exec(trimmed)?.[2] ?? /^[\w$.]+\.querySelector(?:All)?\(\s*(["'`])([^"'`]+)\1\s*\)$/.exec(trimmed)?.[2] ?? aliases.get(trimmed);
     return resolved === void 0 ? [] : resolved.split(",");
   }).map((selector) => selector.trim()).filter((selector) => selector.length > 0);
 }
@@ -4329,7 +4329,12 @@ function extractStandaloneHiddenSelectors(script) {
   )) {
     aliases.set(match2[1] ?? "", match2[3] ?? "");
   }
-  const pattern = /gsap\.set\s*\(\s*(\[[^[\]]*\]|"[^"]*"|'[^']*'|`[^`]*`|[^,()[\]]+?)\s*,\s*\{([\s\S]*?)\}\s*\)/g;
+  for (const match2 of source.matchAll(
+    /(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*[\w$.]+\.querySelector(?:All)?\(\s*(["'`])([^"'`]+)\2\s*\)/g
+  )) {
+    aliases.set(match2[1] ?? "", match2[3] ?? "");
+  }
+  const pattern = /gsap\.set\s*\(\s*(\[[^[\]]*\]|"[^"]*"|'[^']*'|`[^`]*`|[\w$.]+\.querySelector(?:All)?\(\s*(?:"[^"]*"|'[^']*'|`[^`]*`)\s*\)|[^,()[\]]+?)\s*,\s*\{([\s\S]*?)\}\s*\)/g;
   let match;
   while ((match = pattern.exec(source)) !== null) {
     if (indexInsideNonIifeRange(match.index, source, functionRanges)) continue;
@@ -4990,7 +4995,12 @@ ${right.raw}`)
           (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;
+        if (selectors.some(
+          (selector2) => [...authoredHiddenSelectors].some(
+            (hidden) => hidden === selector2 || targetedSelectorTokens(hidden).has(selector2)
+          )
+        ))
+          continue;
         const firstVisible = visibilityWindows.find((win) => makesOverlayVisible(win));
         if (!firstVisible) continue;
         const selector = selectors.find(
@@ -6435,6 +6445,9 @@ function extractFontFaceFamilies(styles) {
   }
   return families;
 }
+function declaredFontFamilies(styles, options) {
+  return /* @__PURE__ */ new Set([...extractFontFaceFamilies(styles), ...options.projectFontFamilies ?? []]);
+}
 function normalizeUsedFontName(part) {
   const name = part.trim().replace(/\s*!important\s*$/i, "").replace(/^['"]|['"]$/g, "").trim().toLowerCase();
   if (!name || name.includes("(") || name.includes(")")) return null;
@@ -6544,7 +6557,7 @@ var fontRules = [
   // so there is nothing for the author to act on.
   ({ styles, options }) => {
     if (!options.distributed) return [];
-    const declared = extractFontFaceFamilies(styles);
+    const declared = declaredFontFamilies(styles, options);
     const used = extractUsedFontFamilies(styles);
     const aliased = collectAliasedFonts(used, declared);
     if (aliased.length === 0) return [];
@@ -6560,7 +6573,7 @@ var fontRules = [
   ({ styles, source, rawSource, options, locate }) => {
     if (isRegistrySourceFile(options.filePath) || isRegistryInstalledFile(rawSource)) return [];
     const findings = [];
-    const declared = extractFontFaceFamilies(styles);
+    const declared = declaredFontFamilies(styles, options);
     const used = extractUsedFontFamilies(styles);
     const googleFonts = collectGoogleFontFamilies(source, styles);
     const undeclared = used.filter(
@@ -7512,6 +7525,42 @@ function resolveCssAssetCandidates(projectDir, url, htmlCompSrcPath, cssRootRela
   }
   return resolveLocalAssetCandidates(projectDir, url);
 }
+function mountedSources(projectDir, rootHtml, rootCompSrcPath) {
+  const sources = [{ html: rootHtml, compSrcPath: rootCompSrcPath }];
+  const seen = /* @__PURE__ */ new Set();
+  for (const source of sources) {
+    const { document } = parseHTML3(source.html);
+    for (const host of querySelectorAllIncludingTemplates(document, "[data-composition-src]")) {
+      const src = host.getAttribute("data-composition-src")?.trim();
+      if (!src || isUnresolvedAssetPlaceholder2(src) || isRemoteOrInlineUrl2(src)) continue;
+      const path = resolve(projectDir, src);
+      if (seen.has(path) || !isWithinProjectRoot2(projectDir, path)) continue;
+      seen.add(path);
+      const read = readProjectFile2(path);
+      if (read.kind !== "file") continue;
+      sources.push({
+        html: read.text,
+        compSrcPath: relative2(resolve(projectDir), path).replace(/\\/g, "/")
+      });
+    }
+  }
+  return sources;
+}
+function declaredProjectFontFamilies(projectDir, sources) {
+  const families = /* @__PURE__ */ new Set();
+  for (const { html, compSrcPath } of sources) {
+    const { document } = parseHTML3(html);
+    const styles = [
+      ...querySelectorAllIncludingTemplates(document, "style").map((style) => ({
+        content: style.textContent ?? ""
+      })),
+      ...collectLocalStylesheets(projectDir, document, compSrcPath)
+    ];
+    for (const family of extractFontFaceFamilies(styles)) families.add(family);
+    for (const family of collectGoogleFontFamilies(html, styles)) families.add(family);
+  }
+  return [...families];
+}
 async function lintProject(projectDir, entryFile, hostOptions = {}) {
   const indexPath = entryFile ? resolve(entryFile) : resolve(projectDir, "index.html");
   if (entryFile && !isWithinProjectRoot2(projectDir, indexPath)) {
@@ -7524,11 +7573,16 @@ async function lintProject(projectDir, entryFile, hostOptions = {}) {
   let totalWarnings = 0;
   let totalInfos = 0;
   const rootHtml = readFileSync(indexPath, "utf-8");
+  const projectFontFamilies = declaredProjectFontFamilies(
+    projectDir,
+    mountedSources(projectDir, rootHtml, rootCompSrcPath)
+  );
   const rootResult = await lintHyperframeHtml(rootHtml, {
     ...hostOptions,
     filePath: indexPath,
     compSrcPath: rootFile,
-    externalStyles: collectExternalStyles(projectDir, rootHtml, rootCompSrcPath)
+    externalStyles: collectExternalStyles(projectDir, rootHtml, rootCompSrcPath),
+    projectFontFamilies
   });
   results.push({ file: rootFile, result: rootResult, contentHash: contentDigest(rootHtml) });
   totalErrors += rootResult.errorCount;
@@ -7562,7 +7616,8 @@ async function lintProject(projectDir, entryFile, hostOptions = {}) {
         filePath,
         isSubComposition: true,
         compSrcPath,
-        externalStyles: collectExternalStyles(projectDir, html, compSrcPath)
+        externalStyles: collectExternalStyles(projectDir, html, compSrcPath),
+        projectFontFamilies
       });
       results.push({
         file: `compositions/${file}`,
@@ -7580,6 +7635,7 @@ async function lintProject(projectDir, entryFile, hostOptions = {}) {
     ...lintAudioSrcNotFound(projectDir, allHtmlSources),
     ...lintMissingLocalAsset(projectDir, allHtmlSources),
     ...lintTextureMaskAssetNotFound(projectDir, allHtmlSources),
+    ...lintLinkedStylesheetAssets(projectDir, allHtmlSources),
     ...!entryFile ? lintMultipleRootCompositions(projectDir) : [],
     ...!entryFile ? lintBlankRootWithStandaloneComposition(rootHtml, allHtmlSources) : [],
     ...lintDuplicateAudioTracks(projectDir, rootHtml),
@@ -7789,6 +7845,61 @@ function lintTextureMaskAssetNotFound(projectDir, htmlSources) {
     };
   });
 }
+function nearestAncestorMatch(projectDir, cssRootRelativePath, url) {
+  const root = resolve(projectDir);
+  for (let dir = resolve(root, dirname2(cssRootRelativePath), ".."); ; dir = dirname2(dir)) {
+    if (!isWithinProjectRoot2(projectDir, dir)) return null;
+    if (resolveLocalAssetCandidates(projectDir, relative2(root, join3(dir, url))).some(existsSync2)) {
+      return relative2(dirname2(resolve(root, cssRootRelativePath)), join3(dir, url)).replace(
+        /\\/g,
+        "/"
+      );
+    }
+    if (dir === root) return null;
+  }
+}
+function lintLinkedStylesheetAssets(projectDir, htmlSources) {
+  const seen = /* @__PURE__ */ new Set();
+  const findings = [];
+  for (const { html, compSrcPath } of htmlSources) {
+    for (const { content, rootRelativePath } of collectLocalStylesheets(
+      projectDir,
+      parseHTML3(html).document,
+      compSrcPath
+    )) {
+      let root;
+      try {
+        root = postcss4.parse(content);
+      } catch (error) {
+        if (!(error instanceof postcss4.CssSyntaxError)) throw error;
+        continue;
+      }
+      root.walkDecls((declaration) => {
+        if (/^(?:-webkit-)?mask-image$/i.test(declaration.prop)) return;
+        for (const match of declaration.value.matchAll(CSS_URL_RE)) {
+          const rawUrl = match[1] ?? match[2] ?? match[3] ?? "";
+          if (isUnresolvedAssetPlaceholder2(rawUrl)) continue;
+          const url = cleanAssetUrl2(rawUrl);
+          if (!url || isRemoteOrInlineUrl2(url) || url.startsWith("/")) continue;
+          if (resolveCssAssetCandidates(projectDir, url, void 0, rootRelativePath).some(existsSync2))
+            continue;
+          const key = `${rootRelativePath}\0${url}`;
+          if (seen.has(key)) continue;
+          seen.add(key);
+          const found = nearestAncestorMatch(projectDir, rootRelativePath, url);
+          findings.push({
+            code: "missing_stylesheet_asset",
+            severity: "warning",
+            file: join3(projectDir, rootRelativePath),
+            message: `${rootRelativePath} references url(${url}), which is not found beside the stylesheet (looked in ${dirname2(rootRelativePath)}/). The browser resolves url() from the stylesheet, so the file will 404.`,
+            fixHint: found ? `A file exists at "${found}" relative to the stylesheet. Change the url() to that path.` : `Add "${url}" beside the stylesheet, or point the url() at an existing file.`
+          });
+        }
+      });
+    }
+  }
+  return findings;
+}
 function lintMultipleRootCompositions(projectDir) {
   const findings = [];
   try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/lint",
-  "version": "0.8.220",
+  "version": "0.8.222",
   "repository": {
     "type": "git",
     "url": "https://github.com/heygen-com/hyperframes",
@@ -35,7 +35,7 @@
     "linkedom": "^0.18.12",
     "postcss": "^8.5.8",
     "postcss-selector-parser": "^7.1.4",
-    "@hyperframes/parsers": "0.8.220"
+    "@hyperframes/parsers": "0.8.222"
   },
   "devDependencies": {
     "@types/node": "^25.0.10",