fix keyframes and split tests

packages/pigment-react/package.json

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

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

@@ -1,4 +1,4 @@
-import type { Expression, TemplateElement } from '@babel/types';
+import type { Expression } from '@babel/types';
 import type {
   CallParam,
   TemplateParam,
@@ -7,7 +7,7 @@ import type {
   ValueCache,
 } from '@wyw-in-js/processor-utils';
 import { serializeStyles, Interpolation } from '@emotion/serialize';
-import { type Replacements, type Rules, ValueType, type ExpressionValue } from '@wyw-in-js/shared';
+import { type Replacements, type Rules, ValueType } from '@wyw-in-js/shared';
 import type { CSSInterpolation } from '@emotion/css';
 import { validateParams } from '@wyw-in-js/processor-utils';
 import BaseProcessor from './base-processor';
@@ -34,27 +34,13 @@ export class KeyframesProcessor extends BaseProcessor {
     );
 
     const [, callParams] = params;
-    if (callParams[0] === 'call') {
-      this.dependencies.push(callParams[1]);
-
-      const [firstArg, ...restArgs] = callParams.slice(1).flat() as (
-        | ExpressionValue
-        | TemplateElement
-      )[];
-      if ('kind' in firstArg && firstArg.kind === ValueType.LAZY) {
-        restArgs.forEach((arg) => {
-          if ('kind' in arg) {
-            this.dependencies.push(arg);
-          }
-        });
+    const [, ...callParamsRest] = callParams;
+
+    callParamsRest.flat().forEach((item) => {
+      if ('kind' in item) {
+        this.dependencies.push(item);
       }
-    } else if (callParams[0] === 'template') {
-      callParams[1].forEach((element) => {
-        if ('kind' in element && element.kind !== ValueType.CONST) {
-          this.dependencies.push(element);
-        }
-      });
-    }
+    });
     this.callParam = callParams;
   }
 
@@ -69,7 +55,7 @@ export class KeyframesProcessor extends BaseProcessor {
       this.handleTemplate(this.callParam, values);
     } else if (isTaggedTemplateCall(callArgs, values)) {
       const { themeArgs } = this.options as IOptions;
-      this.generateArtifacts(`${resolveTaggedTemplate(callArgs, values, themeArgs)}`);
+      this.generateArtifacts([resolveTaggedTemplate(callArgs, values, themeArgs)]);
     } else {
       this.handleCall(this.callParam, values);
     }
@@ -116,7 +102,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.palette.primary.main,
+  animation: `${rotateKeyframe} 2s ease-out 0s infinite`,
+}));
+
+const SliderRail = styled('span', {
+  name: 'MuiSlider',
+  slot: 'Rail',
+})`
+  display: none;
+  position: absolute;
+  border-radius: inherit;
+  background-color: currentColor;
+  opacity: 0.38;
+  font-size: ${({ theme }) => theme.size.font.h1};
+`;
+
+const SliderRail2 = styled.span`
+  display: block;
+  opacity: 0.38;
+  font-size: ${({ theme }) => 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: none;
+  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.palette.primary.main,
+const Component = styled.div({
+  color: '#ff5252',
   animation: `${rotateKeyframe} 2s ease-out 0s infinite`,
-}));
+});
 
-const SliderRail = styled('span', {
-  name: 'MuiSlider',
-  slot: 'Rail',
-})`
-  display: none;
-  position: absolute;
-  border-radius: inherit;
-  background-color: currentColor;
-  opacity: 0.38;
-  font-size: ${({ theme }) => 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.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: none;
-  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'],
 });
-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'],
 });