Fixing types

motiondivision · Oct 9, 2024 · a761a3c · a761a3c
1 parent 8ebc45e
commit a761a3c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [11.11.5] 2024-10-09
+
+### Fixed
+
+-   Removed ability to define CSS variables on `style` without casting, as this was conflicting with React `CSSProperties`.
+
 ## [11.11.4] 2024-10-08
 
 ### Fixed

diff --git a/packages/framer-motion/src/animation/__tests__/css-variables.test.tsx b/packages/framer-motion/src/animation/__tests__/css-variables.test.tsx
@@ -69,6 +69,12 @@ describe("css variables", () => {
         })
     })
 
+    test("motion component still accetps React.CSSProperties", () => {
+        ;() => (
+            <motion.div style={{ transform: "none" } as React.CSSProperties} />
+        )
+    })
+
     test("should animate css color variables", async () => {
         const promise = new Promise((resolve) => {
             let frameCount = 0

diff --git a/packages/framer-motion/src/motion/types.ts b/packages/framer-motion/src/motion/types.ts
@@ -88,6 +88,10 @@ export type MotionCSS = MakeMotion<
  */
 export type MotionTransform = MakeMotion<TransformProperties>
 
+/**
+ * TODO: Currently unused, would like to reimplement with the ability
+ * to still accept React.CSSProperties.
+ */
 export type MotionCSSVariables = {
     [key: `--${string}`]:
         | MotionValue<number>
@@ -99,8 +103,7 @@ export type MotionCSSVariables = {
 /**
  * @public
  */
-export type MotionStyle = MotionCSSVariables &
-    MotionCSS &
+export type MotionStyle = MotionCSS &
     MotionTransform &
     MakeMotion<SVGPathProperties> &
     MakeCustomValueType<CustomStyles>