@hyperframes/lint 0.8.156 → 0.8.158

package/dist/browser.js

@@ -2577,9 +2577,9 @@ function countStructuralLines(source) {
   return countPhysicalLines(source.replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, "<style></style>"));
 }
 function isCaptionCue(tag) {
-  const classTokens = (readAttr(tag.raw, "class") || "").split(/\s+/).filter(Boolean);
+  const classTokens2 = (readAttr(tag.raw, "class") || "").split(/\s+/).filter(Boolean);
   const id = readAttr(tag.raw, "id");
-  return classTokens.some((token) => CAPTION_CUE_TOKEN.test(token)) || Boolean(id && CAPTION_CUE_TOKEN.test(id));
+  return classTokens2.some((token) => CAPTION_CUE_TOKEN.test(token)) || Boolean(id && CAPTION_CUE_TOKEN.test(id));
 }
 function isRegistrySourceFile(filePath) {
   if (!filePath) return false;
@@ -2879,6 +2879,58 @@ function elementSelector(tag) {
   const elementId = readAttr(tag.raw, "id");
   return elementId ? `#${elementId}` : void 0;
 }
+var STACKING_CONTEXT_DECLARATION = /(?:^|[;{])\s*(?:isolation\s*:\s*isolate|opacity\s*:\s*(?:0\b|0?\.\d+)|transform\s*:\s*(?!none\b)[^;]+|filter\s*:\s*(?!none\b)[^;]+|backdrop-filter\s*:\s*(?!none\b)[^;]+|-webkit-backdrop-filter\s*:\s*(?!none\b)[^;]+|contain\s*:[^;]*\bpaint\b|will-change\s*:[^;]*(?:transform|opacity|filter))/i;
+function stackingContextSelectors(styles) {
+  const selectors = /* @__PURE__ */ new Set();
+  for (const style of styles) {
+    const content = stripCssComments(style.content);
+    const rule = /([^{}]+)\{([^{}]*)\}/g;
+    let match;
+    while ((match = rule.exec(content)) !== null) {
+      if (!STACKING_CONTEXT_DECLARATION.test(match[2] ?? "")) continue;
+      for (const part of (match[1] ?? "").split(",")) {
+        const selector = part.trim();
+        if (/^[.#][\w-]+$/.test(selector)) selectors.add(selector);
+      }
+    }
+  }
+  return selectors;
+}
+function classTokens(tag) {
+  return (readAttr(tag.raw, "class") ?? "").split(/\s+/).filter(Boolean);
+}
+function tagMatchesSimpleSelector(tag, selector) {
+  if (selector.startsWith("#")) return readAttr(tag.raw, "id") === selector.slice(1);
+  if (selector.startsWith(".")) return classTokens(tag).includes(selector.slice(1));
+  return false;
+}
+function nearestParentTag(tag, tags) {
+  let parent;
+  for (const candidate of tags) {
+    if (candidate.closeIndex == null) continue;
+    if (tag.index <= candidate.index || tag.index >= candidate.closeIndex) continue;
+    if (!parent || candidate.index > parent.index) parent = candidate;
+  }
+  return parent;
+}
+function parentHasStackingContext(tag, tags, stacking) {
+  const parent = nearestParentTag(tag, tags);
+  if (!parent) return false;
+  return elementFormsStackingContext(parent, stacking);
+}
+function elementFormsStackingContext(tag, stacking) {
+  const id = readAttr(tag.raw, "id");
+  if (id && stacking.has(`#${id}`)) return true;
+  if (classTokens(tag).some((name) => stacking.has(`.${name}`))) return true;
+  const inline = readAttr(tag.raw, "style");
+  return Boolean(inline && STACKING_CONTEXT_DECLARATION.test(inline));
+}
+function negativeZIndexIsContained(selector, tags, stacking) {
+  if (!selector || !/^[.#][\w-]+$/.test(selector)) return false;
+  const matched = tags.filter((tag) => tagMatchesSimpleSelector(tag, selector));
+  if (matched.length === 0) return false;
+  return matched.every((tag) => parentHasStackingContext(tag, tags, stacking));
+}
 function negativeZIndexFinding(match, selector) {
   const level = match[1] ?? "";
   return {
@@ -3206,9 +3258,9 @@ var compositionRules = [
   // is in the DOM, laid out, and invisible. The message therefore names the CAUSE
   // and the remedy rather than implying the tool failed.
   //
-  // THE CONDITION IS LOAD-BEARING AND THE MESSAGE STATES IT. The element is only
-  // dropped when its nearest ancestor stacking context is the composition root,
-  // which is the shape #4366 reports. Give any ancestor a stacking context and it
+  // The element is only dropped when its nearest ancestor stacking context is
+  // the composition root,
+  // which is the shape #4366 reports. Give its parent a stacking context and it
   // renders correctly: measured at 0.8.72 on ONE frame carrying the same
   // `z-index: -1` band under six triggers -- isolation:isolate, transform,
   // opacity below 1, filter, contain:paint, will-change -- all six PRESENT at full
@@ -3216,19 +3268,22 @@ var compositionRules = [
   // That is ordinary CSS painting order: a negative-z child paints above its
   // stacking context root's own background, so only the root case is hidden.
   //
-  // This rule matches CSS TEXT and does not resolve the cascade, so it cannot know
-  // whether an ancestor forms a stacking context and fires on both shapes. That is
-  // why the message is CONDITIONAL rather than an assertion of absence: an
-  // unconditional "silently dropped" is false for every isolated case, and a lint
-  // message that overclaims is how authors learn to disregard the rule.
+  // A simple class or id parent that this file itself sets as a stacking
+  // context (isolation, transform, opacity below 1, filter, contain:paint,
+  // will-change) is enough to know the element paints. Anything the cascade
+  // could still hide stays a finding, and that message stays CONDITIONAL:
+  // an unconditional "silently dropped" is false for every isolated case.
   ({ tags, styles }) => {
     const findings = [];
+    const stacking = stackingContextSelectors(styles);
     for (const style of styles) {
       const content = stripCssComments(style.content);
       NEGATIVE_Z_INDEX.lastIndex = 0;
       let match;
       while ((match = NEGATIVE_Z_INDEX.exec(content)) !== null) {
-        findings.push(negativeZIndexFinding(match, cssOwnerSelector(content, match.index)));
+        const selector = cssOwnerSelector(content, match.index);
+        if (negativeZIndexIsContained(selector, tags, stacking)) continue;
+        findings.push(negativeZIndexFinding(match, selector));
       }
     }
     for (const tag of tags) {
@@ -3236,7 +3291,9 @@ var compositionRules = [
       if (!inline) continue;
       NEGATIVE_Z_INDEX.lastIndex = 0;
       const match = NEGATIVE_Z_INDEX.exec(inline);
-      if (match) findings.push(negativeZIndexFinding(match, elementSelector(tag)));
+      if (!match) continue;
+      if (parentHasStackingContext(tag, tags, stacking)) continue;
+      findings.push(negativeZIndexFinding(match, elementSelector(tag)));
     }
     return findings;
   },
@@ -3715,6 +3772,7 @@ async function loadGsapScriptMotionPathFirstUseIndex() {
   return mod.gsapScriptMotionPathFirstUseIndex;
 }
 var SCENE_BOUNDARY_EPSILON_SECONDS = 0.05;
+var TWEEN_ENDPOINT_EPSILON_SECONDS = 1e-3;
 var UNRESOLVED_TARGET = "__unresolved__";
 function targetHasNoStableIdentity(selector, identity) {
   if (identity) return false;
@@ -3793,6 +3851,16 @@ function stringValue(value) {
   if (typeof value === "number") return String(value);
   return null;
 }
+function fromToGroupSharesFromProperty(windows) {
+  if (windows.some((win) => win.fromPropertyValues === void 0)) return true;
+  const counts = /* @__PURE__ */ new Map();
+  for (const win of windows) {
+    for (const key of Object.keys(win.fromPropertyValues ?? {})) {
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    }
+  }
+  return [...counts.values()].some((count) => count >= 2);
+}
 function zeroValue(value) {
   if (typeof value === "number") return value === 0;
   if (typeof value !== "string") return false;
@@ -4445,7 +4513,7 @@ var gsapRules = [
           if (leftIdentity !== rightIdentity) continue;
           const overlapStart = Math.max(left.position, right.position);
           const overlapEnd = Math.min(left.end, right.end);
-          if (overlapEnd <= overlapStart) continue;
+          if (overlapEnd - overlapStart <= TWEEN_ENDPOINT_EPSILON_SECONDS) continue;
           if (left.overwriteAuto || right.overwriteAuto) continue;
           const sharedProperties = left.properties.filter(
             (prop) => right.properties.includes(prop)
@@ -4471,7 +4539,7 @@ ${right.raw}`)
         fromToWindowsBySelector.set(win.targetSelector, windows);
       }
       const repeatedFromToGroups = [...fromToWindowsBySelector.values()].filter(
-        (windows) => windows.length >= 2
+        (windows) => windows.length >= 2 && fromToGroupSharesFromProperty(windows)
       );
       for (const fromToWindows of repeatedFromToGroups) {
         const firstFromTo = fromToWindows[0];

package/dist/index.js

@@ -2583,9 +2583,9 @@ function countStructuralLines(source) {
   return countPhysicalLines(source.replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, "<style></style>"));
 }
 function isCaptionCue(tag) {
-  const classTokens = (readAttr(tag.raw, "class") || "").split(/\s+/).filter(Boolean);
+  const classTokens2 = (readAttr(tag.raw, "class") || "").split(/\s+/).filter(Boolean);
   const id = readAttr(tag.raw, "id");
-  return classTokens.some((token) => CAPTION_CUE_TOKEN.test(token)) || Boolean(id && CAPTION_CUE_TOKEN.test(id));
+  return classTokens2.some((token) => CAPTION_CUE_TOKEN.test(token)) || Boolean(id && CAPTION_CUE_TOKEN.test(id));
 }
 function isRegistrySourceFile(filePath) {
   if (!filePath) return false;
@@ -2885,6 +2885,58 @@ function elementSelector(tag) {
   const elementId = readAttr(tag.raw, "id");
   return elementId ? `#${elementId}` : void 0;
 }
+var STACKING_CONTEXT_DECLARATION = /(?:^|[;{])\s*(?:isolation\s*:\s*isolate|opacity\s*:\s*(?:0\b|0?\.\d+)|transform\s*:\s*(?!none\b)[^;]+|filter\s*:\s*(?!none\b)[^;]+|backdrop-filter\s*:\s*(?!none\b)[^;]+|-webkit-backdrop-filter\s*:\s*(?!none\b)[^;]+|contain\s*:[^;]*\bpaint\b|will-change\s*:[^;]*(?:transform|opacity|filter))/i;
+function stackingContextSelectors(styles) {
+  const selectors = /* @__PURE__ */ new Set();
+  for (const style of styles) {
+    const content = stripCssComments(style.content);
+    const rule = /([^{}]+)\{([^{}]*)\}/g;
+    let match;
+    while ((match = rule.exec(content)) !== null) {
+      if (!STACKING_CONTEXT_DECLARATION.test(match[2] ?? "")) continue;
+      for (const part of (match[1] ?? "").split(",")) {
+        const selector = part.trim();
+        if (/^[.#][\w-]+$/.test(selector)) selectors.add(selector);
+      }
+    }
+  }
+  return selectors;
+}
+function classTokens(tag) {
+  return (readAttr(tag.raw, "class") ?? "").split(/\s+/).filter(Boolean);
+}
+function tagMatchesSimpleSelector(tag, selector) {
+  if (selector.startsWith("#")) return readAttr(tag.raw, "id") === selector.slice(1);
+  if (selector.startsWith(".")) return classTokens(tag).includes(selector.slice(1));
+  return false;
+}
+function nearestParentTag(tag, tags) {
+  let parent;
+  for (const candidate of tags) {
+    if (candidate.closeIndex == null) continue;
+    if (tag.index <= candidate.index || tag.index >= candidate.closeIndex) continue;
+    if (!parent || candidate.index > parent.index) parent = candidate;
+  }
+  return parent;
+}
+function parentHasStackingContext(tag, tags, stacking) {
+  const parent = nearestParentTag(tag, tags);
+  if (!parent) return false;
+  return elementFormsStackingContext(parent, stacking);
+}
+function elementFormsStackingContext(tag, stacking) {
+  const id = readAttr(tag.raw, "id");
+  if (id && stacking.has(`#${id}`)) return true;
+  if (classTokens(tag).some((name) => stacking.has(`.${name}`))) return true;
+  const inline = readAttr(tag.raw, "style");
+  return Boolean(inline && STACKING_CONTEXT_DECLARATION.test(inline));
+}
+function negativeZIndexIsContained(selector, tags, stacking) {
+  if (!selector || !/^[.#][\w-]+$/.test(selector)) return false;
+  const matched = tags.filter((tag) => tagMatchesSimpleSelector(tag, selector));
+  if (matched.length === 0) return false;
+  return matched.every((tag) => parentHasStackingContext(tag, tags, stacking));
+}
 function negativeZIndexFinding(match, selector) {
   const level = match[1] ?? "";
   return {
@@ -3212,9 +3264,9 @@ var compositionRules = [
   // is in the DOM, laid out, and invisible. The message therefore names the CAUSE
   // and the remedy rather than implying the tool failed.
   //
-  // THE CONDITION IS LOAD-BEARING AND THE MESSAGE STATES IT. The element is only
-  // dropped when its nearest ancestor stacking context is the composition root,
-  // which is the shape #4366 reports. Give any ancestor a stacking context and it
+  // The element is only dropped when its nearest ancestor stacking context is
+  // the composition root,
+  // which is the shape #4366 reports. Give its parent a stacking context and it
   // renders correctly: measured at 0.8.72 on ONE frame carrying the same
   // `z-index: -1` band under six triggers -- isolation:isolate, transform,
   // opacity below 1, filter, contain:paint, will-change -- all six PRESENT at full
@@ -3222,19 +3274,22 @@ var compositionRules = [
   // That is ordinary CSS painting order: a negative-z child paints above its
   // stacking context root's own background, so only the root case is hidden.
   //
-  // This rule matches CSS TEXT and does not resolve the cascade, so it cannot know
-  // whether an ancestor forms a stacking context and fires on both shapes. That is
-  // why the message is CONDITIONAL rather than an assertion of absence: an
-  // unconditional "silently dropped" is false for every isolated case, and a lint
-  // message that overclaims is how authors learn to disregard the rule.
+  // A simple class or id parent that this file itself sets as a stacking
+  // context (isolation, transform, opacity below 1, filter, contain:paint,
+  // will-change) is enough to know the element paints. Anything the cascade
+  // could still hide stays a finding, and that message stays CONDITIONAL:
+  // an unconditional "silently dropped" is false for every isolated case.
   ({ tags, styles }) => {
     const findings = [];
+    const stacking = stackingContextSelectors(styles);
     for (const style of styles) {
       const content = stripCssComments(style.content);
       NEGATIVE_Z_INDEX.lastIndex = 0;
       let match;
       while ((match = NEGATIVE_Z_INDEX.exec(content)) !== null) {
-        findings.push(negativeZIndexFinding(match, cssOwnerSelector(content, match.index)));
+        const selector = cssOwnerSelector(content, match.index);
+        if (negativeZIndexIsContained(selector, tags, stacking)) continue;
+        findings.push(negativeZIndexFinding(match, selector));
       }
     }
     for (const tag of tags) {
@@ -3242,7 +3297,9 @@ var compositionRules = [
       if (!inline) continue;
       NEGATIVE_Z_INDEX.lastIndex = 0;
       const match = NEGATIVE_Z_INDEX.exec(inline);
-      if (match) findings.push(negativeZIndexFinding(match, elementSelector(tag)));
+      if (!match) continue;
+      if (parentHasStackingContext(tag, tags, stacking)) continue;
+      findings.push(negativeZIndexFinding(match, elementSelector(tag)));
     }
     return findings;
   },
@@ -3721,6 +3778,7 @@ async function loadGsapScriptMotionPathFirstUseIndex() {
   return mod.gsapScriptMotionPathFirstUseIndex;
 }
 var SCENE_BOUNDARY_EPSILON_SECONDS = 0.05;
+var TWEEN_ENDPOINT_EPSILON_SECONDS = 1e-3;
 var UNRESOLVED_TARGET = "__unresolved__";
 function targetHasNoStableIdentity(selector, identity) {
   if (identity) return false;
@@ -3799,6 +3857,16 @@ function stringValue(value) {
   if (typeof value === "number") return String(value);
   return null;
 }
+function fromToGroupSharesFromProperty(windows) {
+  if (windows.some((win) => win.fromPropertyValues === void 0)) return true;
+  const counts = /* @__PURE__ */ new Map();
+  for (const win of windows) {
+    for (const key of Object.keys(win.fromPropertyValues ?? {})) {
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    }
+  }
+  return [...counts.values()].some((count) => count >= 2);
+}
 function zeroValue(value) {
   if (typeof value === "number") return value === 0;
   if (typeof value !== "string") return false;
@@ -4451,7 +4519,7 @@ var gsapRules = [
           if (leftIdentity !== rightIdentity) continue;
           const overlapStart = Math.max(left.position, right.position);
           const overlapEnd = Math.min(left.end, right.end);
-          if (overlapEnd <= overlapStart) continue;
+          if (overlapEnd - overlapStart <= TWEEN_ENDPOINT_EPSILON_SECONDS) continue;
           if (left.overwriteAuto || right.overwriteAuto) continue;
           const sharedProperties = left.properties.filter(
             (prop) => right.properties.includes(prop)
@@ -4477,7 +4545,7 @@ ${right.raw}`)
         fromToWindowsBySelector.set(win.targetSelector, windows);
       }
       const repeatedFromToGroups = [...fromToWindowsBySelector.values()].filter(
-        (windows) => windows.length >= 2
+        (windows) => windows.length >= 2 && fromToGroupSharesFromProperty(windows)
       );
       for (const fromToWindows of repeatedFromToGroups) {
         const firstFromTo = fromToWindows[0];

package/package.json

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