[pigment-css] Fix keyframes serialize styles error (#41395)

packages/pigment-react/package.json

@@ -142,6 +142,12 @@
           "build"
         ]
       },
+      "test:update": {
+        "cache": false,
+        "dependsOn": [
+          "build"
+        ]
+      },
       "test:ci": {
         "cache": false,
         "dependsOn": [

packages/pigment-react/src/processors/keyframes.ts

@@ -100,7 +100,9 @@ export class KeyframesProcessor extends BaseProcessor {
 
   generateArtifacts(styleObjOrTaggged: CSSInterpolation | string[], ...args: Primitive[]) {
     const { styles } = serializeStyles(
-      [styleObjOrTaggged as Interpolation<{}>, args],
+      args.length > 0
+        ? [styleObjOrTaggged as Interpolation<{}>, ...args]
+        : [styleObjOrTaggged as Interpolation<{}>],
       cache.registered,
     );
     const cssText = `@keyframes {${styles}}`;

packages/pigment-react/tests/keyframes/fixtures/keyframes-theme.input.js

@@ -0,0 +1,29 @@
+import { keyframes } from '@pigment-css/react';
+
+const green = 'green';
+
+const gradientKeyframe = keyframes(({ theme }) => ({
+  '0%': {
+    background: theme.palette.primary.main,
+  },
+  '50%': {
+    background: green,
+  },
+  '100%': {
+    background: theme.palette.secondary.main,
+  },
+}));
+
+const gradientKeyframe2 = keyframes`
+  0% {
+    background: ${({ theme }) => theme.palette.primary.main};
+  }
+  
+  50% {
+    background: ${green};
+  }
+
+  100% {
+    background: ${({ theme }) => theme.palette.secondary.main};
+  }
+`;

packages/pigment-react/tests/keyframes/fixtures/keyframes-theme.output.css

@@ -0,0 +1,22 @@
+@keyframes g2c7x3u {
+  0% {
+    background: red;
+  }
+  50% {
+    background: green;
+  }
+  100% {
+    background: blue;
+  }
+}
+@keyframes gb35t65 {
+  0% {
+    background: red;
+  }
+  50% {
+    background: green;
+  }
+  100% {
+    background: blue;
+  }
+}

packages/pigment-react/tests/keyframes/fixtures/keyframes-theme.output.js

@@ -0,0 +1,2 @@
+const gradientKeyframe = 'g2c7x3u';
+const gradientKeyframe2 = 'gb35t65';

packages/pigment-react/tests/keyframes/fixtures/keyframes.input.js

@@ -8,3 +8,13 @@ const rotateKeyframe = keyframes({
     transform: 'rotate(0deg)',
   },
 });
+
+const rotateKeyframe2 = keyframes`
+  from {
+    transform: rotate(360deg);
+  }
+  
+  to {
+    transform: rotate(0deg);
+  }
+`;

packages/pigment-react/tests/keyframes/fixtures/keyframes.output.css

@@ -6,3 +6,11 @@
     transform: rotate(0deg);
   }
 }
+@keyframes r3amm75 {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}

packages/pigment-react/tests/keyframes/fixtures/keyframes.output.js

@@ -1 +1,2 @@
 const rotateKeyframe = 'r14c1bqo';
+const rotateKeyframe2 = 'r3amm75';

packages/pigment-react/tests/keyframes/keyframes.test.ts

@@ -10,4 +10,27 @@ describe('Pigment CSS - keyframes', () => {
     expect(output.js).to.equal(fixture.js);
     expect(output.css).to.equal(fixture.css);
   });
+
+  it('should transform correctly with theme', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/keyframes-theme.input.js'),
+      {
+        themeArgs: {
+          theme: {
+            palette: {
+              primary: {
+                main: 'red',
+              },
+              secondary: {
+                main: 'blue',
+              },
+            },
+          },
+        },
+      },
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
 });

packages/pigment-react/tests/styled/fixtures/styled-theme.input.js

@@ -0,0 +1,36 @@
+import { styled, keyframes } from '@pigment-css/react';
+
+const rotateKeyframe = keyframes({
+  from: {
+    transform: 'rotate(360deg)',
+  },
+  to: {
+    transform: 'rotate(0deg)',
+  },
+});
+
+const Component = styled.div(({ theme }) => ({
+  color: (theme.vars ?? theme).palette.primary.main,
+  animation: `${rotateKeyframe} 2s ease-out 0s infinite`,
+}));
+
+const SliderRail = styled('span', {
+  name: 'MuiSlider',
+  slot: 'Rail',
+})`
+  display: block;
+  position: absolute;
+  border-radius: inherit;
+  background-color: currentColor;
+  opacity: 0.38;
+  font-size: ${({ theme }) => (theme.vars ?? theme).size.font.h1};
+`;
+
+const SliderRail2 = styled.span`
+  display: block;
+  opacity: 0.38;
+  font-size: ${({ theme }) => (theme.vars ?? theme).size.font.h1};
+  ${SliderRail} {
+    display: none;
+  }
+`;

packages/pigment-react/tests/styled/fixtures/styled-theme.output.css

@@ -0,0 +1,31 @@
+@keyframes r3sp8jf {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+.clqufod {
+  color: red;
+  animation: r3sp8jf 2s ease-out 0s infinite;
+}
+.s1fopuc2 {
+  display: block;
+  position: absolute;
+  border-radius: inherit;
+  background-color: currentColor;
+  opacity: 0.38;
+  font-size: 3rem;
+}
+.s1fopuc2-1 {
+  font-size: 1.5rem;
+}
+.s1tggtaa {
+  display: block;
+  opacity: 0.38;
+  font-size: 3rem;
+}
+.s1tggtaa .s1fopuc2 {
+  display: none;
+}

packages/pigment-react/tests/styled/fixtures/styled-theme.output.js

@@ -0,0 +1,10 @@
+import { styled as _styled3 } from '@pigment-css/react';
+import { styled as _styled2 } from '@pigment-css/react';
+import { styled as _styled } from '@pigment-css/react';
+import _theme from '@pigment-css/react/theme';
+const Component = /*#__PURE__*/ _styled('div')({
+  classes: ['clqufod'],
+});
+const SliderRail2 = /*#__PURE__*/ _styled3('span')({
+  classes: ['s1tggtaa'],
+});

packages/pigment-react/tests/styled/fixtures/styled.input.js

@@ -10,7 +10,7 @@ const rotateKeyframe = keyframes({
 });
 
 const Component = styled.div(({ theme }) => ({
-  color: (theme.vars ?? theme).palette.primary.main,
+  color: '#ff5252',
   animation: `${rotateKeyframe} 2s ease-out 0s infinite`,
 }));
 
@@ -23,13 +23,11 @@ export const SliderRail = styled('span', {
   border-radius: inherit;
   background-color: currentColor;
   opacity: 0.38;
-  font-size: ${({ theme }) => (theme.vars ?? theme).size.font.h1};
 `;
 
 const SliderRail2 = styled.span`
   display: block;
   opacity: 0.38;
-  font-size: ${({ theme }) => (theme.vars ?? theme).size.font.h1};
   ${SliderRail} {
     display: none;
   }

packages/pigment-react/tests/styled/fixtures/styled.output.css

@@ -7,7 +7,7 @@
   }
 }
 .c1vtarpi {
-  color: red;
+  color: #ff5252;
   animation: r1419f2q 2s ease-out 0s infinite;
 }
 .s1sjy0ja {
@@ -16,15 +16,10 @@
   border-radius: inherit;
   background-color: currentColor;
   opacity: 0.38;
-  font-size: 3rem;
-}
-.s1sjy0ja-1 {
-  font-size: 3rem;
 }
 .s6hrafw {
   display: block;
   opacity: 0.38;
-  font-size: 3rem;
 }
 .s6hrafw .s1sjy0ja {
   display: none;

packages/pigment-react/tests/styled/fixtures/styled.output.js

@@ -9,7 +9,7 @@ export const SliderRail = /*#__PURE__*/ _styled2('span', {
   name: 'MuiSlider',
   slot: 'Rail',
 })({
-  classes: ['s1sjy0ja', 's1sjy0ja-1'],
+  classes: ['s1sjy0ja'],
 });
 const SliderRail2 = /*#__PURE__*/ _styled3('span')({
   classes: ['s6hrafw'],

packages/pigment-react/tests/styled/styled.test.ts

@@ -1,35 +1,42 @@
 import path from 'node:path';
 import { runTransformation, expect } from '../testUtils';
 
-const theme = {
-  palette: {
-    primary: {
-      main: 'red',
-    },
-  },
-  size: {
-    font: {
-      h1: '3rem',
-    },
-  },
-  components: {
-    MuiSlider: {
-      styleOverrides: {
-        rail: {
-          fontSize: '3rem',
-        },
-      },
-    },
-  },
-};
-
 describe('Pigment CSS - styled', () => {
   it('basics', async () => {
     const { output, fixture } = await runTransformation(
       path.join(__dirname, 'fixtures/styled.input.js'),
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
+
+  it('should work with theme', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/styled-theme.input.js'),
       {
         themeArgs: {
-          theme,
+          theme: {
+            palette: {
+              primary: {
+                main: 'red',
+              },
+            },
+            size: {
+              font: {
+                h1: '3rem',
+              },
+            },
+            components: {
+              MuiSlider: {
+                styleOverrides: {
+                  rail: {
+                    fontSize: '1.5rem',
+                  },
+                },
+              },
+            },
+          },
         },
       },
     );