@compiled/react 0.10.2 → 0.11.0

package/src/css/__tests__/types.test.js.flow

@@ -15,3 +15,28 @@ import { css } from '@compiled/react';
   const styles = css({ color: 'red' });
   return <div css={styles}>red text</div>;
 };
+
+// Object call with function call
+(): React$Element<'div'> => {
+  const styles = css({
+    backgroundColor: token('elevation.surface', 'white'),
+    zIndex: layers.modal(),
+  });
+  return <div css={styles}>red text</div>;
+};
+
+// Media query selector
+css({
+  /* Style only for Google Chrome */
+  '@media screen and (-webkit-min-device-pixel-ratio: 0)': {
+    wordBreak: 'break-word',
+  },
+  /* Style only for Safari */
+  '@media screen and (-webkit-transition)': {
+    wordBreak: 'break-word',
+  },
+  /* Style only for Mozilla Firefox */
+  '@-moz-document url-prefix()': {
+    overflowWrap: 'anywhere',
+  },
+});

package/src/css/index.js.flow

@@ -1,35 +1,36 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
-import type { BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
+import type { CSSProps, CssObject, CssFunction } from '../types';
 /**
- * Create styles that can be re-used between components with a template literal.
+ * ## CSS
  *
- * ```
- * css`color: red;`;
- * ```
+ * Define styles that are statically typed and useable with other Compiled APIs.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-css).
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-css
- * @param css
- * @param values
- */
-declare export default function css<T>(
-  _css: $ReadOnlyArray<string>,
-  ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
-): CSSProps;
-/**
- * Create styles that can be re-used between components with an object
+ * ### Style with objects
+ * @example ```
+ * const redText = css({
+ *   color: 'red',
+ * });
  *
+ * <div css={redText} />
  * ```
- * css({ color: 'red' });
- * ```
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-css
- * @param css
+ * ### Style with template literals
+ * @example ```
+ * const redText = css`
+ *   color: red;
+ * `;
+ *
+ * <div css={redText} />
+ * ```
  */
-declare export default function css(_css: CSSProps): CSSProps;
+declare export default function css<TProps>(
+  styles: $ReadOnlyArray<string>,
+  ...interpolations: CssFunction<TProps>[]
+): CSSProps<TProps>;
+declare export default function css<T>(styles: CssObject<T> | CssObject<T>[]): CSSProps<T>;

package/src/css/{index.tsx → index.ts}

@@ -1,11 +1,6 @@
 /* eslint-disable import/export */
 
-import type {
-  AnyKeyCssProps,
-  BasicTemplateInterpolations,
-  CSSProps,
-  FunctionInterpolation,
-} from '../types';
+import type { CSSProps, CssObject, CssFunction } from '../types';
 import { createSetupError } from '../utils/error';
 
 /**
@@ -36,16 +31,16 @@ import { createSetupError } from '../utils/error';
  * <div css={redText} />
  * ```
  */
-export default function css<T = void>(
+export default function css<TProps = unknown>(
   styles: TemplateStringsArray,
-  ...interpolations: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
-): CSSProps;
+  ...interpolations: CssFunction<TProps>[]
+): CSSProps<TProps>;
 
-export default function css(styles: AnyKeyCssProps<void> | CSSProps): CSSProps;
+export default function css<T = unknown>(styles: CssObject<T> | CssObject<T>[]): CSSProps<T>;
 
-export default function css<T = void>(
-  _styles: TemplateStringsArray | CSSProps,
-  ..._interpolations: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
-): CSSProps {
+export default function css<T = unknown>(
+  _styles: TemplateStringsArray | CssObject<T> | CssObject<T>[],
+  ..._interpolations: CssFunction[]
+): CSSProps<T> {
   throw createSetupError();
 }

package/src/index.js.flow

@@ -1,15 +1,12 @@
 /**
- * THIS IS A MANUALLY CURATED FLOW FILE.
- *
- * Flowtype definitions for runtime
+ * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
-import type { CSSProps, CssFunction } from './types';
+import type { CssFunction, CSSProps, CssType } from './types';
+export type { CSSProps, CssFunction, CssType };
 declare export { keyframes } from './keyframes';
 declare export { styled } from './styled';
 declare export { ClassNames } from './class-names';
 declare export { default as css } from './css';
-export type { CssFunction, CSSProps };
-export type { CssObject } from './styled';

package/src/{index.tsx → index.ts}

@@ -1,7 +1,9 @@
 import { createElement } from 'react';
 
 import type { CompiledJSX } from './jsx/jsx-local-namespace';
-import type { CssFunction, CSSProps } from './types';
+import type { CssFunction, CSSProps, CssType } from './types';
+
+export type { CSSProps, CssFunction, CssType };
 
 export { keyframes } from './keyframes';
 export { styled } from './styled';
@@ -12,9 +14,6 @@ export { default as css } from './css';
 // Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
 export const jsx = createElement;
 
-export type { CssFunction, CSSProps };
-export type { CssObject } from './styled';
-
 export namespace jsx {
   export namespace JSX {
     export type Element = CompiledJSX.Element;

package/src/jsx/{jsx-local-namespace.tsx → jsx-local-namespace.ts}

@@ -41,7 +41,7 @@ type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps
          * />
          * ```
          */
-        css?: CssFunction | CssFunction[];
+        css?: CssFunction<void> | CssFunction<void>[];
       }
     : // eslint-disable-next-line @typescript-eslint/ban-types
       {}
@@ -69,7 +69,7 @@ export namespace CompiledJSX {
   export type IntrinsicClassAttributes<T> = ReactJSXIntrinsicClassAttributes<T>;
   export type IntrinsicElements = {
     [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
-      css?: CssFunction | CssFunction[];
+      css?: CssFunction<void> | CssFunction<void>[];
     };
   };
 }

package/src/keyframes/__tests__/index.test.tsx

@@ -16,6 +16,10 @@ const getKeyframe = (name: string) => {
     .join('\n');
 };
 
+jest.mock('../../runtime/is-server-environment', () => ({
+  isServerEnvironment: () => false,
+}));
+
 describe('keyframes', () => {
   beforeAll(() => {
     process.env.CACHE = 'false';

package/src/keyframes/index.js.flow

@@ -1,33 +1,19 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 import type { BasicTemplateInterpolations, CSSProps } from '../types';
-export type KeyframeSteps = string | { [key: string]: CSSProps, ... };
+export type KeyframeSteps = string | { [key: string]: CSSProps<void> };
 /**
- * Create keyframes using a tagged template expression:
+ * ## Keyframes
  *
- * ```
- * const fadeOut = keyframes`
- *   from { opacity: 1; }
- *   to   { opacity: 0; }
- * `;
- * ```
- * @param _strings The input string values
- * @param _interpolations The arguments used in the expression
- */
-declare export function keyframes(
-  _strings: $ReadOnlyArray<string>,
-  ..._interpolations: BasicTemplateInterpolations[]
-): string;
-/**
- * Create keyframes using:
+ * Define keyframes to be used in a [CSS animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation).
+ * For further details [read the API documentation](https://compiledcssinjs.com/docs/api-keyframes).
  *
- * 1. An object expression
- *
- * ```
+ * ### Style with objects
+ * @example ```
  * const fadeOut = keyframes({
  *   from: {
  *     opacity: 1,
@@ -36,19 +22,27 @@ declare export function keyframes(
  *     opacity: 0,
  *   },
  * });
- * ```
- *
- * 2. A string
  *
- * ```
- * const fadeOut = keyframes('from { opacity: 1; } to { opacity: 0; }');
+ * <div css={{ animation: `${fadeOut} 2s` }} />
  * ```
  *
- * 3. A template literal
+ * ### Style with template literals
+ * @example ```
+ * const fadeOut = keyframes`
+ *   from {
+ *     opacity: 1;
+ *   }
  *
+ *   to {
+ *     opacity: 0;
+ *   }
+ * `;
+ *
+ * <div css={{ animation: `${fadeOut} 2s` }} />
  * ```
- * const fadeOut = keyframes(`from { opacity: 1; } to { opacity: 0; }`);
- * ```
- * @param _steps The waypoints along the animation sequence
  */
-declare export function keyframes(_steps: KeyframeSteps): string;
+declare export function keyframes(steps: KeyframeSteps): string;
+declare export function keyframes(
+  strings: $ReadOnlyArray<string>,
+  ...interpolations: BasicTemplateInterpolations[]
+): string;

package/src/keyframes/{index.tsx → index.ts}

@@ -1,7 +1,7 @@
 import type { BasicTemplateInterpolations, CSSProps } from '../types';
 import { createSetupError } from '../utils/error';
 
-export type KeyframeSteps = string | Record<string, CSSProps>;
+export type KeyframeSteps = string | Record<string, CSSProps<void>>;
 
 /**
  * ## Keyframes

package/src/runtime/__perf__/cs.test.tsx

@@ -1,111 +1,156 @@
 import { runBenchmark } from '@compiled/benchmark';
+import { JSDOM } from 'jsdom';
 import * as React from 'react';
+import { memo } from 'react';
+import { render } from 'react-dom';
 import { renderToString } from 'react-dom/server';
 
 import { CC, CS } from '../index';
 
-import { StyleArr, StyleStr } from './utils/cs';
+const MemoCS = memo(CS, () => true);
+
+import { StyleBucketFromArray, StyleBucketFromString } from './utils/cs';
 
 describe('CS benchmark', () => {
-  it('completes with CS (1 array element) or StyleArr as the fastest', async () => {
-    const stylesArr = [
-      '._s7n4jp4b{vertical-align:top}',
-      '._1reo15vq{overflow-x:hidden}',
-      '._18m915vq{overflow-y:hidden}',
-      '._1bto1l2s{text-overflow:ellipsis}',
-      '._o5721q9c{white-space:nowrap}',
-      '._ca0qidpf{padding-top:0}',
-      '._u5f31y44{padding-right:4px}',
-      '._n3tdidpf{padding-bottom:0}',
-      '._19bv1y44{padding-left:4px}',
-      '._p12f12xx{max-width:100px}',
-      '._1bsb1osq{width:100%}',
-    ];
+  describe.each(['server', 'client'])('on the %s', (env) => {
+    const document = globalThis.document;
+    const window = globalThis.window;
+
+    beforeAll(() => {
+      if (env === 'server') {
+        // @ts-expect-error
+        delete globalThis.document;
+        // @ts-expect-error
+        delete globalThis.window;
+      } else {
+        const dom = new JSDOM('<div id="root"></div>');
+        globalThis.document = dom.window.document;
+        // @ts-expect-error
+        globalThis.window = dom.window;
+      }
+    });
+
+    afterAll(() => {
+      globalThis.document = document;
+      globalThis.window = window;
+    });
+
+    const fastest =
+      env === 'server'
+        ? ['StyleBucketFromArray', 'StyleBucketFromString']
+        : ['MemoCS (1 array element)', 'MemoCS (n array elements)'];
 
-    const stylesStr = stylesArr.join('');
+    it(`completes with [${fastest.join(', ')}] as the fastest`, async () => {
+      const stylesArr = [
+        '._s7n4jp4b{vertical-align:top}',
+        '._1reo15vq{overflow-x:hidden}',
+        '._18m915vq{overflow-y:hidden}',
+        '._1bto1l2s{text-overflow:ellipsis}',
+        '._o5721q9c{white-space:nowrap}',
+        '._ca0qidpf{padding-top:0}',
+        '._u5f31y44{padding-right:4px}',
+        '._n3tdidpf{padding-bottom:0}',
+        '._19bv1y44{padding-left:4px}',
+        '._p12f12xx{max-width:100px}',
+        '._1bsb1osq{width:100%}',
+      ];
 
-    const className = [
-      '_bfhk1jys',
-      '_2rko1l7b',
-      '_vchhusvi',
-      '_syaz4rde',
-      '_1e0c1o8l',
-      '_1wyb1skh',
-      '_k48p1fw0',
-      '_vwz4kb7n',
-      '_p12f1osq',
-      '_ca0qyh40',
-      '_u5f3idpf',
-      '_n3td1l7b',
-      '_19bvidpf',
-      '_1p1dangw',
-      '_s7n41q9y',
-    ].join(' ');
+      const stylesStr = stylesArr.join('');
 
-    const style = {
-      '--_16owtcm': 'rgb(227, 252, 239)',
-      '--_kmurgp': 'rgb(0, 102, 68)',
-    } as any;
+      const className = stylesArr.map((rule) => rule.slice(1, 10)).join(' ');
+      const nonce = 'k0Mp1lEd';
 
-    const nonce = 'k0Mp1lEd';
+      const renderJSX =
+        env === 'server'
+          ? (jsx: (key: number) => JSX.Element) => {
+              renderToString(<>{Array.from({ length: 10 }).map((_, i) => jsx(i))}</>);
+            }
+          : (jsx: (key: number) => JSX.Element) => {
+              render(
+                <>{Array.from({ length: 10 }).map((_, i) => jsx(i))}</>,
+                globalThis.document.getElementById('root')
+              );
+            };
 
-    const benchmark = await runBenchmark('CS', [
-      {
-        name: 'CS (1 array element)',
-        fn: () => {
-          renderToString(
-            <CC>
-              <CS nonce={nonce}>{[stylesStr]}</CS>
-              <span className={className} style={style}>
-                hello world
-              </span>
-            </CC>
-          );
+      const tests = [
+        {
+          name: 'CS (1 array element)',
+          fn: () => {
+            renderJSX((key) => (
+              <CC key={`cs1-${key}`}>
+                <CS nonce={nonce}>{[stylesStr]}</CS>
+                <div className={className} />
+              </CC>
+            ));
+          },
         },
-      },
-      {
-        name: 'CS (n array elements)',
-        fn: () => {
-          renderToString(
-            <CC>
-              <CS nonce={nonce}>{stylesArr}</CS>
-              <span className={className} style={style}>
-                hello world
-              </span>
-            </CC>
-          );
+        {
+          name: 'CS (n array elements)',
+          fn: () => {
+            renderJSX((key) => (
+              <CC key={`csn-${key}`}>
+                <CS nonce={nonce}>{stylesArr}</CS>
+                <div className={className} />
+              </CC>
+            ));
+          },
         },
-      },
-      {
-        name: 'StyleArr',
-        fn: () => {
-          renderToString(
-            <CC>
-              <StyleArr nonce={nonce}>{stylesArr}</StyleArr>
-              <span className={className} style={style}>
-                hello world
-              </span>
-            </CC>
-          );
+        {
+          name: 'MemoCS (1 array element)',
+          fn: () => {
+            renderJSX((key) => (
+              <CC key={`memo-cs1-${key}`}>
+                <MemoCS nonce={nonce}>{[stylesStr]}</MemoCS>
+                <div className={className} />
+              </CC>
+            ));
+          },
         },
-      },
-      {
-        name: 'StyleStr',
-        fn: () => {
-          renderToString(
-            <CC>
-              <StyleStr nonce={nonce}>{stylesStr}</StyleStr>
-              <span className={className} style={style}>
-                hello world
-              </span>
-            </CC>
-          );
+        {
+          name: 'MemoCS (n array elements)',
+          fn: () => {
+            renderJSX((key) => (
+              <CC key={`memo-csn-${key}`}>
+                <MemoCS nonce={nonce}>{stylesArr}</MemoCS>
+                <div className={className} />
+              </CC>
+            ));
+          },
         },
-      },
-    ]);
+        ...(env === 'server'
+          ? [
+              {
+                name: 'StyleBucketFromArray',
+                fn: () => {
+                  renderJSX((key) => (
+                    <CC key={`sbfa-${key}`}>
+                      <StyleBucketFromArray nonce={nonce}>{stylesArr}</StyleBucketFromArray>
+                      <div className={className} />
+                    </CC>
+                  ));
+                },
+              },
+              {
+                name: 'StyleBucketFromString',
+                fn: () => {
+                  renderJSX((key) => (
+                    <CC key={`sbfs-${key}`}>
+                      <StyleBucketFromString nonce={nonce}>{stylesStr}</StyleBucketFromString>
+                      <div className={className} />
+                    </CC>
+                  ));
+                },
+              },
+            ]
+          : []),
+      ];
 
-    expect(benchmark).toMatchObject({
-      fastest: expect.not.arrayContaining(['StyleStr', 'CS (n array elements)']),
-    });
-  }, 30000);
+      const benchmark = await runBenchmark('CS', tests);
+
+      const slowest = tests.map((t) => t.name).filter((n) => !fastest.includes(n));
+      for (const name of slowest) {
+        expect(benchmark.fastest).not.toContain(name);
+      }
+    }, 60000);
+  });
 });

package/src/runtime/__perf__/utils/cs.tsx

@@ -2,20 +2,17 @@ import React, { createContext, useContext } from 'react';
 
 const Cache = createContext<Record<string, true> | null>(null);
 
-export const useCache = (): Record<string, true> => {
-  return useContext(Cache) || {};
-};
-
-export type StyleStrProps = {
-  children: string;
+export type StyleBucketFromArrayProps = {
+  children: string[];
   nonce: string;
 };
 
-export function StyleStr({ children, nonce }: StyleStrProps): JSX.Element | null {
-  const inserted = useCache();
+export function StyleBucketFromArray({
+  children: sheets,
+  nonce,
+}: StyleBucketFromArrayProps): JSX.Element | null {
+  const inserted = useContext(Cache) || {};
 
-  // The following code will not exist in the browser bundle.
-  const sheets = children.split('.');
   let toInsert = '';
 
   for (let i = 0; i < sheets.length; i++) {
@@ -33,15 +30,18 @@ export function StyleStr({ children, nonce }: StyleStrProps): JSX.Element | null
   return <style nonce={nonce}>{toInsert}</style>;
 }
 
-export type StyleArrProps = {
-  children: string[];
+export type StyleBucketFromStringProps = {
+  children: string;
   nonce: string;
 };
 
-export function StyleArr({ children: sheets, nonce }: StyleArrProps): JSX.Element | null {
-  const inserted = useCache();
+export function StyleBucketFromString({
+  children,
+  nonce,
+}: StyleBucketFromStringProps): JSX.Element | null {
+  const inserted = useContext(Cache) || {};
 
-  // The following code will not exist in the browser bundle.
+  const sheets = children.split('.');
   let toInsert = '';
 
   for (let i = 0; i < sheets.length; i++) {

package/src/runtime/__tests__/style.test.tsx

@@ -2,6 +2,10 @@ import { render } from '@testing-library/react';
 import React from 'react';
 import type { ComponentType } from 'react';
 
+jest.mock('../is-server-environment', () => ({
+  isServerEnvironment: () => false,
+}));
+
 describe('<Style />', () => {
   let consoleErrorSpy: jest.SpyInstance;
 

package/src/runtime/ax.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for ax
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 /**

package/src/runtime/cache.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for cache
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 /**

package/src/runtime/css-custom-property.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for css-custom-property
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 /**

package/src/runtime/dev-warnings.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for dev-warnings
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 declare export var analyzeCssInDev: (sheet: string) => void;