@compiled/react 0.8.0 → 0.10.1

package/dist/browser/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/browser/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/browser/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,WAAyB;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,WAAyB;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/browser/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/browser/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/browser/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/browser/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/browser/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/browser/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/browser/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/browser/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/browser/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/dist/cjs/class-names/index.d.ts

@@ -1,38 +1,44 @@
-import type { ReactNode } from 'react';
-import type { CssFunction, BasicTemplateInterpolations } from '../types';
+import type { ReactNode, CSSProperties } from 'react';
+import type { BasicTemplateInterpolations, CssFunction } from '../types';
 export declare 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>
+ * ```
  *
- * // Template literal CSS
+ * ### Style with template literals
+ *
+ * @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 declare function ClassNames(_: ClassNamesProps): JSX.Element;
+export declare function ClassNames({ children }: ClassNamesProps): JSX.Element;

package/dist/cjs/class-names/index.js

@@ -2,33 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ClassNames = void 0;
 var error_1 = require("../utils/error");
-/**
- * Use a component where styles are not necessarily tied to an element.
- *
- * ```
- * // Object CSS
- * <ClassNames>
- *   {({ css, style }) => children({ className: css({ fontSize: 12 }) })}
- * </ClassNames>
- *
- * // Template literal CSS
- * <ClassNames>
- *   {({ css, style }) => children({ className: css`font-size: 12px;` })}
- * </ClassNames>
- *
- * // Array CSS
- * <ClassNames>
- *   {({ css, style }) =>
- *    children({ className: css([{ fontSize: 12 }, `font-size: 12px`]) })}
- * </ClassNames>
- * ```
- *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-class-names
- *
- * @param props
- */
-function ClassNames(_) {
+function ClassNames(_props) {
     throw error_1.createSetupError();
 }
 exports.ClassNames = ClassNames;

package/dist/cjs/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/dist/cjs/class-names/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/class-names/index.tsx"],"names":[],"mappings":";;;AACA,wCAAkD;AAYlD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAgB,UAAU,CAAC,CAAkB;IAC3C,MAAM,wBAAgB,EAAE,CAAC;AAC3B,CAAC;AAFD,gCAEC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/class-names/index.tsx"],"names":[],"mappings":";;;AAGA,wCAAkD;AA+ClD,SAAgB,UAAU,CAAC,MAAuB;IAChD,MAAM,wBAAgB,EAAE,CAAC;AAC3B,CAAC;AAFD,gCAEC"}

package/dist/cjs/css/index.d.ts

@@ -1,28 +1,31 @@
-import type { CSSProps } from '../types';
+import type { AnyKeyCssProps, BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
 /**
- * Create styles that can be re-used between components with a template literal.
+ * ## CSS
  *
- * ```
- * css`color: red;`;
- * ```
- *
- * 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;

package/dist/cjs/css/index.js

@@ -1,10 +1,11 @@
 "use strict";
+/* eslint-disable import/export */
 Object.defineProperty(exports, "__esModule", { value: true });
 var error_1 = require("../utils/error");
-function css(_css) {
-    var _values = [];
+function css(_styles) {
+    var _interpolations = [];
     for (var _i = 1; _i < arguments.length; _i++) {
-        _values[_i - 1] = arguments[_i];
+        _interpolations[_i - 1] = arguments[_i];
     }
     throw error_1.createSetupError();
 }

package/dist/cjs/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/dist/cjs/css/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.tsx"],"names":[],"mappings":";;AAAA,wCAAkD;AAgClD,SAAwB,GAAG,CACzB,IAAqC;IACrC,iBAA+B;SAA/B,UAA+B,EAA/B,qBAA+B,EAA/B,IAA+B;QAA/B,gCAA+B;;IAE/B,MAAM,wBAAgB,EAAE,CAAC;AAC3B,CAAC;AALD,sBAKC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.tsx"],"names":[],"mappings":";AAAA,kCAAkC;;AAQlC,wCAAkD;AAqClD,SAAwB,GAAG,CACzB,OAAwC;IACxC,yBAA8E;SAA9E,UAA8E,EAA9E,qBAA8E,EAA9E,IAA8E;QAA9E,wCAA8E;;IAE9E,MAAM,wBAAgB,EAAE,CAAC;AAC3B,CAAC;AALD,sBAKC"}

package/dist/cjs/index.d.ts

@@ -1,32 +1,22 @@
+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';
+export declare const jsx: typeof createElement;
 export type { CssFunction, CSSProps };
 export type { CssObject } from './styled';
-declare module 'react' {
-    interface DOMAttributes<T> {
-        css?: CssFunction | CssFunction[];
-    }
-}
-declare global {
+export declare namespace jsx {
     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[];
-        }
+        type Element = CompiledJSX.Element;
+        type ElementClass = CompiledJSX.ElementClass;
+        type ElementAttributesProperty = CompiledJSX.ElementAttributesProperty;
+        type ElementChildrenAttribute = CompiledJSX.ElementChildrenAttribute;
+        type LibraryManagedAttributes<C, P> = CompiledJSX.LibraryManagedAttributes<C, P>;
+        type IntrinsicAttributes = CompiledJSX.IntrinsicAttributes;
+        type IntrinsicClassAttributes<T> = CompiledJSX.IntrinsicClassAttributes<T>;
+        type IntrinsicElements = CompiledJSX.IntrinsicElements;
     }
 }

package/dist/cjs/index.js

@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.css = exports.ClassNames = exports.styled = exports.keyframes = void 0;
+exports.jsx = exports.css = exports.ClassNames = exports.styled = exports.keyframes = void 0;
+var react_1 = require("react");
 var keyframes_1 = require("./keyframes");
 Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return keyframes_1.keyframes; } });
 var styled_1 = require("./styled");
@@ -12,4 +13,7 @@ var class_names_1 = require("./class-names");
 Object.defineProperty(exports, "ClassNames", { enumerable: true, get: function () { return class_names_1.ClassNames; } });
 var css_1 = require("./css");
 Object.defineProperty(exports, "css", { enumerable: true, get: function () { return __importDefault(css_1).default; } });
+// Pass through the (classic) jsx runtime.
+// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
+exports.jsx = react_1.createElement;
 //# sourceMappingURL=index.js.map

package/dist/cjs/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/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;AAEA,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,6BAAuC;AAA9B,2GAAA,OAAO,OAAO"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAAsC;AAKtC,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAClB,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,6BAAuC;AAA9B,2GAAA,OAAO,OAAO;AAEvB,0CAA0C;AAC1C,kGAAkG;AACrF,QAAA,GAAG,GAAG,qBAAa,CAAC"}

package/dist/cjs/jsx/jsx-dev-runtime.d.ts

@@ -0,0 +1,2 @@
+export type { CompiledJSX as JSX } from './jsx-local-namespace';
+export * from 'react/jsx-dev-runtime';

package/dist/cjs/jsx/jsx-dev-runtime.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Pass through the (automatic) jsx dev runtime.
+// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
+__exportStar(require("react/jsx-dev-runtime"), exports);
+//# sourceMappingURL=jsx-dev-runtime.js.map

package/dist/cjs/jsx/jsx-dev-runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-dev-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-dev-runtime.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEA,gDAAgD;AAChD,kGAAkG;AAClG,wDAAsC"}