@compiled/react 0.10.2 → 0.11.0

package/dist/esm/runtime/style-cache.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { createContext, useContext } from 'react';
 import { isCacheDisabled } from './cache';
-import { isNodeEnvironment } from './is-node';
+import { isServerEnvironment } from './is-server-environment';
 /**
  * Cache to hold already used styles.
  * React Context on the server - singleton object on the client.
  */
-var Cache = isNodeEnvironment() ? createContext(null) : {};
-if (!isNodeEnvironment()) {
+var Cache = isServerEnvironment() ? createContext(null) : {};
+if (!isServerEnvironment()) {
     /**
      * Iterates through all found style elements generated when server side rendering.
      *
@@ -26,7 +26,7 @@ export var useCache = function () {
     if (false) {
         return {};
     }
-    if (isNodeEnvironment()) {
+    if (isServerEnvironment()) {
         // On the server we use React Context to we don't leak the cache between SSR calls.
         // During runtime this hook isn't conditionally called - it is at build time that the flow gets decided.
         // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -42,7 +42,7 @@ export var useCache = function () {
  * On the browser this turns into a fragment with no React Context.
  */
 var StyleCacheProvider = function (props) {
-    if (isNodeEnvironment()) {
+    if (isServerEnvironment()) {
         // This code path isn't conditionally called at build time - safe to ignore.
         // eslint-disable-next-line react-hooks/rules-of-hooks
         var inserted = useCache();

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"style-cache.js","sourceRoot":"","sources":["../../../src/runtime/style-cache.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAG9C;;;GAGG;AACH,IAAM,KAAK,GAAQ,iBAAiB,EAAE,CAAC,CAAC,CAAC,aAAa,CAA8B,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAE/F,IAAI,CAAC,iBAAiB,EAAE,EAAE;IACxB;;;;OAIG;IACH,IAAM,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAmB,mBAAmB,CAAC,CAAC;IACnF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACzC,iGAAiG;QACjG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;KACzC;CACF;AAED;;GAEG;AACH,MAAM,CAAC,IAAM,QAAQ,GAAiB;IACpC,WAAuB;QACrB,OAAO,EAAE,CAAC;KACX;IAED,IAAI,iBAAiB,EAAE,EAAE;QACvB,mFAAmF;QACnF,wGAAwG;QACxG,sDAAsD;QACtD,OAAO,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KAChC;IAED,6CAA6C;IAC7C,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF;;;;;GAKG;AACH,IAAM,kBAAkB,GAAsB,UAAC,KAAK;IAClD,IAAI,iBAAiB,EAAE,EAAE;QACvB,4EAA4E;QAC5E,sDAAsD;QACtD,IAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;QAC5B,OAAO,oBAAC,KAAK,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,IAAG,KAAK,CAAC,QAAQ,CAAkB,CAAC;KAC3E;IAED,OAAO,KAAK,CAAC,QAAuB,CAAC;AACvC,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"style-cache.js","sourceRoot":"","sources":["../../../src/runtime/style-cache.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAG9D;;;GAGG;AACH,IAAM,KAAK,GAAQ,mBAAmB,EAAE,CAAC,CAAC,CAAC,aAAa,CAA8B,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAEjG,IAAI,CAAC,mBAAmB,EAAE,EAAE;IAC1B;;;;OAIG;IACH,IAAM,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAmB,mBAAmB,CAAC,CAAC;IACnF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACzC,iGAAiG;QACjG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;KACzC;CACF;AAED;;GAEG;AACH,MAAM,CAAC,IAAM,QAAQ,GAAiB;IACpC,WAAuB;QACrB,OAAO,EAAE,CAAC;KACX;IAED,IAAI,mBAAmB,EAAE,EAAE;QACzB,mFAAmF;QACnF,wGAAwG;QACxG,sDAAsD;QACtD,OAAO,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KAChC;IAED,6CAA6C;IAC7C,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF;;;;;GAKG;AACH,IAAM,kBAAkB,GAAsB,UAAC,KAAK;IAClD,IAAI,mBAAmB,EAAE,EAAE;QACzB,4EAA4E;QAC5E,sDAAsD;QACtD,IAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;QAC5B,OAAO,oBAAC,KAAK,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,IAAG,KAAK,CAAC,QAAQ,CAAkB,CAAC;KAC3E;IAED,OAAO,KAAK,CAAC,QAAuB,CAAC;AACvC,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/esm/runtime/style.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { analyzeCssInDev } from './dev-warnings';
-import { isNodeEnvironment } from './is-node';
+import { isServerEnvironment } from './is-server-environment';
 import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet';
 import { useCache } from './style-cache';
 export default function Style(props) {
@@ -9,7 +9,7 @@ export default function Style(props) {
         props.children.forEach(analyzeCssInDev);
     }
     if (props.children.length) {
-        if (isNodeEnvironment()) {
+        if (isServerEnvironment()) {
             var bucketedSheets_1 = {};
             var hasSheets = false;
             for (var i = 0; i < props.children.length; i++) {

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

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for style
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.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;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"}
+{"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,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,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,mBAAmB,EAAE,EAAE;YACzB,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.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 export interface StyleSheetOpts {
@@ -16,7 +16,7 @@ export interface StyleSheetOpts {
  * Buckets under which we will group our stylesheets
  */
 export type Bucket = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
-export type UseCacheHook = () => { [key: string]: true, ... };
+export type UseCacheHook = () => { [key: string]: true };
 export type ProviderComponent = (props: {
   children: React$Node[] | React$Node,
   ...

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/runtime/types.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/runtime/types.ts"],"names":[],"mappings":""}

package/dist/esm/runtime.js.flow

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

package/dist/esm/runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.js","sourceRoot":"","sources":["../../src/runtime.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"runtime.js","sourceRoot":"","sources":["../../src/runtime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -1,35 +1,22 @@
 import type { ComponentType } from 'react';
-import type { BasicTemplateInterpolations, CssFunction, FunctionInterpolation } from '../types';
-/**
- * Typing for the CSS object.
- */
-export declare type CssObject<TProps> = CssFunction<FunctionInterpolation<TProps>>;
+import type { CssType, CssFunction } from '../types';
 /**
  * Extra props added to the output Styled Component.
  */
 export interface StyledProps {
     as?: keyof JSX.IntrinsicElements;
 }
-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
- * props from `StyledProps`.
- */
-export interface StyledFunctionFromTag<TTag extends keyof JSX.IntrinsicElements> {
-    <TProps extends unknown>(css: CssObject<TProps> | CssObject<TProps>[], ...interpolations: Interpolations<TProps>): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
-}
-export interface StyledFunctionFromComponent<TInheritedProps extends unknown> {
-    <TProps extends unknown>(css: CssObject<TProps> | TemplateStringsArray, ...interpolations: Interpolations<TProps>): React.ComponentType<TProps & StyledProps & TInheritedProps>;
+export declare type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
+export declare type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
+export interface StyledComponent<ComponentProps extends unknown> {
+    <TProps = {}>(...css: ObjectInterpolation<TProps>[]): React.ComponentType<TProps & ComponentProps & StyledProps>;
+    <TProps = {}>(template: TemplateStringsArray, ...interpolations: TemplateStringsInterpolation<TProps>[]): React.ComponentType<TProps & ComponentProps & StyledProps>;
 }
 export declare type StyledComponentMap = {
-    [Tag in keyof JSX.IntrinsicElements]: StyledFunctionFromTag<Tag>;
+    [Tag in keyof JSX.IntrinsicElements]: StyledComponent<JSX.IntrinsicElements[Tag]>;
 };
-export interface StyledComponentInstantiator extends StyledComponentMap {
-    /**
-     * Typing to enable consumers to compose components, e.g: `styled(Component)`
-     */
-    <TInheritedProps extends unknown>(Component: ComponentType<TInheritedProps>): StyledFunctionFromComponent<TInheritedProps>;
+export interface CreateStyledComponent extends StyledComponentMap {
+    <TInheritedProps extends unknown>(Component: ComponentType<TInheritedProps>): StyledComponent<TInheritedProps>;
 }
 /**
  * ## Styled component
@@ -72,4 +59,4 @@ export interface StyledComponentInstantiator extends StyledComponentMap {
  * );
  * ```
  */
-export declare const styled: StyledComponentInstantiator;
+export declare const styled: CreateStyledComponent;

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

@@ -1,69 +1,68 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 import type { ComponentType } from 'react';
-import type { BasicTemplateInterpolations, CssFunction, FunctionInterpolation } from '../types';
-/**
- * Typing for the CSS object.
- */
-export type CssObject<TProps> = CssFunction<FunctionInterpolation<TProps>>;
+import type { CssType, CssFunction } from '../types';
 /**
  * Extra props added to the output Styled Component.
  */
 export type StyledProps = {
   as?: $Keys<$JSXIntrinsics>,
 };
-export type Interpolations<TProps: mixed> = (
-  | 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 `$JSXIntrinsics`, while also injecting our own
- * props from `StyledProps`.
- */
-export interface StyledFunctionFromTag<TTag: $Keys<$JSXIntrinsics>> {
-  <TProps: mixed>(
-    css: CssObject<TProps> | $ReadOnlyArray<CssObject<TProps>>,
-    ...interpolations: Interpolations<TProps>
-  ): React$ComponentType<{
-    ...TProps,
-    ...$Exact<$ElementType<$JSXIntrinsics, TTag>>,
-    ...StyledProps,
-  }>;
-}
-export interface StyledFunctionFromComponent<TInheritedProps: mixed> {
-  <TProps: mixed>(
-    css: CssObject<TProps> | $ReadOnlyArray<string>,
-    ...interpolations: Interpolations<TProps>
-  ): React$ComponentType<{ ...TProps, ...StyledProps, ...TInheritedProps }>;
+export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
+export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
+export interface StyledComponent<ComponentProps: mixed> {
+  <TProps>(
+    ...css: ObjectInterpolation<TProps>[]
+  ): React$ComponentType<{ ...TProps, ...ComponentProps, ...StyledProps }>;
+  <TProps>(
+    template: $ReadOnlyArray<string>,
+    ...interpolations: TemplateStringsInterpolation<TProps>[]
+  ): React$ComponentType<{ ...TProps, ...ComponentProps, ...StyledProps }>;
 }
-export type StyledComponentMap = $ObjMapi<$JSXIntrinsics, <Tag>(Tag) => StyledFunctionFromTag<Tag>>;
-export type StyledComponentInstantiator = {
-  /**
-   * Typing to enable consumers to compose components, e.g: `styled(Component)`
-   */
+export type StyledComponentMap = $ObjMapi<$JSXIntrinsics, <Tag>(Tag) => StyledComponent<mixed>>;
+export type CreateStyledComponent = {
   <TInheritedProps: mixed>(
     Component: ComponentType<TInheritedProps>
-  ): StyledFunctionFromComponent<TInheritedProps>,
+  ): StyledComponent<TInheritedProps>,
   ...
 } & StyledComponentMap;
 /**
- * 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,
+ * });
  * ```
- * 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
+ *
+ * ### Style with template literals
+ * @example ```
+ * styled.div`
+ *   font-size: 12px
+ * `;
  * ```
  *
- * For more help, read the docs:
- * https://compiledcssinjs.com/docs/api-styled
+ * ### Compose styles with arrays
+ * @example ```
+ * import type { css } from '@compiled/react';
+ *
+ * styled.div([
+ *   { fontSize: 12 },
+ *   css`font-size: 12px;`
+ * ]);
+ *
+ * styled.div(
+ *   { fontSize: 12 },
+ *   css`font-size: 12px`
+ * );
+ * ```
  */
-declare export var styled: StyledComponentInstantiator;
+declare export var styled: CreateStyledComponent;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAsClD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,IAAM,MAAM,GAA0B,IAAI,KAAK,CACpD,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

@@ -4,13 +4,17 @@ import type * as CSS from 'csstype';
  */
 export declare type BasicTemplateInterpolations = string | number;
 export interface FunctionInterpolation<TProps> {
-    (props: TProps): CSSProps | BasicTemplateInterpolations | boolean | undefined;
+    (props: TProps): CssFunction<TProps>;
 }
+/**
+ * Possible types for a CSS value
+ */
+export declare type CssType<TProps> = CSSProps<TProps> | CssObject<TProps> | FunctionInterpolation<TProps> | string;
 /**
  * These are all the CSS props that will exist.
  */
-export declare type CSSProps = CSS.Properties<BasicTemplateInterpolations>;
-export declare type AnyKeyCssProps<TValue> = {
-    [key: string]: AnyKeyCssProps<TValue> | CSSProps | BasicTemplateInterpolations | TValue;
+export declare type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
+export declare type CssObject<TProps> = {
+    [key: string]: CssFunction<TProps>;
 };
-export declare type CssFunction<TValue = void> = CSSProps | AnyKeyCssProps<TValue> | TemplateStringsArray | string | boolean | undefined;
+export declare type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | 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.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 import * as CSS from 'csstype';
@@ -10,20 +10,23 @@ import * as CSS from 'csstype';
  */
 export type BasicTemplateInterpolations = string | number;
 export interface FunctionInterpolation<TProps> {
-  (props: TProps): CSSProps | BasicTemplateInterpolations | boolean | void;
+  (props: TProps): CssFunction<TProps>;
 }
+/**
+ * Possible types for a CSS value
+ */
+export type CssType<TProps> = CssObject<TProps> | FunctionInterpolation<TProps> | string;
 /**
  * These are all the CSS props that will exist.
  */
-export type CSSProps = CSS.Properties<BasicTemplateInterpolations>;
-export type AnyKeyCssProps<TValue> = {
-  [key: string]: AnyKeyCssProps<TValue> | CSSProps | BasicTemplateInterpolations | TValue,
+export type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
+export type CssObject<TProps> = {
+  ...CSSProps<TProps>,
+  [key: string]: CssFunction<TProps>,
   ...
 };
-export type CssFunction<TValue = void> =
-  | CSSProps
-  | AnyKeyCssProps<TValue>
-  | $ReadOnlyArray<string>
-  | string
+export type CssFunction<TProps = mixed> =
+  | CssType<TProps>
+  | BasicTemplateInterpolations
   | boolean
   | void;

package/dist/esm/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":""}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/utils/error.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,gBAAgB,GAAG;IAC9B,OAAO,IAAI,KAAK,CAAC,6tEAgBlB,CAAC,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/utils/error.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,gBAAgB,GAAG;IAC9B,OAAO,IAAI,KAAK,CAAC,6tEAgBlB,CAAC,CAAC;AACH,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
@@ -22,41 +22,41 @@
     ".": {
       "import": [
         "./dist/esm/index.js",
-        "./src/index.tsx"
+        "./src/index.ts"
       ],
       "require": [
         "./dist/cjs/index.js",
-        "./src/index.tsx"
+        "./src/index.ts"
       ]
     },
     "./runtime": {
       "import": [
         "./dist/esm/runtime.js",
-        "./src/runtime.tsx"
+        "./src/runtime.ts"
       ],
       "require": [
         "./dist/cjs/runtime.js",
-        "./src/runtime.tsx"
+        "./src/runtime.ts"
       ]
     },
     "./jsx-runtime": {
       "import": [
         "./dist/esm/jsx/jsx-runtime.js",
-        "./src/jsx/jsx-runtime.tsx"
+        "./src/jsx/jsx-runtime.ts"
       ],
       "require": [
         "./dist/cjs/jsx/jsx-runtime.js",
-        "./src/jsx/jsx-runtime.tsx"
+        "./src/jsx/jsx-runtime.ts"
       ]
     },
     "./jsx-dev-runtime": {
       "import": [
         "./dist/esm/jsx/jsx-dev-runtime.js",
-        "./src/jsx/jsx-dev-runtime.tsx"
+        "./src/jsx/jsx-dev-runtime.ts"
       ],
       "require": [
         "./dist/cjs/jsx/jsx-dev-runtime.js",
-        "./src/jsx/jsx-dev-runtime.tsx"
+        "./src/jsx/jsx-dev-runtime.ts"
       ]
     }
   },
@@ -72,12 +72,14 @@
     "jsx-dev-runtime"
   ],
   "dependencies": {
-    "csstype": "^3.0.10"
+    "csstype": "^3.1.0"
   },
   "devDependencies": {
     "@compiled/benchmark": "^1.0.1",
-    "@testing-library/react": "^11.2.7",
-    "@types/react-dom": "^17.0.11",
+    "@testing-library/react": "^12.1.5",
+    "@types/jsdom": "^16.2.14",
+    "@types/react-dom": "^17.0.17",
+    "jsdom": "^19.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

package/src/__tests__/browser.test.tsx

@@ -3,6 +3,10 @@ import { styled } from '@compiled/react';
 import { render } from '@testing-library/react';
 import React from 'react';
 
+jest.mock('../runtime/is-server-environment', () => ({
+  isServerEnvironment: () => false,
+}));
+
 describe('browser', () => {
   beforeEach(() => {
     // Reset style tags in head before each test so that it will remove styles

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

@@ -3,8 +3,8 @@ import { hydrate } from 'react-dom';
 
 import { CC, CS } from '../runtime';
 
-jest.mock('../runtime/is-node', () => ({
-  isNodeEnvironment: () => false,
+jest.mock('../runtime/is-server-environment', () => ({
+  isServerEnvironment: () => false,
 }));
 
 describe('server side hydrate', () => {

package/src/class-names/__tests__/types.test.js.flow

@@ -1,6 +1,6 @@
 // @flow strict-local
 import React, { type Node } from 'react';
-import { ClassNames, type CssFunction } from '@compiled/react';
+import { ClassNames, type CssType } from '@compiled/react';
 
 // Object call expression
 ({ children }: { children: Node }): React$Element<typeof ClassNames> => (
@@ -23,6 +23,13 @@ import { ClassNames, type CssFunction } from '@compiled/react';
 
 // Array
 ({ children }: { children: Node }): React$Element<typeof ClassNames> => {
-  const classes: CssFunction<>[] = [{ fontSize: 12 }, `font-size: 12px`];
-  return <ClassNames>{({ css }) => <span className={css(classes)}>{children}</span>}</ClassNames>;
+  return (
+    <ClassNames>
+      {({ css }) => (
+        <span className={css(([{ fontSize: 12 }, `font-size: 12px`]: CssType<void>[]))}>
+          {children}
+        </span>
+      )}
+    </ClassNames>
+  );
 };

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

@@ -1,45 +1,54 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.15.0
+ * Flowgen v1.17.0
  * @flow
  */
 import type { Node } from 'react';
-import type { BasicTemplateInterpolations, CssFunction } from '../types';
-export type Interpolations = (BasicTemplateInterpolations | CssFunction<> | CssFunction<>[])[];
-export interface ClassNamesProps {
+import type { CssType, CssFunction } from '../types';
+export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
+export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
+declare interface CssSignature<TProps> {
+  (...interpolations: ObjectInterpolation<TProps>[]): string;
+  (
+    template: $ReadOnlyArray<string>,
+    ...interpolations: TemplateStringsInterpolation<TProps>[]
+  ): string;
+}
+export interface ClassNamesProps<TProps> {
   children: (opts: {
-    css: (css: CssFunction<> | CssFunction<>[], ...interpolations: Interpolations) => string,
-    style: {
-      [key: string]: string,
-      ...
-    },
+    css: CssSignature<TProps>,
+    style: $Shape<CSSStyleDeclaration>,
     ...
   }) => Node;
 }
 /**
- * Use a component where styles are not necessarily tied to an element.
+ * ## Class names
  *
- * ```
- * // Object CSS
+ * 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 ```
  * <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
  */
-declare export function ClassNames(_: ClassNamesProps): React$Node;
+declare export function ClassNames<TProps>(x: ClassNamesProps<TProps>): React$Node;
+declare export {};

package/src/class-names/{index.tsx → index.ts}

@@ -1,15 +1,21 @@
 import type { ReactNode, CSSProperties } from 'react';
 
-import type { BasicTemplateInterpolations, CssFunction } from '../types';
+import type { CssType, CssFunction } from '../types';
 import { createSetupError } from '../utils/error';
 
-export type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFunction[])[];
+export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
+export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
 
-export interface ClassNamesProps {
-  children: (opts: {
-    css: (css: CssFunction | CssFunction[], ...interpolations: Interpolations) => string;
-    style: CSSProperties;
-  }) => ReactNode;
+interface CssSignature<TProps> {
+  (...interpolations: ObjectInterpolation<TProps>[]): string;
+  (
+    template: TemplateStringsArray,
+    ...interpolations: TemplateStringsInterpolation<TProps>[]
+  ): string;
+}
+
+export interface ClassNamesProps<TProps> {
+  children: (opts: { css: CssSignature<TProps>; style: CSSProperties }) => ReactNode;
 }
 
 /**
@@ -46,8 +52,8 @@ export interface ClassNamesProps {
  * </ClassNames>
  * ```
  */
-export function ClassNames({ children }: ClassNamesProps): JSX.Element;
+export function ClassNames<TProps = void>({ children }: ClassNamesProps<TProps>): JSX.Element;
 
-export function ClassNames(_props: ClassNamesProps): JSX.Element {
+export function ClassNames<TProps = void>(_props: ClassNamesProps<TProps>): JSX.Element {
   throw createSetupError();
 }