[react] Support transpiled library for globalCss and keyframes (#155

)
mui · Jun 21, 2024 · 659ed43 · 659ed43
1 parent cd97713
commit 659ed43
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 22 deletions.
diff --git a/packages/pigment-css-react/src/processors/globalCss.ts b/packages/pigment-css-react/src/processors/globalCss.ts
@@ -134,18 +134,13 @@ export class GlobalCssProcessor 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/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/globalCss/fixtures/globalCss-theme.input.js b/packages/pigment-css-react/tests/globalCss/fixtures/globalCss-theme.input.js
@@ -28,3 +28,12 @@ let inputGlobalStyles = globalCss(({ theme }) => ({
 if (typeof inputGlobalStyles === 'function') {
   inputGlobalStyles = inputGlobalStyles();
 }
+
+// simulate CssBaseline transpiled by Next.js
+export const styles = (theme) => ({
+  html: {
+    color: theme.palette.primary.main,
+  },
+});
+const GlobalStyles = globalCss((_c = ({ theme }) => styles(theme)));
+var _c;
diff --git a/packages/pigment-css-react/tests/globalCss/fixtures/globalCss-theme.output.css b/packages/pigment-css-react/tests/globalCss/fixtures/globalCss-theme.output.css
@@ -25,3 +25,6 @@
     color: red;
   }
 }
+html {
+  color: red;
+}
diff --git a/packages/pigment-css-react/tests/globalCss/fixtures/globalCss-theme.output.js b/packages/pigment-css-react/tests/globalCss/fixtures/globalCss-theme.output.js
@@ -3,3 +3,12 @@ let inputGlobalStyles = null;
 if (typeof inputGlobalStyles === 'function') {
   inputGlobalStyles = inputGlobalStyles();
 }
+
+// simulate CssBaseline transpiled by Next.js
+export const styles = (theme) => ({
+  html: {
+    color: theme.palette.primary.main,
+  },
+});
+const GlobalStyles = null;
+var _c;
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;
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,3 +25,6 @@ @@
         color: red;
       }
     }
+    html {
+      color: red;
+    }