framer-motion 10.12.2 → 10.12.3

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var indexLegacy = require('./index-legacy-5ce04d2d.js');
+var indexLegacy = require('./index-legacy-ec713eb3.js');
 
 
 

package/dist/cjs/{index-legacy-5ce04d2d.js → index-legacy-ec713eb3.js}

@@ -150,6 +150,7 @@ function buildTransform(transform, { enableHardwareAcceleration = true, allowTra
 const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
 const isCSSVariableName = checkStringStartsWith("--");
 const isCSSVariableToken = checkStringStartsWith("var(--");
+const cssVariableRegex = /var\s*\(\s*--[\w-]+(\s*,\s*(?:(?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)+)?\s*\)/g;
 
 /**
  * Provided a value and a ValueType, returns the value as that value type.
@@ -1139,8 +1140,6 @@ const mixColor = (from, to) => {
     };
 };
 
-const colorToken = "${c}";
-const numberToken = "${n}";
 function test(v) {
     var _a, _b;
     return (isNaN(v) &&
@@ -1149,52 +1148,84 @@ function test(v) {
             (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
             0);
 }
-function analyseComplexValue(v) {
-    if (typeof v === "number")
-        v = `${v}`;
-    const values = [];
-    let numColors = 0;
-    let numNumbers = 0;
-    const colors = v.match(colorRegex);
-    if (colors) {
-        numColors = colors.length;
-        // Strip colors from input so they're not picked up by number regex.
-        // There's a better way to combine these regex searches, but its beyond my regex skills
-        v = v.replace(colorRegex, colorToken);
-        values.push(...colors.map(color.parse));
-    }
-    const numbers = v.match(floatRegex);
-    if (numbers) {
-        numNumbers = numbers.length;
-        v = v.replace(floatRegex, numberToken);
-        values.push(...numbers.map(number.parse));
-    }
-    return { values, numColors, numNumbers, tokenised: v };
-}
-function parse(v) {
+const cssVarTokeniser = {
+    regex: cssVariableRegex,
+    countKey: "Vars",
+    token: "${v}",
+    parse: noop,
+};
+const colorTokeniser = {
+    regex: colorRegex,
+    countKey: "Colors",
+    token: "${c}",
+    parse: color.parse,
+};
+const numberTokeniser = {
+    regex: floatRegex,
+    countKey: "Numbers",
+    token: "${n}",
+    parse: number.parse,
+};
+function tokenise(info, { regex, countKey, token, parse }) {
+    const matches = info.tokenised.match(regex);
+    if (!matches)
+        return;
+    info["num" + countKey] = matches.length;
+    info.tokenised = info.tokenised.replace(regex, token);
+    info.values.push(...matches.map(parse));
+}
+function analyseComplexValue(value) {
+    const originalValue = value.toString();
+    const info = {
+        value: originalValue,
+        tokenised: originalValue,
+        values: [],
+        numVars: 0,
+        numColors: 0,
+        numNumbers: 0,
+    };
+    if (info.value.includes("var(--"))
+        tokenise(info, cssVarTokeniser);
+    tokenise(info, colorTokeniser);
+    tokenise(info, numberTokeniser);
+    return info;
+}
+function parseComplexValue(v) {
     return analyseComplexValue(v).values;
 }
 function createTransformer(source) {
-    const { values, numColors, tokenised } = analyseComplexValue(source);
+    const { values, numColors, numVars, tokenised } = analyseComplexValue(source);
     const numValues = values.length;
     return (v) => {
         let output = tokenised;
         for (let i = 0; i < numValues; i++) {
-            output = output.replace(i < numColors ? colorToken : numberToken, i < numColors
-                ? color.transform(v[i])
-                : sanitize(v[i]));
+            if (i < numVars) {
+                output = output.replace(cssVarTokeniser.token, v[i]);
+            }
+            else if (i < numVars + numColors) {
+                output = output.replace(colorTokeniser.token, color.transform(v[i]));
+            }
+            else {
+                output = output.replace(numberTokeniser.token, sanitize(v[i]));
+            }
         }
         return output;
     };
 }
 const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
 function getAnimatableNone$1(v) {
-    const parsed = parse(v);
+    const parsed = parseComplexValue(v);
     const transformer = createTransformer(v);
     return transformer(parsed.map(convertNumbersToZero));
 }
-const complex = { test, parse, createTransformer, getAnimatableNone: getAnimatableNone$1 };
+const complex = {
+    test,
+    parse: parseComplexValue,
+    createTransformer,
+    getAnimatableNone: getAnimatableNone$1,
+};
 
+const mixImmediate = (origin, target) => (p) => `${p > 0 ? target : origin}`;
 function getMixer$1(origin, target) {
     if (typeof origin === "number") {
         return (v) => mix(origin, target, v);
@@ -1203,7 +1234,9 @@ function getMixer$1(origin, target) {
         return mixColor(origin, target);
     }
     else {
-        return mixComplex(origin, target);
+        return origin.startsWith("var(")
+            ? mixImmediate(origin, target)
+            : mixComplex(origin, target);
     }
 }
 const mixArray = (from, to) => {
@@ -1236,14 +1269,15 @@ const mixComplex = (origin, target) => {
     const template = complex.createTransformer(target);
     const originStats = analyseComplexValue(origin);
     const targetStats = analyseComplexValue(target);
-    const canInterpolate = originStats.numColors === targetStats.numColors &&
+    const canInterpolate = originStats.numVars === targetStats.numVars &&
+        originStats.numColors === targetStats.numColors &&
         originStats.numNumbers >= targetStats.numNumbers;
     if (canInterpolate) {
         return pipe(mixArray(originStats.values, targetStats.values), template);
     }
     else {
         exports.warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
-        return (p) => `${p > 0 ? target : origin}`;
+        return mixImmediate(origin, target);
     }
 };
 
@@ -1270,12 +1304,7 @@ function detectMixerFactory(v) {
         return mixNumber;
     }
     else if (typeof v === "string") {
-        if (color.test(v)) {
-            return mixColor;
-        }
-        else {
-            return mixComplex;
-        }
+        return color.test(v) ? mixColor : mixComplex;
     }
     else if (Array.isArray(v)) {
         return mixArray;
@@ -2622,7 +2651,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "10.12.2";
+        this.version = "10.12.3";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3455,9 +3484,9 @@ function isSVGElement(element) {
  *
  * @param current
  */
-const cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
+const splitCSSVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
 function parseCSSVariable(current) {
-    const match = cssVariableRegex.exec(current);
+    const match = splitCSSVariableRegex.exec(current);
     if (!match)
         return [,];
     const [, token, fallback] = match;
@@ -3794,7 +3823,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.12.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.2 may not work as expected.`);
+                warnOnce(nextValue.version === "10.12.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5395,7 +5424,6 @@ exports.convertBoxToBoundingBox = convertBoxToBoundingBox;
 exports.createBox = createBox;
 exports.createDelta = createDelta;
 exports.createScopedAnimate = createScopedAnimate;
-exports.cssVariableRegex = cssVariableRegex;
 exports.cubicBezier = cubicBezier;
 exports.delay = delay;
 exports.distance = distance;

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var indexLegacy = require('./index-legacy-5ce04d2d.js');
+var indexLegacy = require('./index-legacy-ec713eb3.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -4312,21 +4312,9 @@ const correctBorderRadius = {
     },
 };
 
-const varToken = "_$css";
 const correctBoxShadow = {
     correct: (latest, { treeScale, projectionDelta }) => {
         const original = latest;
-        /**
-         * We need to first strip and store CSS variables from the string.
-         */
-        const containsCSSVariables = latest.includes("var(");
-        const cssVariables = [];
-        if (containsCSSVariables) {
-            latest = latest.replace(indexLegacy.cssVariableRegex, (match) => {
-                cssVariables.push(match);
-                return varToken;
-            });
-        }
         const shadow = indexLegacy.complex.parse(latest);
         // TODO: Doesn't support multiple shadows
         if (shadow.length > 5)
@@ -4351,16 +4339,7 @@ const correctBoxShadow = {
         // Spread
         if (typeof shadow[3 + offset] === "number")
             shadow[3 + offset] /= averageScale;
-        let output = template(shadow);
-        if (containsCSSVariables) {
-            let i = 0;
-            output = output.replace(varToken, () => {
-                const cssVariable = cssVariables[i];
-                i++;
-                return cssVariable;
-            });
-        }
-        return output;
+        return template(shadow);
     },
 };
 

package/dist/es/projection/styles/scale-box-shadow.mjs

@@ -1,22 +1,9 @@
-import { cssVariableRegex } from '../../render/dom/utils/css-variables-conversion.mjs';
 import { mix } from '../../utils/mix.mjs';
 import { complex } from '../../value/types/complex/index.mjs';
 
-const varToken = "_$css";
 const correctBoxShadow = {
     correct: (latest, { treeScale, projectionDelta }) => {
         const original = latest;
-        /**
-         * We need to first strip and store CSS variables from the string.
-         */
-        const containsCSSVariables = latest.includes("var(");
-        const cssVariables = [];
-        if (containsCSSVariables) {
-            latest = latest.replace(cssVariableRegex, (match) => {
-                cssVariables.push(match);
-                return varToken;
-            });
-        }
         const shadow = complex.parse(latest);
         // TODO: Doesn't support multiple shadows
         if (shadow.length > 5)
@@ -41,16 +28,7 @@ const correctBoxShadow = {
         // Spread
         if (typeof shadow[3 + offset] === "number")
             shadow[3 + offset] /= averageScale;
-        let output = template(shadow);
-        if (containsCSSVariables) {
-            let i = 0;
-            output = output.replace(varToken, () => {
-                const cssVariable = cssVariables[i];
-                i++;
-                return cssVariable;
-            });
-        }
-        return output;
+        return template(shadow);
     },
 };
 

package/dist/es/render/dom/utils/css-variables-conversion.mjs

@@ -10,9 +10,9 @@ import { isCSSVariableToken } from './is-css-variable.mjs';
  *
  * @param current
  */
-const cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
+const splitCSSVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
 function parseCSSVariable(current) {
-    const match = cssVariableRegex.exec(current);
+    const match = splitCSSVariableRegex.exec(current);
     if (!match)
         return [,];
     const [, token, fallback] = match;
@@ -84,4 +84,4 @@ function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
     return { target, transitionEnd };
 }
 
-export { cssVariableRegex, parseCSSVariable, resolveCSSVariables };
+export { parseCSSVariable, resolveCSSVariables };

package/dist/es/render/dom/utils/is-css-variable.mjs

@@ -1,5 +1,6 @@
 const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
 const isCSSVariableName = checkStringStartsWith("--");
 const isCSSVariableToken = checkStringStartsWith("var(--");
+const cssVariableRegex = /var\s*\(\s*--[\w-]+(\s*,\s*(?:(?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)+)?\s*\)/g;
 
-export { isCSSVariableName, isCSSVariableToken };
+export { cssVariableRegex, isCSSVariableName, isCSSVariableToken };

package/dist/es/render/utils/motion-values.mjs

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.12.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.2 may not work as expected.`);
+                warnOnce(nextValue.version === "10.12.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/utils/interpolate.mjs

@@ -14,12 +14,7 @@ function detectMixerFactory(v) {
         return mixNumber;
     }
     else if (typeof v === "string") {
-        if (color.test(v)) {
-            return mixColor;
-        }
-        else {
-            return mixComplex;
-        }
+        return color.test(v) ? mixColor : mixComplex;
     }
     else if (Array.isArray(v)) {
         return mixArray;

package/dist/es/utils/mix-complex.mjs

@@ -5,6 +5,7 @@ import { warning } from './errors.mjs';
 import { color } from '../value/types/color/index.mjs';
 import { complex, analyseComplexValue } from '../value/types/complex/index.mjs';
 
+const mixImmediate = (origin, target) => (p) => `${p > 0 ? target : origin}`;
 function getMixer(origin, target) {
     if (typeof origin === "number") {
         return (v) => mix(origin, target, v);
@@ -13,7 +14,9 @@ function getMixer(origin, target) {
         return mixColor(origin, target);
     }
     else {
-        return mixComplex(origin, target);
+        return origin.startsWith("var(")
+            ? mixImmediate(origin, target)
+            : mixComplex(origin, target);
     }
 }
 const mixArray = (from, to) => {
@@ -46,14 +49,15 @@ const mixComplex = (origin, target) => {
     const template = complex.createTransformer(target);
     const originStats = analyseComplexValue(origin);
     const targetStats = analyseComplexValue(target);
-    const canInterpolate = originStats.numColors === targetStats.numColors &&
+    const canInterpolate = originStats.numVars === targetStats.numVars &&
+        originStats.numColors === targetStats.numColors &&
         originStats.numNumbers >= targetStats.numNumbers;
     if (canInterpolate) {
         return pipe(mixArray(originStats.values, targetStats.values), template);
     }
     else {
         warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
-        return (p) => `${p > 0 ? target : origin}`;
+        return mixImmediate(origin, target);
     }
 };
 

package/dist/es/value/index.mjs

@@ -26,7 +26,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "10.12.2";
+        this.version = "10.12.3";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/es/value/types/complex/index.mjs

@@ -1,9 +1,9 @@
+import { cssVariableRegex } from '../../../render/dom/utils/is-css-variable.mjs';
+import { noop } from '../../../utils/noop.mjs';
 import { color } from '../color/index.mjs';
 import { number } from '../numbers/index.mjs';
-import { isString, floatRegex, colorRegex, sanitize } from '../utils.mjs';
+import { colorRegex, floatRegex, isString, sanitize } from '../utils.mjs';
 
-const colorToken = "${c}";
-const numberToken = "${n}";
 function test(v) {
     var _a, _b;
     return (isNaN(v) &&
@@ -12,50 +12,81 @@ function test(v) {
             (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
             0);
 }
-function analyseComplexValue(v) {
-    if (typeof v === "number")
-        v = `${v}`;
-    const values = [];
-    let numColors = 0;
-    let numNumbers = 0;
-    const colors = v.match(colorRegex);
-    if (colors) {
-        numColors = colors.length;
-        // Strip colors from input so they're not picked up by number regex.
-        // There's a better way to combine these regex searches, but its beyond my regex skills
-        v = v.replace(colorRegex, colorToken);
-        values.push(...colors.map(color.parse));
-    }
-    const numbers = v.match(floatRegex);
-    if (numbers) {
-        numNumbers = numbers.length;
-        v = v.replace(floatRegex, numberToken);
-        values.push(...numbers.map(number.parse));
-    }
-    return { values, numColors, numNumbers, tokenised: v };
+const cssVarTokeniser = {
+    regex: cssVariableRegex,
+    countKey: "Vars",
+    token: "${v}",
+    parse: noop,
+};
+const colorTokeniser = {
+    regex: colorRegex,
+    countKey: "Colors",
+    token: "${c}",
+    parse: color.parse,
+};
+const numberTokeniser = {
+    regex: floatRegex,
+    countKey: "Numbers",
+    token: "${n}",
+    parse: number.parse,
+};
+function tokenise(info, { regex, countKey, token, parse }) {
+    const matches = info.tokenised.match(regex);
+    if (!matches)
+        return;
+    info["num" + countKey] = matches.length;
+    info.tokenised = info.tokenised.replace(regex, token);
+    info.values.push(...matches.map(parse));
 }
-function parse(v) {
+function analyseComplexValue(value) {
+    const originalValue = value.toString();
+    const info = {
+        value: originalValue,
+        tokenised: originalValue,
+        values: [],
+        numVars: 0,
+        numColors: 0,
+        numNumbers: 0,
+    };
+    if (info.value.includes("var(--"))
+        tokenise(info, cssVarTokeniser);
+    tokenise(info, colorTokeniser);
+    tokenise(info, numberTokeniser);
+    return info;
+}
+function parseComplexValue(v) {
     return analyseComplexValue(v).values;
 }
 function createTransformer(source) {
-    const { values, numColors, tokenised } = analyseComplexValue(source);
+    const { values, numColors, numVars, tokenised } = analyseComplexValue(source);
     const numValues = values.length;
     return (v) => {
         let output = tokenised;
         for (let i = 0; i < numValues; i++) {
-            output = output.replace(i < numColors ? colorToken : numberToken, i < numColors
-                ? color.transform(v[i])
-                : sanitize(v[i]));
+            if (i < numVars) {
+                output = output.replace(cssVarTokeniser.token, v[i]);
+            }
+            else if (i < numVars + numColors) {
+                output = output.replace(colorTokeniser.token, color.transform(v[i]));
+            }
+            else {
+                output = output.replace(numberTokeniser.token, sanitize(v[i]));
+            }
         }
         return output;
     };
 }
 const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
 function getAnimatableNone(v) {
-    const parsed = parse(v);
+    const parsed = parseComplexValue(v);
     const transformer = createTransformer(v);
     return transformer(parsed.map(convertNumbersToZero));
 }
-const complex = { test, parse, createTransformer, getAnimatableNone };
+const complex = {
+    test,
+    parse: parseComplexValue,
+    createTransformer,
+    getAnimatableNone,
+};
 
 export { analyseComplexValue, complex };