@compiled/react 0.9.0 → 0.10.2

package/src/jsx/__tests__/jsx-import-source-pragma.test.tsx

@@ -0,0 +1,37 @@
+/** @jsxImportSource @compiled/react */
+import { render } from '@testing-library/react';
+
+describe('local jsx namespace', () => {
+  it('should create css from object literal', () => {
+    const { getByText } = render(<div css={{ fontSize: '15px' }}>hello world</div>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '15px');
+  });
+
+  it('should allow css prop when class name is a declared prop', () => {
+    function Component({ className, children }: { className?: string; children: string }) {
+      return <div className={className}>{children}</div>;
+    }
+
+    const { getByText } = render(<Component css={{ fontSize: '15px' }}>hello world</Component>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '15px');
+  });
+
+  it('should type error css prop when class name is not a declared prop', () => {
+    function Component({ children }: { children: string }) {
+      return <div>{children}</div>;
+    }
+
+    const { getByText } = render(
+      <Component
+        // CSS prop is not allowed when class name is not a declared prop
+        // @ts-expect-error
+        css={{ fontSize: '15px' }}>
+        hello world
+      </Component>
+    );
+
+    expect(getByText('hello world')).not.toHaveCompiledCss('font-size', '15px');
+  });
+});

package/src/jsx/__tests__/jsx-pragma.test.tsx

@@ -0,0 +1,40 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { jsx } from '@compiled/react';
+import { render } from '@testing-library/react';
+
+describe('local jsx namespace', () => {
+  it('should create css from object literal', () => {
+    const { getByText } = render(<div css={{ fontSize: '15px' }}>hello world</div>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '15px');
+  });
+
+  it('should allow css prop when class name is a declared prop', () => {
+    function Component({ className, children }: { className?: string; children: string }) {
+      return <div className={className}>{children}</div>;
+    }
+
+    const { getByText } = render(<Component css={{ fontSize: '15px' }}>hello world</Component>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '15px');
+  });
+
+  it('should type error css prop when class name is not a declared prop', () => {
+    function Component({ children }: { children: string }) {
+      return <div>{children}</div>;
+    }
+
+    const { getByText } = render(
+      <Component
+        // CSS prop is not allowed when class name is not a declared prop
+        // @ts-expect-error
+        css={{ fontSize: '15px' }}>
+        hello world
+      </Component>
+    );
+
+    expect(getByText('hello world')).not.toHaveCompiledCss('font-size', '15px');
+  });
+});

package/src/jsx/jsx-dev-runtime.tsx

@@ -0,0 +1,5 @@
+export type { CompiledJSX as JSX } from './jsx-local-namespace';
+
+// Pass through the (automatic) jsx dev runtime.
+// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
+export * from 'react/jsx-dev-runtime';

package/src/jsx/jsx-local-namespace.tsx

@@ -0,0 +1,75 @@
+import type { CssFunction } from '../types';
+
+type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps
+  ? string extends TProps['className' & keyof TProps]
+    ? {
+        /**
+         * ## CSS prop
+         *
+         * Style a JSX element.
+         * For further details [read the API documentation](https://compiledcssinjs.com/docs/api-css-prop).
+         *
+         * ### Style with objects
+         *
+         * @example
+         * ```
+         * import { css } from '@compiled/react';
+         *
+         * <div css={css({ fontSize: 12 })} />
+         * ```
+         *
+         * ### Style with template literals
+         *
+         * @example
+         * ```
+         * import { css } from '@compiled/react';
+         *
+         * <div css={css`color: red;`} />
+         * ```
+         *
+         * ### Compose styles with arrays
+         *
+         * @example
+         * ```
+         * import { css } from '@compiled/react';
+         *
+         * <div
+         *  css={[
+         *    css({ fontSize: 12 }),
+         *    css`color: red;`,
+         *  ]}
+         * />
+         * ```
+         */
+        css?: CssFunction | CssFunction[];
+      }
+    : // eslint-disable-next-line @typescript-eslint/ban-types
+      {}
+  : // eslint-disable-next-line @typescript-eslint/ban-types
+    {};
+
+// Unpack all here to avoid infinite self-referencing when defining our own JSX namespace
+type ReactJSXElement = JSX.Element;
+type ReactJSXElementClass = JSX.ElementClass;
+type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
+type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute;
+type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>;
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes;
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
+type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
+
+export namespace CompiledJSX {
+  export type Element = ReactJSXElement;
+  export type ElementClass = ReactJSXElementClass;
+  export type ElementAttributesProperty = ReactJSXElementAttributesProperty;
+  export type ElementChildrenAttribute = ReactJSXElementChildrenAttribute;
+  export type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> &
+    ReactJSXLibraryManagedAttributes<C, P>;
+  export type IntrinsicAttributes = ReactJSXIntrinsicAttributes;
+  export type IntrinsicClassAttributes<T> = ReactJSXIntrinsicClassAttributes<T>;
+  export type IntrinsicElements = {
+    [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+      css?: CssFunction | CssFunction[];
+    };
+  };
+}

package/src/jsx/jsx-runtime.tsx

@@ -0,0 +1,5 @@
+export type { CompiledJSX as JSX } from './jsx-local-namespace';
+
+// Pass through the (automatic) jsx runtime.
+// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
+export * from 'react/jsx-runtime';

package/src/keyframes/__fixtures__/index.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { keyframes } from '@compiled/react';
 
 export const fadeOut = keyframes({

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

@@ -1,20 +1,34 @@
+/** @jsxImportSource @compiled/react */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { keyframes, styled } from '@compiled/react';
 import { render } from '@testing-library/react';
 
-import defaultFadeOut, { fadeOut as shadowedFadeOut, namedFadeOut } from '../__fixtures__';
+import defaultFadeOut, { namedFadeOut, fadeOut as shadowedFadeOut } from '../__fixtures__';
 
 const getOpacity = (str: string | number) => str;
 
 const getKeyframe = (name: string) => {
-  const styles = Array.from(
-    document.body.querySelectorAll('style'),
-    (style) => style.innerHTML
-  ).join('\n');
+  const searchStr = `@keyframes ${name}`;
 
-  return styles.substring(styles.indexOf(`@keyframes ${name}`));
+  return Array.from(document.head.querySelectorAll('style'), (style) => style.innerHTML)
+    .filter((style) => style.indexOf(searchStr) >= 0)
+    .map((style) => style.substring(style.indexOf(searchStr)))
+    .join('\n');
 };
 
 describe('keyframes', () => {
+  beforeAll(() => {
+    process.env.CACHE = 'false';
+  });
+
+  afterAll(() => {
+    delete process.env.CACHE;
+  });
+
+  afterEach(() => {
+    document.head.innerHTML = '';
+  });
+
   describe('referenced through a css prop', () => {
     describe('render an animation', () => {
       it('given an object call expression argument', () => {

package/src/keyframes/index.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 import type { BasicTemplateInterpolations, CSSProps } from '../types';

package/src/keyframes/index.tsx

@@ -4,28 +4,14 @@ import { createSetupError } from '../utils/error';
 export type KeyframeSteps = string | Record<string, CSSProps>;
 
 /**
- * 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
- */
-export function keyframes(
-  _strings: TemplateStringsArray,
-  ..._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: {
@@ -35,23 +21,33 @@ export function keyframes(
  *     opacity: 0,
  *   },
  * });
+ *
+ * <div css={{ animation: `${fadeOut} 2s` }} />
  * ```
  *
- * 2. A string
+ * ### Style with template literals
  *
+ * @example
  * ```
- * const fadeOut = keyframes('from { opacity: 1; } to { opacity: 0; }');
- * ```
+ * const fadeOut = keyframes`
+ *   from {
+ *     opacity: 1;
+ *   }
  *
- * 3. A template literal
+ *   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
  */
-export function keyframes(_steps: KeyframeSteps): string;
+export function keyframes(steps: KeyframeSteps): string;
+
+export function keyframes(
+  strings: TemplateStringsArray,
+  ...interpolations: BasicTemplateInterpolations[]
+): string;
 
 export function keyframes(
   _stringsOrSteps: TemplateStringsArray | KeyframeSteps,

package/src/runtime/__perf__/ax.test.ts

@@ -0,0 +1,42 @@
+import { runBenchmark } from '@compiled/benchmark';
+
+import { ax } from '../index';
+
+describe('ax benchmark', () => {
+  it('completes with ax() string as the fastest', async () => {
+    const arr = [
+      '_19itglyw',
+      '_2rko1l7b',
+      '_ca0qftgi',
+      '_u5f319bv',
+      '_n3tdftgi',
+      '_19bv19bv',
+      '_bfhk1mzw',
+      '_syazu67f',
+      '_k48p1nn1',
+      '_ect41kw7',
+      '_1wybdlk8',
+      '_irr3mlcl',
+      '_1di6vctu',
+      undefined,
+    ];
+
+    // Remove undefined and join the strings
+    const str = arr.slice(0, -1).join(' ');
+
+    const benchmark = await runBenchmark('ax', [
+      {
+        name: 'ax() array',
+        fn: () => ax(arr),
+      },
+      {
+        name: 'ax() string',
+        fn: () => ax([str, undefined]),
+      },
+    ]);
+
+    expect(benchmark).toMatchObject({
+      fastest: ['ax() string'],
+    });
+  }, 30000);
+});

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

@@ -0,0 +1,111 @@
+import { runBenchmark } from '@compiled/benchmark';
+import * as React from 'react';
+import { renderToString } from 'react-dom/server';
+
+import { CC, CS } from '../index';
+
+import { StyleArr, StyleStr } 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%}',
+    ];
+
+    const stylesStr = stylesArr.join('');
+
+    const className = [
+      '_bfhk1jys',
+      '_2rko1l7b',
+      '_vchhusvi',
+      '_syaz4rde',
+      '_1e0c1o8l',
+      '_1wyb1skh',
+      '_k48p1fw0',
+      '_vwz4kb7n',
+      '_p12f1osq',
+      '_ca0qyh40',
+      '_u5f3idpf',
+      '_n3td1l7b',
+      '_19bvidpf',
+      '_1p1dangw',
+      '_s7n41q9y',
+    ].join(' ');
+
+    const style = {
+      '--_16owtcm': 'rgb(227, 252, 239)',
+      '--_kmurgp': 'rgb(0, 102, 68)',
+    } as any;
+
+    const nonce = 'k0Mp1lEd';
+
+    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>
+          );
+        },
+      },
+      {
+        name: 'CS (n array elements)',
+        fn: () => {
+          renderToString(
+            <CC>
+              <CS nonce={nonce}>{stylesArr}</CS>
+              <span className={className} style={style}>
+                hello world
+              </span>
+            </CC>
+          );
+        },
+      },
+      {
+        name: 'StyleArr',
+        fn: () => {
+          renderToString(
+            <CC>
+              <StyleArr nonce={nonce}>{stylesArr}</StyleArr>
+              <span className={className} style={style}>
+                hello world
+              </span>
+            </CC>
+          );
+        },
+      },
+      {
+        name: 'StyleStr',
+        fn: () => {
+          renderToString(
+            <CC>
+              <StyleStr nonce={nonce}>{stylesStr}</StyleStr>
+              <span className={className} style={style}>
+                hello world
+              </span>
+            </CC>
+          );
+        },
+      },
+    ]);
+
+    expect(benchmark).toMatchObject({
+      fastest: expect.not.arrayContaining(['StyleStr', 'CS (n array elements)']),
+    });
+  }, 30000);
+});

package/src/runtime/__perf__/sheet.test.ts

@@ -0,0 +1,61 @@
+import { runBenchmark } from '@compiled/benchmark';
+
+import insertRule from '../sheet';
+
+import { createStyleSheet } from './utils/sheet';
+
+global.document = {
+  // @ts-expect-error
+  createTextNode: () => {},
+  head: {
+    // @ts-expect-error
+    insertBefore: () => {},
+  },
+  // @ts-expect-error
+  createElement: () => ({
+    appendChild: () => {},
+  }),
+};
+
+describe('sheet benchmark', () => {
+  it('completes with insertRule as the fastest', async () => {
+    const rules = [
+      '._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 benchmark = await runBenchmark('sheet', [
+      {
+        name: 'insertRule',
+        fn: () => {
+          for (const rule of rules) {
+            insertRule(rule, {});
+          }
+        },
+      },
+      {
+        name: 'createStyleSheet',
+        fn: () => {
+          const sheet = createStyleSheet({});
+
+          for (const rule of rules) {
+            sheet(rule);
+          }
+        },
+      },
+    ]);
+
+    expect(benchmark).toMatchObject({
+      fastest: expect.arrayContaining(['insertRule']),
+    });
+  }, 30000);
+});

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

@@ -0,0 +1,60 @@
+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;
+  nonce: string;
+};
+
+export function StyleStr({ children, nonce }: StyleStrProps): JSX.Element | null {
+  const inserted = useCache();
+
+  // The following code will not exist in the browser bundle.
+  const sheets = children.split('.');
+  let toInsert = '';
+
+  for (let i = 0; i < sheets.length; i++) {
+    const sheet = sheets[i];
+    if (inserted[sheet]) {
+      continue;
+    }
+    toInsert += sheet;
+  }
+
+  if (!toInsert) {
+    return null;
+  }
+
+  return <style nonce={nonce}>{toInsert}</style>;
+}
+
+export type StyleArrProps = {
+  children: string[];
+  nonce: string;
+};
+
+export function StyleArr({ children: sheets, nonce }: StyleArrProps): JSX.Element | null {
+  const inserted = useCache();
+
+  // The following code will not exist in the browser bundle.
+  let toInsert = '';
+
+  for (let i = 0; i < sheets.length; i++) {
+    const sheet = sheets[i];
+    if (inserted[sheet]) {
+      continue;
+    }
+    toInsert += sheet;
+  }
+
+  if (!toInsert) {
+    return null;
+  }
+
+  return <style nonce={nonce}>{toInsert}</style>;
+}