update keyframes to handle tagged template call

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

@@ -1,4 +1,4 @@
-import type { Expression } from '@babel/types';
+import type { Expression, TemplateElement } 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 } from '@wyw-in-js/shared';
+import { type Replacements, type Rules, ValueType, type ExpressionValue } from '@wyw-in-js/shared';
 import type { CSSInterpolation } from '@emotion/css';
 import { validateParams } from '@wyw-in-js/processor-utils';
 import BaseProcessor from './base-processor';
@@ -50,12 +50,28 @@ export class KeyframesProcessor extends BaseProcessor {
       throw new Error(`MUI: "${this.tagSource.imported}" is already built`);
     }
 
-    const [callType] = this.callParam;
+    const [callType, ...callArgs] = this.callParam;
 
     if (callType === 'template') {
       this.handleTemplate(this.callParam, values);
     } else {
-      this.handleCall(this.callParam, values);
+      let isTaggedTemplateCall = false;
+      const [firstArg, ...args] = callArgs.flat();
+      if ('kind' in firstArg && firstArg.kind === ValueType.LAZY) {
+        const firstValue = values.get(firstArg.ex.name) as Primitive | Primitive[];
+        if (Array.isArray(firstValue) && firstValue.every((val) => typeof val === 'string')) {
+          isTaggedTemplateCall = true;
+          this.handleTaggedTemplateCall(
+            firstArg.source.trim().match(/`([^`]+)`/)?.[1] || '',
+            args,
+            values,
+          );
+        }
+      }
+
+      if (!isTaggedTemplateCall) {
+        this.handleCall(this.callParam, values);
+      }
     }
   }
 
@@ -98,6 +114,50 @@ export class KeyframesProcessor extends BaseProcessor {
     this.generateArtifacts(templateStrs, ...templateExpressions);
   }
 
+  private handleTaggedTemplateCall(
+    taggedTemplate: string,
+    expressions: (ExpressionValue | TemplateElement)[],
+    values: ValueCache,
+  ) {
+    const templateStrs: string[] = [];
+    // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array.
+    templateStrs.raw = [];
+    const templateExpressions: Primitive[] = [];
+    const { themeArgs } = this.options as IOptions;
+
+    expressions.forEach((item) => {
+      if ('kind' in item) {
+        switch (item.kind) {
+          case ValueType.FUNCTION: {
+            const value = values.get(item.ex.name) as TemplateCallback;
+            templateExpressions.push(value(themeArgs));
+            break;
+          }
+          case ValueType.CONST:
+            templateExpressions.push(item.value);
+            break;
+          case ValueType.LAZY: {
+            const evaluatedValue = values.get(item.ex.name);
+            if (typeof evaluatedValue === 'function') {
+              templateExpressions.push(evaluatedValue(themeArgs));
+            } else {
+              templateExpressions.push(evaluatedValue as Primitive);
+            }
+            break;
+          }
+          default:
+            break;
+        }
+      }
+    });
+
+    const newTemplate = taggedTemplate.replace(/\$\{[^}]+\}/gm, () =>
+      String(templateExpressions.shift()),
+    );
+
+    this.generateArtifacts(`${newTemplate}`);
+  }
+
   generateArtifacts(styleObjOrTaggged: CSSInterpolation | string[], ...args: Primitive[]) {
     const { styles } = serializeStyles(
       [styleObjOrTaggged as Interpolation<{}>, args],

packages/pigment-react/tests/fixtures/material-ui-touch-ripple/material-ui-touch-ripple.output.css

@@ -1,36 +1,65 @@
-.t1qm6cyl {
+@keyframes e1qm6cyl {
+  0% {
+    transform: scale(0);
+    opacity: 0.1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+}
+@keyframes e1xj2gun {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes prznjhi {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.92);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.t7h1c7e {
   opacity: 0;
   position: absolute;
 }
-.t1qm6cyl.MuiTouchRipple-rippleVisible {
+.t7h1c7e.MuiTouchRipple-rippleVisible {
   opacity: 0.3;
   transform: scale(1);
-  animation-name: foo;
+  animation-name: e1qm6cyl;
   animation-duration: 550ms;
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-.t1qm6cyl.MuiTouchRipple-ripplePulsate {
+.t7h1c7e.MuiTouchRipple-ripplePulsate {
   animation-duration: 200ms;
 }
-.t1qm6cyl .MuiTouchRipple-child {
+.t7h1c7e .MuiTouchRipple-child {
   opacity: 1;
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background-color: currentColor;
 }
-.t1qm6cyl .MuiTouchRipple-childLeaving {
+.t7h1c7e .MuiTouchRipple-childLeaving {
   opacity: 0;
-  animation-name: bar;
+  animation-name: e1xj2gun;
   animation-duration: 550ms;
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-.t1qm6cyl .MuiTouchRipple-childPulsate {
+.t7h1c7e .MuiTouchRipple-childPulsate {
   position: absolute;
   left: 0px;
   top: 0;
-  animation-name: baz;
+  animation-name: prznjhi;
   animation-duration: 2500ms;
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   animation-iteration-count: infinite;

packages/pigment-react/tests/fixtures/material-ui-touch-ripple/material-ui-touch-ripple.output.js

@@ -4,5 +4,5 @@ export const TouchRippleRipple = /*#__PURE__*/ _styled('span', {
   name: 'MuiTouchRipple',
   slot: 'Ripple',
 })({
-  classes: ['t1qm6cyl'],
+  classes: ['t7h1c7e'],
 });