From 33c0f92b5ed3bbb82e23ed1ee405fe0ebc4d37bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Gro=C3=9F?= Date: Tue, 18 Jun 2024 12:38:32 +0200 Subject: [PATCH 1/2] fix(isColorString): cannot convert undefined or null to object --- packages/framer-motion/src/value/types/color/utils.ts | 2 +- packages/framer-motion/src/value/types/utils.ts | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/framer-motion/src/value/types/color/utils.ts b/packages/framer-motion/src/value/types/color/utils.ts index 2a7af69d2e..d13b507fdb 100644 --- a/packages/framer-motion/src/value/types/color/utils.ts +++ b/packages/framer-motion/src/value/types/color/utils.ts @@ -8,7 +8,7 @@ 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 index ff92b6206c..fc1a5d8f3d 100644 --- 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 +} \ No newline at end of file From 6f597e8d0dbd41153374c562554aee29be5648e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Gro=C3=9F?= Date: Tue, 18 Jun 2024 13:48:21 +0200 Subject: [PATCH 2/2] add tests --- .../framer-motion/src/value/types/__tests__/index.test.ts | 6 ++++++ packages/framer-motion/src/value/types/color/utils.ts | 6 ++++-- 2 files changed, 10 insertions(+), 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 index 5f4f2f2537..dbc73cec66 100644 --- 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 index d13b507fdb..1736cac3a4 100644 --- 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 && !isNullish(v) && Object.prototype.hasOwnProperty.call(v, testProp)) + (testProp && + !isNullish(v) && + Object.prototype.hasOwnProperty.call(v, testProp)) ) }