@hyperframes/lint 0.8.41 → 0.8.43

package/dist/index.js

@@ -615,6 +615,11 @@ function buildLintContext(html, options = {}) {
 // src/rules/core.ts
 import postcss from "postcss";
 import selectorParser from "postcss-selector-parser";
+import {
+  HTML_BODY_CSS_WIDTH_FIRST_RE,
+  HTML_BODY_CSS_HEIGHT_FIRST_RE,
+  VIEWPORT_META_SIZE_RE
+} from "@hyperframes/parsers";
 function repeatedDescendantId(selector) {
   let repeated = null;
   const requiredPseudoIds = (pseudo) => {
@@ -787,6 +792,35 @@ function findVisibleMarkupCommentLeak(source) {
   }
   return null;
 }
+function readHtmlBodyCssSize(source) {
+  const widthFirst = source.match(HTML_BODY_CSS_WIDTH_FIRST_RE);
+  if (widthFirst) {
+    const [, width = "", height = ""] = widthFirst;
+    return { width, height };
+  }
+  const heightFirst = source.match(HTML_BODY_CSS_HEIGHT_FIRST_RE);
+  if (heightFirst) {
+    const [, height = "", width = ""] = heightFirst;
+    return { width, height };
+  }
+  return null;
+}
+function readViewportMetaSize(source) {
+  const match = source.match(VIEWPORT_META_SIZE_RE);
+  if (!match) return null;
+  const [, width = "", height = ""] = match;
+  return { width, height };
+}
+function describeSizeMismatch(label, size, dataWidth, dataHeight) {
+  if (!size || size.width === dataWidth && size.height === dataHeight) return null;
+  return `${label} is ${size.width}x${size.height}`;
+}
+function findScaffoldSizeMismatches(source, dataWidth, dataHeight) {
+  return [
+    describeSizeMismatch("html/body CSS", readHtmlBodyCssSize(source), dataWidth, dataHeight),
+    describeSizeMismatch("the viewport meta", readViewportMetaSize(source), dataWidth, dataHeight)
+  ].filter((mismatch) => mismatch !== null);
+}
 var coreRules = [
   // id_requires_css_escape
   ({ tags }) => {
@@ -831,6 +865,37 @@ var coreRules = [
     }
     return findings;
   },
+  // root_dimensions_mismatch
+  //
+  // Render size and the runtime's forced #root size both read the root's own
+  // data-width/data-height, so they stay correct. But editing only those two
+  // attributes — rather than scaffolding with `hyperframes init --resolution`,
+  // which rewrites the scaffold's other copies of the resolution too — leaves
+  // the `html, body` CSS and the `<meta viewport>` at the old value, and a
+  // stale body with `overflow: hidden` visually clips the correctly-sized
+  // root. `hyperframes check`'s layout audits can't see it: they measure
+  // against the root's own (already-correct) rect, not the body's.
+  //
+  // A sub-composition fragment has no html/body or viewport to compare
+  // against, which makes this top-level-only without a separate guard.
+  ({ rootTag, source }) => {
+    if (!rootTag) return [];
+    const dataWidth = readAttr(rootTag.raw, "data-width");
+    const dataHeight = readAttr(rootTag.raw, "data-height");
+    if (!dataWidth || !dataHeight) return [];
+    const mismatches = findScaffoldSizeMismatches(source, dataWidth, dataHeight);
+    if (mismatches.length === 0) return [];
+    return [
+      {
+        code: "root_dimensions_mismatch",
+        severity: "warning",
+        message: `Root composition declares data-width="${dataWidth}" data-height="${dataHeight}", but ${mismatches.join(" and ")}. The scaffolded body clips the composition at its old size.`,
+        elementId: readAttr(rootTag.raw, "id") || void 0,
+        fixHint: "update html/body CSS and the meta viewport to match, or scaffold with `hyperframes init --resolution portrait`",
+        snippet: truncateSnippet(rootTag.raw)
+      }
+    ];
+  },
   // unbalanced_style_tags
   ({ source }) => {
     let opens = 0;