@compiled/react 0.10.0 → 0.10.3

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

@@ -32,16 +32,44 @@ export interface StyledComponentInstantiator extends StyledComponentMap {
     <TInheritedProps extends unknown>(Component: ComponentType<TInheritedProps>): StyledFunctionFromComponent<TInheritedProps>;
 }
 /**
- * Create a component that ties styles to an element which comes with built-in behavior such as `ref` and `as` prop support.
+ * ## Styled component
  *
+ * Create a component that styles a JSX element which comes with built-in behavior such as `ref` and `as` prop support.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-styled).
+ *
+ * ### Style with objects
+ *
+ * @example
+ * ```
+ * styled.div({
+ *   fontSize: 12,
+ * });
+ * ```
+ *
+ * ### Style with template literals
+ *
+ * @example
  * ```
- * styled.div`font-size: 12px`; // Template literal CSS
- * styled.div({ fontSize: 12 }); // Object CSS
- * styled.div([{ fontSize: 12 }, `font-size: 12px;`]) // Array CSS
- * styled.div({ fontSize: 12 }, `font-size: 12px`) Multi arguments CSS
+ * styled.div`
+ *   font-size: 12px
+ * `;
  * ```
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-styled
+ * ### Compose styles with arrays
+ *
+ * @example
+ * ```
+ * import { css } from '@compiled/react';
+ *
+ * styled.div([
+ *   { fontSize: 12 },
+ *   css`font-size: 12px;`
+ * ]);
+ *
+ * styled.div(
+ *   { fontSize: 12 },
+ *   css`font-size: 12px`
+ * );
+ * ```
  */
 export declare const styled: StyledComponentInstantiator;

package/dist/esm/styled/index.js

@@ -1,16 +1,44 @@
 import { createSetupError } from '../utils/error';
 /**
- * Create a component that ties styles to an element which comes with built-in behavior such as `ref` and `as` prop support.
+ * ## Styled component
  *
+ * Create a component that styles a JSX element which comes with built-in behavior such as `ref` and `as` prop support.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-styled).
+ *
+ * ### Style with objects
+ *
+ * @example
+ * ```
+ * styled.div({
+ *   fontSize: 12,
+ * });
+ * ```
+ *
+ * ### Style with template literals
+ *
+ * @example
  * ```
- * styled.div`font-size: 12px`; // Template literal CSS
- * styled.div({ fontSize: 12 }); // Object CSS
- * styled.div([{ fontSize: 12 }, `font-size: 12px;`]) // Array CSS
- * styled.div({ fontSize: 12 }, `font-size: 12px`) Multi arguments CSS
+ * styled.div`
+ *   font-size: 12px
+ * `;
  * ```
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-styled
+ * ### Compose styles with arrays
+ *
+ * @example
+ * ```
+ * import { css } from '@compiled/react';
+ *
+ * styled.div([
+ *   { fontSize: 12 },
+ *   css`font-size: 12px;`
+ * ]);
+ *
+ * styled.div(
+ *   { fontSize: 12 },
+ *   css`font-size: 12px`
+ * );
+ * ```
  */
 export var styled = new Proxy({}, {
     get: function () {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAwDlD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,IAAM,MAAM,GAAgC,IAAI,KAAK,CAC1D,EAAE,EACF;IACE,GAAG;QACD,OAAO;YACL,8CAA8C;YAC9C,yDAAyD;YACzD,MAAM,gBAAgB,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CACF,CACK,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAwDlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,IAAM,MAAM,GAAgC,IAAI,KAAK,CAC1D,EAAE,EACF;IACE,GAAG;QACD,OAAO;YACL,8CAA8C;YAC9C,yDAAyD;YACzD,MAAM,gBAAgB,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CACF,CACK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.10.0",
+  "version": "0.10.3",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
@@ -8,7 +8,7 @@
     "styled-components",
     "typescript"
   ],
-  "homepage": "https://compiledcssinjs.com",
+  "homepage": "https://compiledcssinjs.com/docs/pkg-react",
   "bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
   "repository": {
     "type": "git",
@@ -72,11 +72,14 @@
     "jsx-dev-runtime"
   ],
   "dependencies": {
-    "csstype": "^3.0.9"
+    "csstype": "^3.0.10"
   },
   "devDependencies": {
-    "@testing-library/react": "^11.2.7",
-    "@types/react-dom": "^17.0.10",
+    "@compiled/benchmark": "^1.0.1",
+    "@testing-library/react": "^12.1.3",
+    "@types/jsdom": "^16.2.14",
+    "@types/react-dom": "^17.0.11",
+    "jsdom": "^19.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

package/src/__tests__/browser.test.tsx

@@ -1,13 +1,8 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { styled } from '@compiled/react';
 import { render } from '@testing-library/react';
 import React from 'react';
 
-// TODO: When we move back to browser checking (window vs. process) we can remove
-// this and replace with the "jest-environment node" pragma.
-jest.mock('../../src/runtime/is-node', () => ({
-  isNodeEnvironment: () => false,
-}));
-
 describe('browser', () => {
   beforeEach(() => {
     // Reset style tags in head before each test so that it will remove styles

package/src/__tests__/display-names.test.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { styled } from '@compiled/react';
 
 describe('display names', () => {

package/src/__tests__/jest-matcher.test.tsx

@@ -1,4 +1,6 @@
 /** @jsxImportSource @compiled/react */
+// This test belongs in @compiled/jest - but can't be placed there due to a circular dependency.
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { styled } from '@compiled/react';
 import { render } from '@testing-library/react';
 

package/src/__tests__/ssr.test.tsx

@@ -1,7 +1,9 @@
 /**
  * @jest-environment node
  */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { styled } from '@compiled/react';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { CC as CompiledRoot } from '@compiled/react/runtime';
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
@@ -134,7 +136,7 @@ describe('SSR', () => {
 
     expect(result.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
       "<style data-cmpld=\\"true\\" nonce=\\"k0Mp1lEd\\">._1e0c1txw{display:flex}._1wyb12am{font-size:50px}._syaz1cnh{color:purple}._ysv75scu:link{color:red}._105332ev:visited{color:pink}._f8pjbf54:focus{color:green}._30l31gy6:hover{color:yellow}._9h8h13q2:active{color:blue}@supports (display:grid){._1df61gy6:focus{color:yellow}._7okp11x8:active{color:black}}@media (max-width:800px){._1o8z1gy6:focus{color:yellow}._1cld11x8:active{color:black}}</style>
-      <a href=\\"https://atlassian.design\\" class=\\"_1e0c1txw _1wyb12am _syaz1cnh _30l31gy6 _9h8h13q2 _ysv75scu _7okp11x8 _1df61gy6 _f8pjbf54 _105332ev _1cld11x8 _1o8z1gy6\\">Atlassian Design System</a>"
+      <a href=\\"https://atlassian.design\\" class=\\"_1e0c1txw _1wyb12am _syaz1cnh _30l31gy6 _9h8h13q2 _ysv75scu _1df61gy6 _7okp11x8 _f8pjbf54 _105332ev _1o8z1gy6 _1cld11x8\\">Atlassian Design System</a>"
     `);
   });
 

package/src/class-names/__tests__/index.test.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { ClassNames } from '@compiled/react';
 import { render } from '@testing-library/react';
 import React from 'react';

package/src/class-names/index.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, CSSProperties } from 'react';
 
 import type { BasicTemplateInterpolations, CssFunction } from '../types';
 import { createSetupError } from '../utils/error';
@@ -8,36 +8,46 @@ export type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFun
 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>
+ * ```
  *
- * // Template literal CSS
+ * ### Style with template literals
+ *
+ * @example
+ * ```
  * <ClassNames>
  *   {({ css, style }) => children({ className: css`font-size: 12px;` })}
  * </ClassNames>
+ * ```
  *
- * // Array CSS
+ * ### Compose styles with arrays
+ *
+ * @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,4 +1,5 @@
 /** @jsxImportSource @compiled/react */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { css } from '@compiled/react';
 import { render } from '@testing-library/react';
 
@@ -29,6 +30,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.tsx

@@ -1,43 +1,51 @@
 /* eslint-disable import/export */
 
-import type { BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
+import type {
+  AnyKeyCssProps,
+  BasicTemplateInterpolations,
+  CSSProps,
+  FunctionInterpolation,
+} from '../types';
 import { createSetupError } from '../utils/error';
 
 /**
- * Create styles that can be re-used between components with a template literal.
+ * ## 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).
+ *
+ * ### 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
  *
- * @param css
- * @param values
+ * @example
+ * ```
+ * const redText = css`
+ *   color: red;
+ * `;
+ *
+ * <div css={redText} />
+ * ```
  */
 export default function css<T = void>(
-  _css: TemplateStringsArray,
-  ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
+  styles: TemplateStringsArray,
+  ...interpolations: (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(styles: AnyKeyCssProps<void> | CSSProps): CSSProps;
 
 export default function css<T = void>(
-  _css: TemplateStringsArray | CSSProps,
-  ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
+  _styles: TemplateStringsArray | CSSProps,
+  ..._interpolations: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
 ): CSSProps {
   throw createSetupError();
 }

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

@@ -1,5 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { jsx } from '@compiled/react';
 import { render } from '@testing-library/react';
 

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

@@ -4,16 +4,42 @@ type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps
   ? string extends TProps['className' & keyof TProps]
     ? {
         /**
-         * Tie styles to an element.
+         * ## 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;`} />
          * ```
-         * css={{ fontSize: 12 }} // Object CSS
-         * css={`font-size: 12px;`} // Template literal CSS
-         * css={[{ fontSize: 12 }, `font-size: 12px;`]} // Array CSS
+         *
+         * ### Compose styles with arrays
+         *
+         * @example
          * ```
+         * import { css } from '@compiled/react';
          *
-         * For more help, read the docs:
-         * https://compiledcssinjs.com/docs/api-css-prop
+         * <div
+         *  css={[
+         *    css({ fontSize: 12 }),
+         *    css`color: red;`,
+         *  ]}
+         * />
+         * ```
          */
         css?: CssFunction | CssFunction[];
       }

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,4 +1,5 @@
 /** @jsxImportSource @compiled/react */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { keyframes, styled } from '@compiled/react';
 import { render } from '@testing-library/react';
 
@@ -7,15 +8,27 @@ import defaultFadeOut, { namedFadeOut, fadeOut as shadowedFadeOut } from '../__f
 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.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,