[pigment-css] Fix keyframes serialize styles error

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,33 @@
+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};
+`;

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

@@ -0,0 +1,28 @@
+@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;
+}

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

@@ -0,0 +1,16 @@
+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 SliderRail = /*#__PURE__*/ _styled2('span', {
+  name: 'MuiSlider',
+  slot: 'Rail',
+})({
+  classes: ['s1fopuc2', 's1fopuc2-1'],
+});
+const SliderRail2 = /*#__PURE__*/ _styled3('span')({
+  classes: ['s1tggtaa'],
+});

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

@@ -9,25 +9,21 @@ const rotateKeyframe = keyframes({
   },
 });
 
-const Component = styled.div(({ theme }) => ({
-  color: (theme.vars ?? theme).palette.primary.main,
+const Component = styled.div({
+  color: '#ff5252',
   animation: `${rotateKeyframe} 2s ease-out 0s infinite`,
-}));
+});
 
-export 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 Component2 = styled.div`
+  color: red;
+  &:has(.foo) {
+    color: blue;
+  }
 `;
 
-const SliderRail2 = styled.span`
-  display: block;
-  opacity: 0.38;
-  font-size: ${({ theme }) => (theme.vars ?? theme).size.font.h1};
+const Component3 = styled('div')`
+  color: red;
+  &:has(.foo) {
+    color: blue;
+  }
 `;

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

@@ -7,22 +7,18 @@
   }
 }
 .c1vtarpi {
-  color: red;
+  color: #ff5252;
   animation: r1419f2q 2s ease-out 0s infinite;
 }
-.s1sjy0ja {
-  display: block;
-  position: absolute;
-  border-radius: inherit;
-  background-color: currentColor;
-  opacity: 0.38;
-  font-size: 3rem;
+.c1sjy0ja {
+  color: red;
+}
+.c1sjy0ja:has(.foo) {
+  color: blue;
 }
-.s1sjy0ja-1 {
-  font-size: 3rem;
+.c6hrafw {
+  color: red;
 }
-.s6hrafw {
-  display: block;
-  opacity: 0.38;
-  font-size: 3rem;
+.c6hrafw:has(.foo) {
+  color: blue;
 }

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

@@ -5,12 +5,9 @@ import _theme from '@pigment-css/react/theme';
 const Component = /*#__PURE__*/ _styled('div')({
   classes: ['c1vtarpi'],
 });
-export const SliderRail = /*#__PURE__*/ _styled2('span', {
-  name: 'MuiSlider',
-  slot: 'Rail',
-})({
-  classes: ['s1sjy0ja', 's1sjy0ja-1'],
+const Component2 = /*#__PURE__*/ _styled2('div')({
+  classes: ['c1sjy0ja'],
 });
-const SliderRail2 = /*#__PURE__*/ _styled3('span')({
-  classes: ['s6hrafw'],
+const Component3 = /*#__PURE__*/ _styled3('div')({
+  classes: ['c6hrafw'],
 });

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',
+                  },
+                },
+              },
+            },
+          },
         },
       },
     );