Improve the types to the keyframes() function to handle CSS variables. (#1803)

Author: kylorhall-atlassian

.changeset/long-foxes-pay.md

@@ -0,0 +1,5 @@
+---
+'@compiled/react': patch
+---
+
+Improve the types to the `keyframes()` function to handle CSS variables.

packages/react/src/keyframes/__tests__/index.test.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @compiled/react */
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { keyframes, styled } from '@compiled/react';
+import { keyframes, styled, css } from '@compiled/react';
 import { render } from '@testing-library/react';
 
 import defaultFadeOut, { namedFadeOut, fadeOut as shadowedFadeOut } from '../__fixtures__';
@@ -180,6 +180,32 @@ describe('keyframes', () => {
           `"@keyframes korwhog{0%{opacity:1}to{opacity:0}}"`
         );
       });
+
+      it('containing css variables', () => {
+        const variable = '--opacity';
+        const fadeOut = keyframes({
+          from: {
+            [variable]: 1,
+          },
+          to: {
+            '--opacity': 0,
+          },
+        });
+        const styles = css({
+          animationName: fadeOut,
+          opacity: `var(${variable})`,
+        });
+
+        const { getByText } = render(<div css={styles}>hello world</div>);
+
+        expect(getByText('hello world')).toHaveCompiledCss({
+          animationName: 'k1sm7npi',
+          opacity: 'var(--opacity)',
+        });
+        expect(getKeyframe('k1sm7npi')).toMatchInlineSnapshot(
+          `"@keyframes k1sm7npi{0%{--opacity:1px}to{--opacity:0}}"`
+        );
+      });
     });
   });
 

packages/react/src/keyframes/index.ts

@@ -1,7 +1,15 @@
 import type { BasicTemplateInterpolations, CSSProps } from '../types';
 import { createSetupError } from '../utils/error';
 
-export type KeyframeSteps = string | Record<string, CSSProps<void>>;
+export type KeyframeSteps =
+  // `string` would just be an arbitrary CSS-like string such as `keyframes('from{opacity:1;}to{opacity:0;}')`
+  | string
+  | Record<
+      'from' | 'to' | string,
+      // We allow basically all CSSProperties here and CSS Variables mapping to their values.
+      // eg. `{ display: 'block', '--var': 'block' }` — but likely it just becomes `'--var': any`
+      CSSProps<void> | { [key: `--${string}`]: CSSProps<void>[keyof CSSProps<void>] }
+    >;
 
 /**
  * ## Keyframes