@hyperframes/producer 0.1.9 → 0.1.10

package/dist/index.js

@@ -99590,6 +99590,76 @@ ${right2.raw}`)
       });
     }
   }
+  for (const script of scripts) {
+    const templateLiteralSelectorPattern = /(?:querySelector|querySelectorAll)\s*\(\s*`[^`]*\$\{[^}]+\}[^`]*`\s*\)/g;
+    let tlMatch;
+    while ((tlMatch = templateLiteralSelectorPattern.exec(script.content)) !== null) {
+      pushFinding({
+        code: "template_literal_selector",
+        severity: "error",
+        message: "querySelector uses a template literal variable (e.g. `${compId}`). The HTML bundler's CSS parser crashes on these. Use a hardcoded string instead.",
+        file: filePath,
+        fixHint: "Replace the template literal variable with a hardcoded string. The bundler's CSS parser cannot handle interpolated variables in script content.",
+        snippet: truncateSnippet(tlMatch[0])
+      });
+    }
+  }
+  {
+    const cssTranslateSelectors = /* @__PURE__ */ new Map();
+    const cssScaleSelectors = /* @__PURE__ */ new Map();
+    for (const style of styles) {
+      for (const [, selector, body] of style.content.matchAll(
+        /([#.][a-zA-Z0-9_-]+)\s*\{([^}]+)\}/g
+      )) {
+        const tMatch = body?.match(/transform\s*:\s*([^;]+)/);
+        if (!tMatch || !tMatch[1]) continue;
+        const transformVal = tMatch[1].trim();
+        if (/translate/i.test(transformVal)) {
+          cssTranslateSelectors.set((selector ?? "").trim(), transformVal);
+        }
+        if (/scale/i.test(transformVal)) {
+          cssScaleSelectors.set((selector ?? "").trim(), transformVal);
+        }
+      }
+    }
+    if (cssTranslateSelectors.size > 0 || cssScaleSelectors.size > 0) {
+      for (const script of scripts) {
+        if (!/gsap\.timeline/.test(script.content)) continue;
+        const windows = extractGsapWindows(script.content);
+        const conflicts = /* @__PURE__ */ new Map();
+        for (const win of windows) {
+          if (win.method === "fromTo") continue;
+          const sel = win.targetSelector;
+          const cssKey = sel.startsWith("#") || sel.startsWith(".") ? sel : `#${sel}`;
+          const translateProps = win.properties.filter(
+            (p) => ["x", "y", "xPercent", "yPercent"].includes(p)
+          );
+          const scaleProps = win.properties.filter((p) => p === "scale");
+          const cssFromTranslate = translateProps.length > 0 ? cssTranslateSelectors.get(cssKey) : void 0;
+          const cssFromScale = scaleProps.length > 0 ? cssScaleSelectors.get(cssKey) : void 0;
+          if (!cssFromTranslate && !cssFromScale) continue;
+          const existing = conflicts.get(sel) ?? {
+            cssTransform: [cssFromTranslate, cssFromScale].filter(Boolean).join(" "),
+            props: /* @__PURE__ */ new Set(),
+            raw: win.raw
+          };
+          for (const p of [...translateProps, ...scaleProps]) existing.props.add(p);
+          conflicts.set(sel, existing);
+        }
+        for (const [sel, { cssTransform, props, raw: raw2 }] of conflicts) {
+          const propList = [...props].join("/");
+          pushFinding({
+            code: "gsap_css_transform_conflict",
+            severity: "warning",
+            message: `"${sel}" has CSS \`transform: ${cssTransform}\` and a GSAP tween animates ${propList}. GSAP will overwrite the full CSS transform, discarding any translateX(-50%) centering or CSS scale value.`,
+            selector: sel,
+            fixHint: `Remove the transform from CSS and use tl.fromTo('${sel}', { xPercent: -50, x: -1000 }, { xPercent: -50, x: 0 }) so GSAP owns the full transform state. tl.fromTo is exempt from this rule.`,
+            snippet: truncateSnippet(raw2)
+          });
+        }
+      }
+    }
+  }
   const errorCount = findings.filter((finding) => finding.severity === "error").length;
   const warningCount = findings.length - errorCount;
   return {
@@ -99733,6 +99803,7 @@ function extractGsapWindows(script) {
       end: animation.position + meta.effectiveDuration,
       properties: meta.properties.length > 0 ? meta.properties : Object.keys(animation.properties),
       overwriteAuto: meta.overwriteAuto,
+      method: match2[1] ?? "to",
       raw: raw2
     });
   }