Merge pull request #2703 from framer/fix/color-string

fix(isColorString): cannot convert undefined or null to object
framer · Jul 4, 2024 · 977f2f0 · 977f2f0
2 parents ed6a830 + 6f597e8
commit 977f2f0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/packages/framer-motion/src/value/types/__tests__/index.test.ts b/packages/framer-motion/src/value/types/__tests__/index.test.ts
@@ -186,6 +186,8 @@ describe("hex()", () => {
         expect(hex.test("#F000AA00")).toEqual(true)
         expect(hex.test("#f00 0px")).toEqual(false)
         expect(hex.test(red)).toEqual(false)
+        expect(hex.test(null)).toEqual(false)
+        expect(hex.test(undefined)).toEqual(false)
     })
 
     it("should split a hex value into the correct params", () => {
@@ -210,6 +212,8 @@ describe("rgba()", () => {
         expect(rgba.test("rgba(255, 0, 0, 0.5) 0px")).toEqual(false)
         expect(rgba.test({ red: 255 })).toEqual(true)
         expect(rgba.test({ hue: 255 })).toEqual(false)
+        expect(rgba.test(null)).toEqual(false)
+        expect(rgba.test(undefined)).toEqual(false)
     })
 
     it("should split an rgba value into the correct params", () => {
@@ -248,6 +252,8 @@ describe("hsla()", () => {
         expect(hsla.test("hsla(170 50% 45%/1)")).toEqual(true)
         expect(hsla.test("hsla(177 37.4978% 76.66804% / 1)")).toEqual(true)
         expect(hsla.test("hsla(170, 50%, 45%, 1) 0px")).toEqual(false)
+        expect(hsla.test(null)).toEqual(false)
+        expect(hsla.test(undefined)).toEqual(false)
     })
 
     it("should split an hsl value into the correct params", () => {

diff --git a/packages/framer-motion/src/value/types/color/utils.ts b/packages/framer-motion/src/value/types/color/utils.ts
@@ -1,5 +1,5 @@
 import { Color, HSLA, RGBA } from "../types"
-import { floatRegex, isString, singleColorRegex } from "../utils"
+import { floatRegex, isNullish, isString, singleColorRegex } from "../utils"
 
 /**
  * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,
@@ -8,7 +8,9 @@ import { floatRegex, isString, singleColorRegex } from "../utils"
 export const isColorString = (type: string, testProp?: string) => (v: any) => {
     return Boolean(
         (isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
-            (testProp && Object.prototype.hasOwnProperty.call(v, testProp))
+            (testProp &&
+                !isNullish(v) &&
+                Object.prototype.hasOwnProperty.call(v, testProp))
     )
 }
 

diff --git a/packages/framer-motion/src/value/types/utils.ts b/packages/framer-motion/src/value/types/utils.ts
@@ -16,3 +16,7 @@ export const singleColorRegex =
 export function isString(v: any): v is string {
     return typeof v === "string"
 }
+
+export function isNullish(v: any): v is null | undefined {
+    return v == null
+}