fix keyframes

mui · Jun 21, 2024 · 8ac0cf9 · 8ac0cf9
1 parent f59496d
commit 8ac0cf9
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 11 deletions.
diff --git a/packages/pigment-css-react/src/processors/keyframes.ts b/packages/pigment-css-react/src/processors/keyframes.ts
@@ -134,18 +134,13 @@ export class KeyframesProcessor extends BaseProcessor {
   }
 
   private handleCall([, callArg]: CallParam, values: ValueCache) {
-    let styleObj: CSSInterpolation;
-    if (callArg.kind === ValueType.LAZY) {
-      styleObj = values.get(callArg.ex.name) as CSSInterpolation;
-    } else if (callArg.kind === ValueType.FUNCTION) {
+    if (callArg.kind === ValueType.LAZY || callArg.kind === ValueType.FUNCTION) {
+      const value = values.get(callArg.ex.name);
       const { themeArgs } = this.options as IOptions;
-      const value = values.get(callArg.ex.name) as (
-        args: Record<string, unknown> | undefined,
-      ) => CSSInterpolation;
-      styleObj = value(themeArgs);
-    }
-    if (styleObj) {
-      this.generateArtifacts(styleObj);
+      const styleObj: CSSInterpolation = typeof value === 'function' ? value(themeArgs) : value;
+      if (styleObj) {
+        this.generateArtifacts(styleObj);
+      }
     }
   }
 

diff --git a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.input.js b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.input.js
@@ -27,3 +27,18 @@ const gradientKeyframe2 = keyframes`
     background: ${({ theme }) => theme.palette.secondary.main};
   }
 `;
+
+// simulate CssBaseline transpiled by Next.js
+export const styles = (theme) => ({
+  '0%': {
+    background: theme.palette.primary.main,
+  },
+  '50%': {
+    background: green,
+  },
+  '100%': {
+    background: theme.palette.secondary.main,
+  },
+});
+const gradientKeyframe3 = keyframes((_c = ({ theme }) => styles(theme)));
+var _c;
diff --git a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.css b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.css
@@ -20,3 +20,14 @@
     background: blue;
   }
 }
+@keyframes g9lh2y5 {
+  0% {
+    background: red;
+  }
+  50% {
+    background: green;
+  }
+  100% {
+    background: blue;
+  }
+}
diff --git a/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.js b/packages/pigment-css-react/tests/keyframes/fixtures/keyframes-theme.output.js
@@ -1,2 +1,18 @@
+const green = 'green';
 const gradientKeyframe = 'gpsum18';
 const gradientKeyframe2 = 'g1t1dgxp';
+
+// simulate CssBaseline transpiled by Next.js
+export const styles = (theme) => ({
+  '0%': {
+    background: theme.palette.primary.main,
+  },
+  '50%': {
+    background: green,
+  },
+  '100%': {
+    background: theme.palette.secondary.main,
+  },
+});
+const gradientKeyframe3 = 'g9lh2y5';
+var _c;