@hyperframes/lint 0.8.207 → 0.8.208

package/dist/browser.js

@@ -4117,6 +4117,23 @@ ${allInlineStyles}`.replace(/\/\*[\s\S]*?\*\//g, "");
         snippet: truncateSnippet(rootTag.raw)
       }
     ];
+  },
+  // subcomposition_linked_style_names_root_id
+  // The compiler flattens a sub-composition root into its host and rewrites inline <style>
+  // selectors to match; a linked stylesheet is not rewritten, so `#root-id` in it matches nothing.
+  ({ styles, rootTag, options }) => {
+    if (!options.isSubComposition || !rootTag) return [];
+    const rootId = readAttr(rootTag.raw, "id");
+    if (!rootId) return [];
+    const escaped = rootId.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const names = new RegExp(`#${escaped}(?![\\w-])`);
+    return styles.filter((style) => style.index === -1 && names.test(stripCssComments(style.content))).map((style) => ({
+      code: "subcomposition_linked_style_names_root_id",
+      severity: "warning",
+      message: `The linked stylesheet "${style.rootRelativePath ?? style.file}" has a rule on #${rootId}, the id of this sub-composition's root. The root is merged into its host when the composition is compiled, so that selector matches nothing (the same rule in an inline <style> is rewritten and works).`,
+      fixHint: `Move the #${rootId} rules into a <style> inside the <template>, where they are rewritten for the merged root, or select a child element of the root in the linked file instead of the root itself.`,
+      snippet: truncateSnippet(style.content.slice(0, 120))
+    }));
   }
 ];
 var CLIP_MEDIA_TAGS = /* @__PURE__ */ new Set(["img", "video", "audio"]);
@@ -6872,6 +6889,68 @@ var shaderRules = [
   })
 ];
 
+// src/rules/rootPaths.ts
+var URL_ATTRS = ["src", "href", "poster", "xlink:href"];
+var ROOT_PATH = /^\/(?!\/)/;
+var CSS_ROOT_URL = /\burl\(\s*["']?(\/(?!\/)[^"')\s]*)/g;
+var SCRIPT_ROOT_URL = /\b(?:fetch|new\s+URL)\(\s*(["'`])(\/(?!\/)[^"'`$]*)\1/g;
+function relativeForm(path, cssFile) {
+  const depth = (cssFile ?? "").split("/").filter(Boolean).length - 1;
+  return `${"../".repeat(Math.max(depth, 0))}${path.slice(1)}`;
+}
+function rootPathFinding(path, cssFile, snippet) {
+  return {
+    code: "root_path_missing_in_preview",
+    severity: "warning",
+    message: `"${path}" starts at the server's root. Render and snapshot serve the project there, but Studio's preview serves it under the project's own path, so the preview cannot find this file.`,
+    fixHint: `Use "${relativeForm(path, cssFile)}" instead.`,
+    snippet: truncateSnippet(snippet)
+  };
+}
+function cssRootPaths(css, cssFile) {
+  return [...css.matchAll(CSS_ROOT_URL)].map(
+    (match) => rootPathFinding(match[1] ?? "", cssFile, match[0])
+  );
+}
+function tagRootPaths(tag) {
+  if (tag.name === "a" || tag.name === "base") return [];
+  const paths = URL_ATTRS.map((attr) => readAttr(tag.raw, attr)?.trim() ?? "").filter(
+    (value) => ROOT_PATH.test(value)
+  );
+  return [
+    ...paths.map((path) => rootPathFinding(path, void 0, tag.raw)),
+    ...cssRootPaths(readAttr(tag.raw, "style") ?? "")
+  ];
+}
+var scriptRootPaths = (script) => [...script.matchAll(SCRIPT_ROOT_URL)].map(
+  (match) => rootPathFinding(match[2] ?? "", void 0, match[0])
+);
+function invalidImportMap(script) {
+  if (!/\btype\s*=\s*["']?importmap\b/i.test(script.attrs)) return [];
+  try {
+    JSON.parse(script.content);
+    return [];
+  } catch (error) {
+    return [
+      {
+        code: "import_map_invalid",
+        severity: "warning",
+        message: `This import map is not valid JSON (${error instanceof Error ? error.message : String(error)}). The browser ignores it, and preview cannot map root module paths ("/assets/x.js") to the project.`,
+        fixHint: "Make the import map valid JSON: double-quoted keys and values, no trailing commas.",
+        snippet: truncateSnippet(script.content)
+      }
+    ];
+  }
+}
+var rootPathRules = [
+  (ctx) => [
+    ...ctx.tags.flatMap(tagRootPaths),
+    ...ctx.styles.flatMap((style) => cssRootPaths(style.content, style.rootRelativePath)),
+    ...ctx.scripts.flatMap((script) => scriptRootPaths(script.content)),
+    ...ctx.scripts.flatMap(invalidImportMap)
+  ]
+];
+
 // src/hyperframeLinter.ts
 var RULE_GROUPS = [
   { group: "core", rules: coreRules },
@@ -6884,7 +6963,8 @@ var RULE_GROUPS = [
   { group: "fonts", rules: fontRules },
   { group: "slideshow", rules: slideshowRules },
   { group: "structure", rules: structureRules },
-  { group: "shaders", rules: shaderRules }
+  { group: "shaders", rules: shaderRules },
+  { group: "rootPaths", rules: rootPathRules }
 ];
 var LINT_RULE_COUNT = RULE_GROUPS.reduce((n, g) => n + g.rules.length, 0);
 var LINT_RULE_GROUP_COUNTS = Object.fromEntries(

package/dist/index.js

@@ -4123,6 +4123,23 @@ ${allInlineStyles}`.replace(/\/\*[\s\S]*?\*\//g, "");
         snippet: truncateSnippet(rootTag.raw)
       }
     ];
+  },
+  // subcomposition_linked_style_names_root_id
+  // The compiler flattens a sub-composition root into its host and rewrites inline <style>
+  // selectors to match; a linked stylesheet is not rewritten, so `#root-id` in it matches nothing.
+  ({ styles, rootTag, options }) => {
+    if (!options.isSubComposition || !rootTag) return [];
+    const rootId = readAttr(rootTag.raw, "id");
+    if (!rootId) return [];
+    const escaped = rootId.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const names = new RegExp(`#${escaped}(?![\\w-])`);
+    return styles.filter((style) => style.index === -1 && names.test(stripCssComments(style.content))).map((style) => ({
+      code: "subcomposition_linked_style_names_root_id",
+      severity: "warning",
+      message: `The linked stylesheet "${style.rootRelativePath ?? style.file}" has a rule on #${rootId}, the id of this sub-composition's root. The root is merged into its host when the composition is compiled, so that selector matches nothing (the same rule in an inline <style> is rewritten and works).`,
+      fixHint: `Move the #${rootId} rules into a <style> inside the <template>, where they are rewritten for the merged root, or select a child element of the root in the linked file instead of the root itself.`,
+      snippet: truncateSnippet(style.content.slice(0, 120))
+    }));
   }
 ];
 var CLIP_MEDIA_TAGS = /* @__PURE__ */ new Set(["img", "video", "audio"]);
@@ -6878,6 +6895,68 @@ var shaderRules = [
   })
 ];
 
+// src/rules/rootPaths.ts
+var URL_ATTRS = ["src", "href", "poster", "xlink:href"];
+var ROOT_PATH = /^\/(?!\/)/;
+var CSS_ROOT_URL = /\burl\(\s*["']?(\/(?!\/)[^"')\s]*)/g;
+var SCRIPT_ROOT_URL = /\b(?:fetch|new\s+URL)\(\s*(["'`])(\/(?!\/)[^"'`$]*)\1/g;
+function relativeForm(path, cssFile) {
+  const depth = (cssFile ?? "").split("/").filter(Boolean).length - 1;
+  return `${"../".repeat(Math.max(depth, 0))}${path.slice(1)}`;
+}
+function rootPathFinding(path, cssFile, snippet) {
+  return {
+    code: "root_path_missing_in_preview",
+    severity: "warning",
+    message: `"${path}" starts at the server's root. Render and snapshot serve the project there, but Studio's preview serves it under the project's own path, so the preview cannot find this file.`,
+    fixHint: `Use "${relativeForm(path, cssFile)}" instead.`,
+    snippet: truncateSnippet(snippet)
+  };
+}
+function cssRootPaths(css, cssFile) {
+  return [...css.matchAll(CSS_ROOT_URL)].map(
+    (match) => rootPathFinding(match[1] ?? "", cssFile, match[0])
+  );
+}
+function tagRootPaths(tag) {
+  if (tag.name === "a" || tag.name === "base") return [];
+  const paths = URL_ATTRS.map((attr) => readAttr(tag.raw, attr)?.trim() ?? "").filter(
+    (value) => ROOT_PATH.test(value)
+  );
+  return [
+    ...paths.map((path) => rootPathFinding(path, void 0, tag.raw)),
+    ...cssRootPaths(readAttr(tag.raw, "style") ?? "")
+  ];
+}
+var scriptRootPaths = (script) => [...script.matchAll(SCRIPT_ROOT_URL)].map(
+  (match) => rootPathFinding(match[2] ?? "", void 0, match[0])
+);
+function invalidImportMap(script) {
+  if (!/\btype\s*=\s*["']?importmap\b/i.test(script.attrs)) return [];
+  try {
+    JSON.parse(script.content);
+    return [];
+  } catch (error) {
+    return [
+      {
+        code: "import_map_invalid",
+        severity: "warning",
+        message: `This import map is not valid JSON (${error instanceof Error ? error.message : String(error)}). The browser ignores it, and preview cannot map root module paths ("/assets/x.js") to the project.`,
+        fixHint: "Make the import map valid JSON: double-quoted keys and values, no trailing commas.",
+        snippet: truncateSnippet(script.content)
+      }
+    ];
+  }
+}
+var rootPathRules = [
+  (ctx) => [
+    ...ctx.tags.flatMap(tagRootPaths),
+    ...ctx.styles.flatMap((style) => cssRootPaths(style.content, style.rootRelativePath)),
+    ...ctx.scripts.flatMap((script) => scriptRootPaths(script.content)),
+    ...ctx.scripts.flatMap(invalidImportMap)
+  ]
+];
+
 // src/hyperframeLinter.ts
 var RULE_GROUPS = [
   { group: "core", rules: coreRules },
@@ -6890,7 +6969,8 @@ var RULE_GROUPS = [
   { group: "fonts", rules: fontRules },
   { group: "slideshow", rules: slideshowRules },
   { group: "structure", rules: structureRules },
-  { group: "shaders", rules: shaderRules }
+  { group: "shaders", rules: shaderRules },
+  { group: "rootPaths", rules: rootPathRules }
 ];
 var LINT_RULE_COUNT = RULE_GROUPS.reduce((n, g) => n + g.rules.length, 0);
 var LINT_RULE_GROUP_COUNTS = Object.fromEntries(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/lint",
-  "version": "0.8.207",
+  "version": "0.8.208",
   "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.207"
+    "@hyperframes/parsers": "0.8.208"
   },
   "devDependencies": {
     "@types/node": "^25.0.10",