@compiled/react 0.18.1 → 0.18.3

package/dist/browser/keyframes/index.d.ts

@@ -1,5 +1,7 @@
 import type { BasicTemplateInterpolations, CSSProps } from '../types';
-export type KeyframeSteps = string | Record<string, CSSProps<void>>;
+export type KeyframeSteps = string | Record<'from' | 'to' | string, CSSProps<void> | {
+    [key: `--${string}`]: CSSProps<void>[keyof CSSProps<void>];
+}>;
 /**
  * ## Keyframes
  *

package/dist/browser/keyframes/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/keyframes/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAkDlD,MAAM,UAAU,SAAS,CACvB,eAAqD,EACrD,GAAG,eAA8C;IAEjD,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/keyframes/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA0DlD,MAAM,UAAU,SAAS,CACvB,eAAqD,EACrD,GAAG,eAA8C;IAEjD,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

package/dist/browser/types.d.ts

@@ -27,7 +27,7 @@ export type CSSPseudos = CSSPseudoElements | CSSPseudoClasses;
  * excess property check doesn't enable makers to circumvent the
  * system and pass in values they shouldn't.
  */
-export type CSSProperties = Readonly<CSS.Properties<(string & object) | number>>;
+export type CSSProperties = Readonly<CSS.Properties<(string & NonNullable<unknown>) | number>>;
 /**
  * A stricter subset of the {@link CSSProperties} type that excludes
  * vendor and obsolete properties.

package/dist/cjs/keyframes/index.d.ts

@@ -1,5 +1,7 @@
 import type { BasicTemplateInterpolations, CSSProps } from '../types';
-export type KeyframeSteps = string | Record<string, CSSProps<void>>;
+export type KeyframeSteps = string | Record<'from' | 'to' | string, CSSProps<void> | {
+    [key: `--${string}`]: CSSProps<void>[keyof CSSProps<void>];
+}>;
 /**
  * ## Keyframes
  *

package/dist/cjs/keyframes/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/keyframes/index.ts"],"names":[],"mappings":";;;AACA,0CAAkD;AAkDlD,SAAgB,SAAS,CACvB,eAAqD,EACrD,GAAG,eAA8C;IAEjD,MAAM,IAAA,wBAAgB,GAAE,CAAC;AAC3B,CAAC;AALD,8BAKC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/keyframes/index.ts"],"names":[],"mappings":";;;AACA,0CAAkD;AA0DlD,SAAgB,SAAS,CACvB,eAAqD,EACrD,GAAG,eAA8C;IAEjD,MAAM,IAAA,wBAAgB,GAAE,CAAC;AAC3B,CAAC;AALD,8BAKC"}

package/dist/cjs/types.d.ts

@@ -27,7 +27,7 @@ export type CSSPseudos = CSSPseudoElements | CSSPseudoClasses;
  * excess property check doesn't enable makers to circumvent the
  * system and pass in values they shouldn't.
  */
-export type CSSProperties = Readonly<CSS.Properties<(string & object) | number>>;
+export type CSSProperties = Readonly<CSS.Properties<(string & NonNullable<unknown>) | number>>;
 /**
  * A stricter subset of the {@link CSSProperties} type that excludes
  * vendor and obsolete properties.

package/dist/esm/keyframes/index.d.ts

@@ -1,5 +1,7 @@
 import type { BasicTemplateInterpolations, CSSProps } from '../types';
-export type KeyframeSteps = string | Record<string, CSSProps<void>>;
+export type KeyframeSteps = string | Record<'from' | 'to' | string, CSSProps<void> | {
+    [key: `--${string}`]: CSSProps<void>[keyof CSSProps<void>];
+}>;
 /**
  * ## Keyframes
  *

package/dist/esm/keyframes/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/keyframes/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAkDlD,MAAM,UAAU,SAAS,CACvB,eAAqD,EACrD,GAAG,eAA8C;IAEjD,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/keyframes/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA0DlD,MAAM,UAAU,SAAS,CACvB,eAAqD,EACrD,GAAG,eAA8C;IAEjD,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

package/dist/esm/types.d.ts

@@ -27,7 +27,7 @@ export type CSSPseudos = CSSPseudoElements | CSSPseudoClasses;
  * excess property check doesn't enable makers to circumvent the
  * system and pass in values they shouldn't.
  */
-export type CSSProperties = Readonly<CSS.Properties<(string & object) | number>>;
+export type CSSProperties = Readonly<CSS.Properties<(string & NonNullable<unknown>) | number>>;
 /**
  * A stricter subset of the {@link CSSProperties} type that excludes
  * vendor and obsolete properties.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.18.1",
+  "version": "0.18.3",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
@@ -72,16 +72,16 @@
     "jsx-dev-runtime"
   ],
   "dependencies": {
-    "csstype": "^3.1.2"
+    "csstype": "^3.1.3"
   },
   "devDependencies": {
     "@compiled/benchmark": "^1.1.0",
-    "@compiled/utils": "^0.12.0",
+    "@compiled/utils": "^0.13.0",
     "@fixture/strict-api-test": "*",
     "@testing-library/react": "^12.1.5",
     "@types/jsdom": "^16.2.15",
     "@types/react-dom": "^17.0.22",
-    "expect-type": "^0.17.3",
+    "expect-type": "^0.20.0",
     "jsdom": "^19.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

package/src/create-strict-api/__tests__/generics.test.tsx

@@ -19,7 +19,7 @@ describe('createStrictAPI()', () => {
   });
 
   it('should mark all styles as optional in cssMap()', () => {
-    const styles = cssMap({
+    const stylesMap = cssMap({
       nested: {
         '&:hover': {},
         '&:active': {},
@@ -28,7 +28,7 @@ describe('createStrictAPI()', () => {
       },
     });
 
-    const { getByTestId } = render(<div css={styles.nested} data-testid="div" />);
+    const { getByTestId } = render(<div css={stylesMap.nested} data-testid="div" />);
 
     expect(getByTestId('div')).toBeDefined();
   });
@@ -96,7 +96,7 @@ describe('createStrictAPI()', () => {
     });
 
     it('should violate types for cssMap()', () => {
-      const styles = cssMap({
+      const stylesMap = cssMap({
         primary: {
           // @ts-expect-error — Type '""' is not assignable to type ...
           color: '',
@@ -129,7 +129,7 @@ describe('createStrictAPI()', () => {
         },
       });
 
-      const { getByTestId } = render(<div css={styles.primary} data-testid="div" />);
+      const { getByTestId } = render(<div css={stylesMap.primary} data-testid="div" />);
 
       expect(getByTestId('div')).toBeDefined();
     });
@@ -224,7 +224,7 @@ describe('createStrictAPI()', () => {
     });
 
     it('should pass type check for cssMap()', () => {
-      const styles = cssMap({
+      const stylesMap = cssMap({
         primary: {
           color: 'var(--ds-text)',
           backgroundColor: 'var(--ds-bold)',
@@ -258,7 +258,7 @@ describe('createStrictAPI()', () => {
         },
       });
 
-      const { getByTestId } = render(<div css={styles.primary} data-testid="div" />);
+      const { getByTestId } = render(<div css={stylesMap.primary} data-testid="div" />);
 
       expect(getByTestId('div')).toHaveCompiledCss('color', 'var(--ds-text)');
     });

package/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}}"`
+        );
+      });
     });
   });
 

package/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

package/src/types.ts

@@ -104,7 +104,7 @@ export type CSSPseudos = CSSPseudoElements | CSSPseudoClasses;
  * excess property check doesn't enable makers to circumvent the
  * system and pass in values they shouldn't.
  */
-export type CSSProperties = Readonly<CSS.Properties<(string & object) | number>>;
+export type CSSProperties = Readonly<CSS.Properties<(string & NonNullable<unknown>) | number>>;
 
 /**
  * A stricter subset of the {@link CSSProperties} type that excludes