framer-motion 12.23.27 → 12.23.28

package/dist/framer-motion.dev.js

@@ -119,7 +119,8 @@
 
     exports.warning = () => { };
     exports.invariant = () => { };
-    {
+    if (typeof process !== "undefined" &&
+        process.env?.NODE_ENV !== "production") {
         exports.warning = (check, message, errorCode) => {
             if (!check && typeof console !== "undefined") {
                 console.warn(formatErrorMessage(message, errorCode));
@@ -605,6 +606,17 @@
         return singleCssVariableRegex.test(value.split("/*")[0].trim());
     };
     const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
+    /**
+     * Check if a value contains a CSS variable anywhere (e.g. inside calc()).
+     * Unlike isCSSVariableToken which checks if the value IS a var() token,
+     * this checks if the value CONTAINS var() somewhere in the string.
+     */
+    function containsCSSVariable(value) {
+        if (typeof value !== "string")
+            return false;
+        // Strip comments to avoid false positives
+        return value.split("/*")[0].includes("var(--");
+    }
 
     const number = {
         test: (v) => typeof v === "number",
@@ -2608,7 +2620,7 @@
         /**
          * WAAPI doesn't natively have any interruption capabilities.
          *
-         * Rather than read commited styles back out of the DOM, we can
+         * Rather than read committed styles back out of the DOM, we can
          * create a renderless JS animation and sample it twice to calculate
          * its current value, "previous" value, and therefore allow
          * Motion to calculate velocity for any subsequent animation.
@@ -2804,7 +2816,7 @@
              * progress, which would feel snappier.
              *
              * However, if there's a delay (main thread work) between the creation of
-             * the animation and the first commited frame, we prefer to use resolvedAt
+             * the animation and the first committed frame, we prefer to use resolvedAt
              * to avoid a sudden jump into the animation.
              */
             const startTime = sync
@@ -3306,6 +3318,16 @@
             const [origin, target] = unresolvedKeyframes;
             const originType = findDimensionValueType(origin);
             const targetType = findDimensionValueType(target);
+            /**
+             * If one keyframe contains embedded CSS variables (e.g. in calc()) and the other
+             * doesn't, we need to measure to convert to pixels. This handles GitHub issue #3410.
+             */
+            const originHasVar = containsCSSVariable(origin);
+            const targetHasVar = containsCSSVariable(target);
+            if (originHasVar !== targetHasVar && positionalValues[name]) {
+                this.needsMeasurement = true;
+                return;
+            }
             /**
              * Either we don't recognise these value types or we can animate between them.
              */
@@ -5981,7 +6003,7 @@
                 });
             }
             if (delta) {
-                // Incoporate each ancestor's scale into a culmulative treeScale for this component
+                // Incoporate each ancestor's scale into a cumulative treeScale for this component
                 treeScale.x *= delta.x.scale;
                 treeScale.y *= delta.y.scale;
                 // Apply each ancestor's calculated delta into this component's recorded layout box
@@ -6707,7 +6729,7 @@
                             /**
                              * If the layout hasn't changed and we have an animation that hasn't started yet,
                              * finish it immediately. Otherwise it will be animating from a location
-                             * that was probably never commited to screen and look like a jumpy box.
+                             * that was probably never committed to screen and look like a jumpy box.
                              */
                             if (!hasLayoutChanged) {
                                 finishAnimation(this);
@@ -14220,6 +14242,7 @@
     exports.collectMotionValues = collectMotionValues;
     exports.color = color;
     exports.complex = complex;
+    exports.containsCSSVariable = containsCSSVariable;
     exports.convertOffsetToTimes = convertOffsetToTimes;
     exports.createBox = createBox;
     exports.createGeneratorEasing = createGeneratorEasing;