@compiled/react 0.7.0 → 0.10.0

package/src/css/index.tsx

@@ -1,8 +1,10 @@
+/* eslint-disable import/export */
+
+import type { BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
 import { createSetupError } from '../utils/error';
-import type { CSSProps } from '../types';
 
 /**
- * Create styles that can be re-used between components.
+ * Create styles that can be re-used between components with a template literal.
  *
  * ```
  * css`color: red;`;
@@ -14,6 +16,28 @@ import type { CSSProps } from '../types';
  * @param css
  * @param values
  */
-export default function css(_css: TemplateStringsArray, ..._values:(string|number)[]): CSSProps {
+export default function css<T = void>(
+  _css: TemplateStringsArray,
+  ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
+): CSSProps;
+
+/**
+ * Create styles that can be re-used between components with an object
+ *
+ * ```
+ * css({ color: 'red' });
+ * ```
+ *
+ * For more help, read the docs:
+ * https://compiledcssinjs.com/docs/api-css
+ *
+ * @param css
+ */
+export default function css(_css: CSSProps): CSSProps;
+
+export default function css<T = void>(
+  _css: TemplateStringsArray | CSSProps,
+  ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
+): CSSProps {
   throw createSetupError();
 }

package/src/index.js.flow

@@ -0,0 +1,15 @@
+/**
+ * THIS IS A MANUALLY CURATED FLOW FILE.
+ *
+ * Flowtype definitions for runtime
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.15.0
+ * @flow
+ */
+import type { CSSProps, CssFunction } from './types';
+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

@@ -1,35 +1,29 @@
+import { createElement } from 'react';
+
+import type { CompiledJSX } from './jsx/jsx-local-namespace';
+import type { CssFunction, CSSProps } from './types';
+
 export { keyframes } from './keyframes';
 export { styled } from './styled';
 export { ClassNames } from './class-names';
 export { default as css } from './css';
 
-import { CssFunction } from './types';
+// Pass through the (classic) jsx runtime.
+// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
+export const jsx = createElement;
 
-declare module 'react' {
-  // We must match the same type signature so the generic needs to stay.
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  interface DOMAttributes<T> {
-    css?: CssFunction | CssFunction[];
-  }
-}
+export type { CssFunction, CSSProps };
+export type { CssObject } from './styled';
 
-declare global {
-  namespace JSX {
-    interface IntrinsicAttributes {
-      /**
-       * Tie styles to an element.
-       * It is available when the `@compiled/react` module is in scope.
-       *
-       * ```
-       * css={{ fontSize: 12 }} // Object CSS
-       * css={`font-size: 12px;`} // Template literal CSS
-       * css={[{ fontSize: 12 }, `font-size: 12px;`]} // Array CSS
-       * ```
-       *
-       * For more help, read the docs:
-       * https://compiledcssinjs.com/docs/api-css-prop
-       */
-      css?: CssFunction | CssFunction[];
-    }
+export namespace jsx {
+  export namespace JSX {
+    export type Element = CompiledJSX.Element;
+    export type ElementClass = CompiledJSX.ElementClass;
+    export type ElementAttributesProperty = CompiledJSX.ElementAttributesProperty;
+    export type ElementChildrenAttribute = CompiledJSX.ElementChildrenAttribute;
+    export type LibraryManagedAttributes<C, P> = CompiledJSX.LibraryManagedAttributes<C, P>;
+    export type IntrinsicAttributes = CompiledJSX.IntrinsicAttributes;
+    export type IntrinsicClassAttributes<T> = CompiledJSX.IntrinsicClassAttributes<T>;
+    export type IntrinsicElements = CompiledJSX.IntrinsicElements;
   }
 }

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

@@ -1,5 +1,4 @@
-import '@compiled/react';
-import React from 'react';
+/** @jsxImportSource @compiled/react */
 import { render } from '@testing-library/react';
 
 describe('css prop', () => {

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,39 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+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,49 @@
+import type { CssFunction } from '../types';
+
+type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps
+  ? string extends TProps['className' & keyof TProps]
+    ? {
+        /**
+         * Tie styles to an element.
+         *
+         * ```
+         * css={{ fontSize: 12 }} // Object CSS
+         * css={`font-size: 12px;`} // Template literal CSS
+         * css={[{ fontSize: 12 }, `font-size: 12px;`]} // Array CSS
+         * ```
+         *
+         * For more help, read the docs:
+         * https://compiledcssinjs.com/docs/api-css-prop
+         */
+        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/__tests__/index.test.tsx

@@ -1,7 +1,8 @@
+/** @jsxImportSource @compiled/react */
 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;
 

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

@@ -0,0 +1,31 @@
+// @flow strict-local
+import React from 'react';
+import { css, ClassNames, styled, keyframes } from '@compiled/react';
+
+// Tagged template expression
+(): React$Element<'div'> => {
+  const fadeOut = keyframes`
+    from { opacity: 1; }
+    to   { opacity: 0; }
+  `;
+  return <div css={{ animationName: fadeOut }}>hello world</div>;
+};
+
+// Object call expression
+(): React$Element<'div'> => {
+  const fadeOut = keyframes({
+    from: {
+      opacity: 1,
+    },
+    to: {
+      opacity: 0,
+    },
+  });
+  return <div css={{ animationName: fadeOut }}>hello world</div>;
+};
+
+// String call expression
+(): React$Element<'div'> => {
+  const fadeOut = keyframes('from { opacity: 1; } to { opacity: 0; }');
+  return <div css={{ animationName: fadeOut }}>hello world</div>;
+};

package/src/keyframes/index.js.flow

@@ -0,0 +1,54 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.15.0
+ * @flow
+ */
+import type { BasicTemplateInterpolations, CSSProps } from '../types';
+export type KeyframeSteps = string | { [key: string]: CSSProps, ... };
+/**
+ * Create keyframes using a tagged template expression:
+ *
+ * ```
+ * 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:
+ *
+ * 1. An object expression
+ *
+ * ```
+ * const fadeOut = keyframes({
+ *   from: {
+ *     opacity: 1,
+ *   },
+ *   to: {
+ *     opacity: 0,
+ *   },
+ * });
+ * ```
+ *
+ * 2. A string
+ *
+ * ```
+ * const fadeOut = keyframes('from { opacity: 1; } to { opacity: 0; }');
+ * ```
+ *
+ * 3. A template literal
+ *
+ * ```
+ * const fadeOut = keyframes(`from { opacity: 1; } to { opacity: 0; }`);
+ * ```
+ * @param _steps The waypoints along the animation sequence
+ */
+declare export function keyframes(_steps: KeyframeSteps): string;

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>;
+}