@compiled/react 0.8.0 → 0.10.1

package/dist/esm/runtime/style.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet';
 import { analyzeCssInDev } from './dev-warnings';
-import { useCache } from './style-cache';
 import { isNodeEnvironment } from './is-node';
+import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet';
+import { useCache } from './style-cache';
 export default function Style(props) {
     var inserted = useCache();
     if (process.env.NODE_ENV === 'development') {

package/dist/esm/runtime/style.js.flow

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

package/dist/esm/runtime/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/runtime/style.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,EAAE,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAU9C,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAiB;IAC7C,IAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;IAE5B,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;KACzC;IAED,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE;QACzB,IAAI,iBAAiB,EAAE,EAAE;YACvB,IAAM,gBAAc,GAAoC,EAAE,CAAC;YAC3D,IAAI,SAAS,GAAG,KAAK,CAAC;YAEtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC9C,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAChC,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE;oBACnB,SAAS;iBACV;qBAAM;oBACL,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;oBACvB,SAAS,GAAG,IAAI,CAAC;iBAClB;gBAED,IAAM,UAAU,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;gBAC7C,gBAAc,CAAC,UAAU,CAAC,GAAG,CAAC,gBAAc,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC;aACzE;YAED,IAAI,CAAC,SAAS,EAAE;gBACd,OAAO,IAAI,CAAC;aACb;YAED,OAAO,CACL,mDAEE,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,uBAAuB,EAAE;oBACvB,MAAM,EAAE,mBAAmB,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,gBAAc,CAAC,MAAM,CAAC,EAAtB,CAAsB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;iBAC7E,GACD,CACH,CAAC;SACH;aAAM;YACL,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC9C,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAChC,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE;oBACnB,SAAS;iBACV;gBAED,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;gBACvB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;aAC1B;SACF;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/runtime/style.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,UAAU,EAAE,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAWzC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAiB;IAC7C,IAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;IAE5B,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;KACzC;IAED,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE;QACzB,IAAI,iBAAiB,EAAE,EAAE;YACvB,IAAM,gBAAc,GAAoC,EAAE,CAAC;YAC3D,IAAI,SAAS,GAAG,KAAK,CAAC;YAEtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC9C,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAChC,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE;oBACnB,SAAS;iBACV;qBAAM;oBACL,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;oBACvB,SAAS,GAAG,IAAI,CAAC;iBAClB;gBAED,IAAM,UAAU,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;gBAC7C,gBAAc,CAAC,UAAU,CAAC,GAAG,CAAC,gBAAc,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC;aACzE;YAED,IAAI,CAAC,SAAS,EAAE;gBACd,OAAO,IAAI,CAAC;aACb;YAED,OAAO,CACL,mDAEE,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,uBAAuB,EAAE;oBACvB,MAAM,EAAE,mBAAmB,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,gBAAc,CAAC,MAAM,CAAC,EAAtB,CAAsB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;iBAC7E,GACD,CACH,CAAC;SACH;aAAM;YACL,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC9C,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAChC,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE;oBACnB,SAAS;iBACV;gBAED,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;gBACvB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;aAC1B;SACF;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/esm/runtime/types.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for types
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 export interface StyleSheetOpts {

package/dist/esm/runtime.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for runtime
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 declare export { CC, CS, ax, ix } from './runtime/index';

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

@@ -1,19 +1,16 @@
 import type { ComponentType } from 'react';
-import type { BasicTemplateInterpolations, CssFunction, CSSProps } from '../types';
-export interface FunctionIterpolation<TProps> {
-    (props: TProps): CSSProps | string | number | boolean | undefined;
-}
+import type { BasicTemplateInterpolations, CssFunction, FunctionInterpolation } from '../types';
 /**
  * Typing for the CSS object.
  */
-export declare type CssObject<TProps> = CssFunction<FunctionIterpolation<TProps>>;
+export declare type CssObject<TProps> = CssFunction<FunctionInterpolation<TProps>>;
 /**
  * Extra props added to the output Styled Component.
  */
 export interface StyledProps {
     as?: keyof JSX.IntrinsicElements;
 }
-export declare type Interpolations<TProps extends unknown> = (BasicTemplateInterpolations | FunctionIterpolation<TProps> | CssObject<TProps> | CssObject<TProps>[])[];
+export declare type Interpolations<TProps extends unknown> = (BasicTemplateInterpolations | FunctionInterpolation<TProps> | CssObject<TProps> | CssObject<TProps>[])[];
 /**
  * This allows us to take the generic `TTag` (that will be a valid `DOM` tag) and then use it to
  * define correct props based on it from `JSX.IntrinsicElements`, while also injecting our own
@@ -35,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
+ * `;
  * ```
- * 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
+ *
+ * ### Compose styles with arrays
+ *
+ * @example
  * ```
+ * import { css } from '@compiled/react';
+ *
+ * styled.div([
+ *   { fontSize: 12 },
+ *   css`font-size: 12px;`
+ * ]);
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-styled
+ * 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.flow

@@ -1,18 +1,15 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 import type { ComponentType } from 'react';
-import type { BasicTemplateInterpolations, CssFunction, CSSProps } from '../types';
-export interface FunctionIterpolation<TProps> {
-  (props: TProps): CSSProps | string | number | boolean | void;
-}
+import type { BasicTemplateInterpolations, CssFunction, FunctionInterpolation } from '../types';
 /**
  * Typing for the CSS object.
  */
-export type CssObject<TProps> = CssFunction<FunctionIterpolation<TProps>>;
+export type CssObject<TProps> = CssFunction<FunctionInterpolation<TProps>>;
 /**
  * Extra props added to the output Styled Component.
  */
@@ -21,7 +18,7 @@ export type StyledProps = {
 };
 export type Interpolations<TProps: mixed> = (
   | BasicTemplateInterpolations
-  | FunctionIterpolation<TProps>
+  | FunctionInterpolation<TProps>
   | CssObject<TProps>
   | CssObject<TProps>[]
 )[];
@@ -36,7 +33,7 @@ export interface StyledFunctionFromTag<TTag: $Keys<$JSXIntrinsics>> {
     ...interpolations: Interpolations<TProps>
   ): React$ComponentType<{
     ...TProps,
-    ...$ElementType<$JSXIntrinsics, TTag>,
+    ...$Exact<$ElementType<$JSXIntrinsics, TTag>>,
     ...StyledProps,
   }>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA6DlD;;;;;;;;;;;;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/dist/esm/types.d.ts

@@ -3,11 +3,14 @@ import type * as CSS from 'csstype';
  * Typing for the interpolations.
  */
 export declare type BasicTemplateInterpolations = string | number;
+export interface FunctionInterpolation<TProps> {
+    (props: TProps): CSSProps | BasicTemplateInterpolations | boolean | undefined;
+}
 /**
  * These are all the CSS props that will exist.
  */
-export declare type CSSProps = CSS.Properties<string | number>;
+export declare type CSSProps = CSS.Properties<BasicTemplateInterpolations>;
 export declare type AnyKeyCssProps<TValue> = {
-    [key: string]: AnyKeyCssProps<TValue> | CSSProps | string | number | TValue;
+    [key: string]: AnyKeyCssProps<TValue> | CSSProps | BasicTemplateInterpolations | TValue;
 };
 export declare type CssFunction<TValue = void> = CSSProps | AnyKeyCssProps<TValue> | TemplateStringsArray | string | boolean | undefined;

package/dist/esm/types.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for types
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 import * as CSS from 'csstype';
@@ -9,12 +9,15 @@ import * as CSS from 'csstype';
  * Typing for the interpolations.
  */
 export type BasicTemplateInterpolations = string | number;
+export interface FunctionInterpolation<TProps> {
+  (props: TProps): CSSProps | BasicTemplateInterpolations | boolean | void;
+}
 /**
  * These are all the CSS props that will exist.
  */
-export type CSSProps = CSS.Properties<string | number>;
+export type CSSProps = CSS.Properties<BasicTemplateInterpolations>;
 export type AnyKeyCssProps<TValue> = {
-  [key: string]: AnyKeyCssProps<TValue> | CSSProps | string | number | TValue,
+  [key: string]: AnyKeyCssProps<TValue> | CSSProps | BasicTemplateInterpolations | TValue,
   ...
 };
 export type CssFunction<TValue = void> =

package/dist/esm/utils/error.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for error
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.14.1
+ * Flowgen v1.15.0
  * @flow
  */
 declare export var createSetupError: () => Error;

package/jsx-dev-runtime/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/cjs/jsx/jsx-dev-runtime.js",
+  "module": "../dist/esm/jsx/jsx-dev-runtime.js",
+  "browser": "../dist/browser/jsx/jsx-dev-runtime.js",
+  "types": "../dist/esm/jsx/jsx-dev-runtime.d.ts"
+}

package/jsx-runtime/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/cjs/jsx/jsx-runtime.js",
+  "module": "../dist/esm/jsx/jsx-runtime.js",
+  "browser": "../dist/browser/jsx/jsx-runtime.js",
+  "types": "../dist/esm/jsx/jsx-runtime.d.ts"
+}

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@compiled/react",
-  "version": "0.8.0",
+  "version": "0.10.1",
   "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,16 @@
   "files": [
     "dist",
     "src",
-    "babel-plugin",
     "runtime",
-    "README.md"
+    "jsx-runtime",
+    "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",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

package/src/__tests__/browser.test.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { render } from '@testing-library/react';
 import { styled } from '@compiled/react';
+import { render } from '@testing-library/react';
+import React from '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', () => ({
+// 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,
 }));
 

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

@@ -0,0 +1,197 @@
+/** @jsxImportSource @compiled/react */
+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,10 @@
 /**
  * @jest-environment node
  */
-import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
 import { styled } from '@compiled/react';
 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 +134,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,6 @@
+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: {