@compiled/react 0.8.0 → 0.10.1

package/src/class-names/index.tsx

@@ -1,42 +1,53 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, CSSProperties } from 'react';
+
+import type { BasicTemplateInterpolations, CssFunction } from '../types';
 import { createSetupError } from '../utils/error';
-import type { CssFunction, BasicTemplateInterpolations } from '../types';
 
 export type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFunction[])[];
 
 export interface ClassNamesProps {
   children: (opts: {
     css: (css: CssFunction | CssFunction[], ...interpolations: Interpolations) => string;
-    style: { [key: string]: string };
+    style: CSSProperties;
   }) => ReactNode;
 }
 
 /**
- * Use a component where styles are not necessarily tied to an element.
+ * ## Class names
+ *
+ * Use a component where styles are not necessarily used on a JSX element.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-class-names).
+ *
+ * ### Style with objects
  *
+ * @example
  * ```
- * // Object CSS
  * <ClassNames>
  *   {({ css, style }) => children({ className: css({ fontSize: 12 }) })}
  * </ClassNames>
+ * ```
+ *
+ * ### Style with template literals
  *
- * // Template literal CSS
+ * @example
+ * ```
  * <ClassNames>
  *   {({ css, style }) => children({ className: css`font-size: 12px;` })}
  * </ClassNames>
+ * ```
+ *
+ * ### Compose styles with arrays
  *
- * // Array CSS
+ * @example
+ * ```
  * <ClassNames>
  *   {({ css, style }) =>
- *    children({ className: css([{ fontSize: 12 }, `font-size: 12px`]) })}
+ *    children({ className: css([{ fontSize: 12 }, css`font-size: 12px`]) })}
  * </ClassNames>
  * ```
- *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-class-names
- *
- * @param props
  */
-export function ClassNames(_: ClassNamesProps): JSX.Element {
+export function ClassNames({ children }: ClassNamesProps): JSX.Element;
+
+export function ClassNames(_props: ClassNamesProps): JSX.Element {
   throw createSetupError();
 }

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

@@ -1,7 +1,6 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-import '@compiled/react';
+/** @jsxImportSource @compiled/react */
 import { css } from '@compiled/react';
+import { render } from '@testing-library/react';
 
 describe('css prop', () => {
   it('should create css from object literal', () => {
@@ -30,6 +29,13 @@ describe('css prop', () => {
     expect(getByText('hello world')).toHaveCompiledCss('font-size', '13px');
   });
 
+  it('should create hover styles', () => {
+    const styles = css({ ':hover': { color: 'red' } });
+    const { getByText } = render(<div css={styles}>hello world</div>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('color', 'red', { target: ':hover' });
+  });
+
   it('should create css from tagged template expression variable', () => {
     const style = css`
       font-size: 13px;

package/src/css/index.js.flow

@@ -1,10 +1,10 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
-import type { CSSProps } from '../types';
+import type { BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
 /**
  * Create styles that can be re-used between components with a template literal.
  *
@@ -17,9 +17,9 @@ import type { CSSProps } from '../types';
  * @param css
  * @param values
  */
-declare export default function css(
+declare export default function css<T>(
   _css: $ReadOnlyArray<string>,
-  ..._values: (string | number)[]
+  ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
 ): CSSProps;
 /**
  * Create styles that can be re-used between components with an object

package/src/css/index.tsx

@@ -1,38 +1,51 @@
+/* eslint-disable import/export */
+
+import type {
+  AnyKeyCssProps,
+  BasicTemplateInterpolations,
+  CSSProps,
+  FunctionInterpolation,
+} from '../types';
 import { createSetupError } from '../utils/error';
-import type { CSSProps } from '../types';
 
 /**
- * Create styles that can be re-used between components with a template literal.
- *
- * ```
- * css`color: red;`;
- * ```
+ * ## CSS
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-css
+ * Define styles that are statically typed and useable with other Compiled APIs.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-css).
  *
- * @param css
- * @param values
- */
-export default function css(_css: TemplateStringsArray, ..._values: (string | number)[]): CSSProps;
-
-/**
- * Create styles that can be re-used between components with an object
+ * ### Style with objects
  *
+ * @example
  * ```
- * css({ color: 'red' });
+ * const redText = css({
+ *   color: 'red',
+ * });
+ *
+ * <div css={redText} />
  * ```
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-css
+ * ### Style with template literals
+ *
+ * @example
+ * ```
+ * const redText = css`
+ *   color: red;
+ * `;
  *
- * @param css
+ * <div css={redText} />
+ * ```
  */
-export default function css(_css: CSSProps): CSSProps;
+export default function css<T = void>(
+  styles: TemplateStringsArray,
+  ...interpolations: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
+): CSSProps;
+
+export default function css(styles: AnyKeyCssProps<void> | CSSProps): CSSProps;
 
-export default function css(
-  _css: TemplateStringsArray | CSSProps,
-  ..._values: (string | number)[]
+export default function css<T = void>(
+  _styles: TemplateStringsArray | CSSProps,
+  ..._interpolations: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
 ): CSSProps {
   throw createSetupError();
 }

package/src/index.js.flow

@@ -1,40 +1,15 @@
 /**
- * Flowtype definitions for index
+ * THIS IS A MANUALLY CURATED FLOW FILE.
+ *
+ * Flowtype definitions for runtime
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
-import type { CssFunction, CSSProps } from './types';
+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';
-declare module 'react' {
-  declare interface DOMAttributes<T> {
-    css?: CssFunction<> | CssFunction<>[];
-  }
-}
-declare module 'global' {
-  declare var JSX: typeof npm$namespace$JSX;
-  declare var npm$namespace$JSX: {|
-    IntrinsicAttributes: Class<JSX$IntrinsicAttributes>,
-  |};
-  declare interface JSX$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<>[];
-  }
-}

package/src/index.tsx

@@ -1,37 +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';
+
+// 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;
+
 export type { CssFunction, CSSProps };
 export type { CssObject } from './styled';
 
-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[];
-  }
-}
-
-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,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/__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/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);
+});