@compiled/react 0.9.0 → 0.10.2

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@compiled/react",
-  "version": "0.9.0",
+  "version": "0.10.2",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
     "css-in-js",
     "styled-components",
-    "emotion-js",
     "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",
@@ -21,16 +20,44 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
-    },
-    "./babel-plugin": {
-      "import": "./dist/esm/babel-plugin.js",
-      "require": "./dist/cjs/babel-plugin.js"
+      "import": [
+        "./dist/esm/index.js",
+        "./src/index.tsx"
+      ],
+      "require": [
+        "./dist/cjs/index.js",
+        "./src/index.tsx"
+      ]
     },
     "./runtime": {
-      "import": "./dist/esm/runtime.js",
-      "require": "./dist/cjs/runtime.js"
+      "import": [
+        "./dist/esm/runtime.js",
+        "./src/runtime.tsx"
+      ],
+      "require": [
+        "./dist/cjs/runtime.js",
+        "./src/runtime.tsx"
+      ]
+    },
+    "./jsx-runtime": {
+      "import": [
+        "./dist/esm/jsx/jsx-runtime.js",
+        "./src/jsx/jsx-runtime.tsx"
+      ],
+      "require": [
+        "./dist/cjs/jsx/jsx-runtime.js",
+        "./src/jsx/jsx-runtime.tsx"
+      ]
+    },
+    "./jsx-dev-runtime": {
+      "import": [
+        "./dist/esm/jsx/jsx-dev-runtime.js",
+        "./src/jsx/jsx-dev-runtime.tsx"
+      ],
+      "require": [
+        "./dist/cjs/jsx/jsx-dev-runtime.js",
+        "./src/jsx/jsx-dev-runtime.tsx"
+      ]
     }
   },
   "main": "./dist/cjs/index.js",
@@ -40,15 +67,17 @@
   "files": [
     "dist",
     "src",
-    "babel-plugin",
     "runtime",
-    "README.md"
+    "jsx-runtime",
+    "jsx-dev-runtime"
   ],
   "dependencies": {
-    "csstype": "^3.0.9"
+    "csstype": "^3.0.10"
   },
   "devDependencies": {
+    "@compiled/benchmark": "^1.0.1",
     "@testing-library/react": "^11.2.7",
+    "@types/react-dom": "^17.0.11",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

package/src/__tests__/browser.test.tsx

@@ -1,12 +1,7 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { styled } from '@compiled/react';
-
-// Because of the babel transform these tests are using dist instead of src.
-// Anything we can do to use src instead?
-jest.mock('../../dist/cjs/runtime/is-node', () => ({
-  isNodeEnvironment: () => false,
-}));
+import { render } from '@testing-library/react';
+import React from 'react';
 
 describe('browser', () => {
   beforeEach(() => {

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

@@ -0,0 +1,199 @@
+/** @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';
+
+describe('toHaveCompliedCss', () => {
+  it('should detect styles', () => {
+    const { getByText } = render(
+      <div
+        css={{
+          fontSize: '12px',
+        }}>
+        hello world
+      </div>
+    );
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '12px');
+  });
+
+  it('should detect missing styles', () => {
+    const { getByText } = render(<div css={{ fontSize: '12px' }}>hello world</div>);
+
+    expect(getByText('hello world')).not.toHaveCompiledCss('color', 'blue');
+  });
+
+  it('should detect multiple styles', () => {
+    const { getByText } = render(<div css={{ fontSize: '12px', color: 'blue' }}>hello world</div>);
+
+    expect(getByText('hello world')).toHaveCompiledCss({
+      fontSize: '12px',
+      color: 'blue',
+    });
+  });
+
+  it('should detect single missing styles', () => {
+    const { getByText } = render(<div css={{ fontSize: '12px', color: 'blue' }}>hello world</div>);
+
+    expect(getByText('hello world')).not.toHaveCompiledCss({
+      zindex: '9999',
+    });
+  });
+
+  it('should detect multiple missing styles', () => {
+    const { getByText } = render(<div css={{ fontSize: '12px', color: 'blue' }}>hello world</div>);
+
+    expect(getByText('hello world')).not.toHaveCompiledCss({
+      backgroundColor: 'yellow',
+      zindex: '9999',
+    });
+  });
+
+  it('should detect evaluated rule from array styles', () => {
+    const base = { color: 'blue' };
+    const next = ` font-size: 15px; `;
+
+    const { getByText } = render(<div css={[base, next]}>hello world</div>);
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '15px');
+    expect(getByText('hello world')).toHaveCompiledCss('color', 'blue');
+  });
+
+  it('should find styles composed from multiple sources', () => {
+    const StyledDiv = styled.div`
+      font-size: 12px;
+    `;
+
+    const { getByText } = render(<StyledDiv css={{ fontSize: 14 }}>Hello world</StyledDiv>);
+
+    expect(getByText('Hello world')).toHaveCompiledCss('font-size', '14px');
+  });
+
+  it('should find multiple styles composed from multiple sources', () => {
+    const StyledDiv = styled.div`
+      color: yellow;
+      background-color: red;
+    `;
+
+    const { getByText } = render(<StyledDiv css={{ color: 'blue' }}>Hello world</StyledDiv>);
+
+    expect(getByText('Hello world')).toHaveCompiledCss({
+      backgroundColor: 'red',
+      color: 'blue',
+    });
+  });
+
+  it('should match styles with target:hover', () => {
+    const { getByText } = render(
+      <div
+        css={{
+          fontSize: '12px',
+          ':hover': {
+            transform: 'scale(2)',
+          },
+        }}>
+        hello world
+      </div>
+    );
+    const el = getByText('hello world');
+    expect(el).toHaveCompiledCss('transform', 'scale(2)', { target: ':hover' });
+    expect(el).not.toHaveCompiledCss('transform', 'scale(2)');
+  });
+
+  it('should match styles with target', () => {
+    const { getByText } = render(
+      <div
+        css={{
+          fontSize: '12px',
+          ':hover': {
+            transform: 'scale(2)',
+          },
+          ':active': {
+            color: 'blue',
+          },
+        }}>
+        hello world
+      </div>
+    );
+    const el = getByText('hello world');
+    expect(el).not.toHaveCompiledCss('color', 'blue', { target: ':hover' });
+    expect(el).not.toHaveCompiledCss('transform', 'scale(2)');
+    expect(el).not.toHaveCompiledCss('transform', 'scale(2)', { target: ':active' });
+    expect(el).toHaveCompiledCss('transform', 'scale(2)', { target: ':hover' });
+    expect(el).toHaveCompiledCss('color', 'blue', { target: ':active' });
+  });
+
+  it('should match styles with media', () => {
+    const { getByText } = render(
+      <div
+        css={{
+          color: 'green',
+          '@media screen': {
+            color: 'yellow',
+          },
+        }}>
+        hello world
+      </div>
+    );
+    const el = getByText('hello world');
+    expect(el).toHaveCompiledCss('color', 'green');
+    expect(el).toHaveCompiledCss('color', 'yellow', { media: 'screen' });
+    // without narrowing to media -> screen
+    expect(el).not.toHaveCompiledCss('color', 'yellow');
+  });
+
+  it('should match styles with media and target', () => {
+    const { getByText } = render(
+      <div
+        css={{
+          color: 'green',
+          '@media screen': {
+            color: 'yellow',
+            ':hover': {
+              background: 'red',
+            },
+          },
+        }}>
+        hello world
+      </div>
+    );
+    const el = getByText('hello world');
+    expect(el).toHaveCompiledCss('background-color', 'red', { media: 'screen', target: ':hover' });
+  });
+
+  it('should match styles with media nested inside class', () => {
+    const { getByText } = render(
+      <div
+        css={{
+          '@media (min-width: 2px)': {
+            color: 'blue',
+            '@media (min-width: 1px)': {
+              color: 'red',
+            },
+          },
+        }}>
+        hello world
+      </div>
+    );
+    const el = getByText('hello world');
+    expect(el).toHaveCompiledCss('color', 'blue', { media: '(min-width: 2px)' });
+    expect(el).toHaveCompiledCss('color', 'red', { media: '(min-width: 1px)' });
+  });
+
+  it('should match complicated direct ancestors', () => {
+    const { getByText } = render(
+      <div
+        css={`
+          > :first-child {
+            color: red;
+          }
+        `}>
+        hello world
+      </div>
+    );
+
+    const el = getByText('hello world');
+    expect(el).toHaveCompiledCss('color', 'red', { target: '> :first-child' });
+  });
+});

package/src/__tests__/server-side-hydrate.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { hydrate } from 'react-dom';
+
 import { CC, CS } from '../runtime';
 
 jest.mock('../runtime/is-node', () => ({

package/src/__tests__/ssr.test.tsx

@@ -1,10 +1,12 @@
 /**
  * @jest-environment node
  */
-import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
+// 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';
 
 describe('SSR', () => {
   it('should render styles inline', () => {
@@ -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,6 +1,7 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ClassNames } from '@compiled/react';
 import { render } from '@testing-library/react';
 import React from 'react';
-import { ClassNames } from '@compiled/react';
 
 describe('class names component', () => {
   it('should create css from object literal', () => {

package/src/class-names/index.js.flow

@@ -1,11 +1,11 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 import type { Node } from 'react';
-import type { CssFunction, BasicTemplateInterpolations } from '../types';
+import type { BasicTemplateInterpolations, CssFunction } from '../types';
 export type Interpolations = (BasicTemplateInterpolations | CssFunction<> | CssFunction<>[])[];
 export interface ClassNamesProps {
   children: (opts: {

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,7 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-import '@compiled/react';
+/** @jsxImportSource @compiled/react */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { css } from '@compiled/react';
+import { render } from '@testing-library/react';
 
 describe('css prop', () => {
   it('should create css from object literal', () => {
@@ -30,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.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, FunctionInterpolation } from '../types';

package/src/css/index.tsx

@@ -1,41 +1,51 @@
+/* eslint-disable import/export */
+
+import type {
+  AnyKeyCssProps,
+  BasicTemplateInterpolations,
+  CSSProps,
+  FunctionInterpolation,
+} from '../types';
 import { createSetupError } from '../utils/error';
-import type { BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
 
 /**
- * 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/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', () => {