@hyperframes/lint 0.7.67 → 0.7.69

package/dist/index.js

@@ -300,6 +300,7 @@ function buildLintContext(html, options = {}) {
 
 // src/rules/core.ts
 import postcss from "postcss";
+import selectorParser from "postcss-selector-parser";
 function escapeRegExp(value) {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
@@ -309,6 +310,73 @@ function selectorTargetsCompositionId(selector, compositionId) {
     String.raw`\[\s*data-composition-id\s*=\s*(?:"${escaped}"|'${escaped}')\s*\]`
   ).test(selector);
 }
+function repeatedDescendantId(selector) {
+  let repeated = null;
+  const requiredPseudoIds = (pseudo) => {
+    if (![":is", ":where"].includes(pseudo.value.toLowerCase()) || pseudo.nodes.length === 0) {
+      return /* @__PURE__ */ new Set();
+    }
+    const optionIdSets = [];
+    for (const option of pseudo.nodes) {
+      if (option.nodes.some((node) => node.type === "combinator")) return /* @__PURE__ */ new Set();
+      const optionIds = new Set(
+        option.nodes.filter((node) => node.type === "id").map((node) => node.value)
+      );
+      optionIdSets.push(optionIds);
+    }
+    const [firstOptionIds, ...remainingOptionIds] = optionIdSets;
+    return new Set(
+      [...firstOptionIds ?? []].filter(
+        (id) => remainingOptionIds.every((optionIds) => optionIds.has(id))
+      )
+    );
+  };
+  try {
+    selectorParser((root) => {
+      root.each((selectorNode) => {
+        const firstCompoundById = /* @__PURE__ */ new Map();
+        let compound = 0;
+        selectorNode.each((node) => {
+          if (repeated) return;
+          if (node.type === "combinator") {
+            compound += 1;
+            return;
+          }
+          const requiredIds = node.type === "id" ? [node.value] : node.type === "pseudo" ? [...requiredPseudoIds(node)] : [];
+          for (const id of requiredIds) {
+            const firstCompound = firstCompoundById.get(id);
+            if (firstCompound !== void 0 && firstCompound !== compound) {
+              repeated = id;
+              return;
+            }
+            firstCompoundById.set(id, compound);
+          }
+        });
+      });
+    }).processSync(selector);
+  } catch {
+    return null;
+  }
+  return repeated;
+}
+function resolvedRuleSelectors(rule) {
+  let ancestor = rule.parent;
+  while (ancestor && ancestor.type !== "rule") ancestor = ancestor.parent;
+  if (!ancestor || ancestor.type !== "rule") return rule.selectors;
+  const parentSelectors = resolvedRuleSelectors(ancestor);
+  return parentSelectors.flatMap(
+    (parentSelector) => rule.selectors.map((childSelector) => {
+      const nestingToken = /(^|[\s>+~,(])&/g;
+      if (nestingToken.test(childSelector)) {
+        return childSelector.replace(
+          nestingToken,
+          (_, separator) => separator + parentSelector
+        );
+      }
+      return `${parentSelector} ${childSelector}`;
+    })
+  );
+}
 function isStudioTimelineElement(tag) {
   if (["script", "style", "link", "meta", "template", "noscript"].includes(tag.name)) {
     return false;
@@ -537,6 +605,34 @@ var coreRules = [
     }
     return findings;
   },
+  // repeated_id_descendant_selector
+  ({ styles }) => {
+    const findings = [];
+    const reported = /* @__PURE__ */ new Set();
+    for (const style of styles) {
+      let root;
+      try {
+        root = postcss.parse(style.content);
+      } catch {
+        continue;
+      }
+      root.walkRules((rule) => {
+        for (const selector of resolvedRuleSelectors(rule)) {
+          const repeatedId = repeatedDescendantId(selector);
+          if (!repeatedId || reported.has(repeatedId)) continue;
+          reported.add(repeatedId);
+          findings.push({
+            code: "repeated_id_descendant_selector",
+            severity: "error",
+            message: `Selector "${selector}" requires #${repeatedId} to be nested inside another #${repeatedId}. IDs must be unique, so this selector cannot match a valid composition.`,
+            selector,
+            fixHint: `Remove the duplicate ancestor: change \`#${repeatedId} #${repeatedId}\` to \`#${repeatedId}\`.`
+          });
+        }
+      });
+    }
+    return findings;
+  },
   // invalid_inline_script_syntax (malformed close tag)
   ({ source }) => {
     if (!INVALID_SCRIPT_CLOSE_PATTERN.test(source)) return [];
@@ -1265,6 +1361,10 @@ async function loadParseGsapScript() {
   const mod = await import("@hyperframes/parsers/gsap-parser-acorn");
   return mod.parseGsapScriptAcorn;
 }
+async function loadGsapScriptMotionPathFirstUseIndex() {
+  const mod = await import("@hyperframes/parsers/gsap-parser-acorn");
+  return mod.gsapScriptMotionPathFirstUseIndex;
+}
 var SCENE_BOUNDARY_EPSILON_SECONDS = 0.05;
 var UNRESOLVED_TARGET = "__unresolved__";
 function targetHasNoStableIdentity(selector, identity) {
@@ -2241,6 +2341,64 @@ ${right.raw}`)
       }
     ];
   },
+  // missing_gsap_plugin
+  async ({ scripts, rawSource, options }) => {
+    const canInheritPluginFromHost = options.isSubComposition || rawSource.trimStart().toLowerCase().startsWith("<template");
+    if (canInheritPluginFromHost) return [];
+    const gsapScriptMotionPathFirstUseIndex = await loadGsapScriptMotionPathFirstUseIndex();
+    const motionPathUseIndices = scripts.map(
+      (script) => gsapScriptMotionPathFirstUseIndex(script.content)
+    );
+    const firstMotionPathScriptIndex = motionPathUseIndices.findIndex((index) => index !== null);
+    const firstMotionPathUseIndex = motionPathUseIndices[firstMotionPathScriptIndex] ?? null;
+    const firstUseScript = scripts[firstMotionPathScriptIndex];
+    const executionMode = (attrs) => {
+      const tag = `<script ${attrs}>`;
+      const isModule = (readDecodedAttr(tag, "type") ?? "").toLowerCase() === "module";
+      const hasSrc = readDecodedAttr(tag, "src") !== null;
+      const hasAsync = readDecodedAttr(tag, "async") !== null;
+      const hasDefer = readDecodedAttr(tag, "defer") !== null;
+      if ((isModule || hasSrc) && hasAsync) return "async";
+      if (isModule) return "module";
+      if (hasSrc && hasDefer) return "defer";
+      return "blocking";
+    };
+    const firstUseMode = firstUseScript ? executionMode(firstUseScript.attrs) : "blocking";
+    const hasMotionPathPlugin = scripts.slice(0, firstMotionPathScriptIndex + 1).some((script, candidateIndex) => {
+      const candidateMode = executionMode(script.attrs);
+      const sameScript = candidateIndex === firstMotionPathScriptIndex;
+      const candidateIsPostParse = candidateMode === "defer" || candidateMode === "module";
+      const firstUseIsPostParse = firstUseMode === "defer" || firstUseMode === "module";
+      const executesBeforeFirstUse = sameScript || candidateMode === "blocking" || candidateIsPostParse && firstUseIsPostParse;
+      if (!executesBeforeFirstUse || !sameScript && candidateMode === "async") return false;
+      const src = readAttr(`<script ${script.attrs}>`, "src") ?? "";
+      const uncommented = stripJsComments(script.content);
+      const hasStaticImport = /\bimport\s+(?:[\s\S]*?\sfrom\s*)?["'][^"']*\bMotionPathPlugin\b[^"']*["']/.test(
+        uncommented
+      ) || /\bimport\s+(?:[\w$]+\s*,\s*)?\{[^}]*\bMotionPathPlugin\b[^}]*\}\s+from\s*["'][^"']+["']/.test(
+        uncommented
+      ) || /\bimport\s+MotionPathPlugin\s+from\s*["'][^"']+["']/.test(uncommented);
+      const inlinedMarkerIndex = script.content.search(/\/\*\s*inlined:.*MotionPathPlugin/i);
+      const definitionIndex = uncommented.search(
+        /\b(?:const|let|var|class|function)\s+MotionPathPlugin\b/
+      );
+      if (sameScript) {
+        if (hasStaticImport) return true;
+        if (firstMotionPathUseIndex === null) return false;
+        return inlinedMarkerIndex >= 0 && inlinedMarkerIndex < firstMotionPathUseIndex || definitionIndex >= 0 && definitionIndex < firstMotionPathUseIndex;
+      }
+      return /MotionPathPlugin/i.test(src) || hasStaticImport || inlinedMarkerIndex >= 0 || definitionIndex >= 0;
+    });
+    if (firstMotionPathScriptIndex < 0 || hasMotionPathPlugin) return [];
+    return [
+      {
+        code: "missing_gsap_plugin",
+        severity: "error",
+        message: "A GSAP tween uses motionPath, but MotionPathPlugin is not loaded. Core GSAP ignores this plugin-specific property, so the intended motion will not render.",
+        fixHint: "Load MotionPathPlugin before the animation script and register it with gsap.registerPlugin(MotionPathPlugin), or replace motionPath with core GSAP x/y tweens."
+      }
+    ];
+  },
   // audio_reactive_single_tween_per_group
   // fallow-ignore-next-line complexity
   ({ scripts, styles }) => {
@@ -4490,7 +4648,7 @@ var fontRules = [
     const used = extractUsedFontFamilies(styles);
     const googleFonts = collectGoogleFontFamilies(source, styles);
     const undeclared = used.filter(
-      (name) => !declared.has(name) && !FONT_ALIAS_KEYS.has(name) && !googleFonts.has(name)
+      (name) => !declared.has(name) && !FONT_ALIAS_KEYS.has(name) && !googleFonts.has(name.replace(/\+/g, " "))
     );
     if (undeclared.length === 0) return findings;
     findings.push({