@compiled/react 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @compiled/react
 
+## 0.9.0
+
+### Minor Changes
+
+- 2092839: Allow inline strings and inline css mixins in conditional expressions. Fix ordering of styles in template literals.
+
 ## 0.8.0
 
 ### Minor Changes

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

@@ -1,4 +1,4 @@
-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.
  *
@@ -12,7 +12,7 @@ import type { CSSProps } from '../types';
  * @param css
  * @param values
  */
-export default function css(_css: TemplateStringsArray, ..._values: (string | number)[]): CSSProps;
+export default function css<T = void>(_css: TemplateStringsArray, ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]): CSSProps;
 /**
  * Create styles that can be re-used between components with an object
  *

package/dist/browser/css/index.js.flow

@@ -4,7 +4,7 @@
  * Flowgen v1.14.1
  * @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/browser/css/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAgClD,MAAM,CAAC,OAAO,UAAU,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,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAmClD,MAAM,CAAC,OAAO,UAAU,GAAG,CACzB,IAAqC;IACrC,iBAAsE;SAAtE,UAAsE,EAAtE,qBAAsE,EAAtE,IAAsE;QAAtE,gCAAsE;;IAEtE,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

package/dist/browser/runtime/dev-warnings.d.ts

@@ -1,2 +1 @@
-export declare const warn: (str: string, ...args: any[]) => void;
 export declare const analyzeCssInDev: (sheet: string) => void;

package/dist/browser/runtime/dev-warnings.js

@@ -5,7 +5,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 };
 var selectorsToWarn = [':first-child', ':nth-child'];
 var hasWarned = {};
-export var warn = function (str) {
+var warn = function (str) {
     var args = [];
     for (var _i = 1; _i < arguments.length; _i++) {
         args[_i - 1] = arguments[_i];

package/dist/browser/runtime/dev-warnings.js.flow

@@ -4,5 +4,4 @@
  * Flowgen v1.14.1
  * @flow
  */
-declare export var warn: (str: string, ...args: any[]) => void;
 declare export var analyzeCssInDev: (sheet: string) => void;

package/dist/browser/runtime/dev-warnings.js.map

@@ -1 +1 @@
-{"version":3,"file":"dev-warnings.js","sourceRoot":"","sources":["../../../src/runtime/dev-warnings.tsx"],"names":[],"mappings":";;;;;AAAA,IAAM,eAAe,GAAG,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;AACvD,IAAM,SAAS,GAAyB,EAAE,CAAC;AAE3C,MAAM,CAAC,IAAM,IAAI,GAAG,UAAC,GAAW;IAAE,cAAc;SAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;QAAd,6BAAc;;IAC9C,OAAA,OAAO,CAAC,KAAK,OAAb,OAAO,iBACL,q6DAUA,GAAG,OACN,GACM,IAAI;AAbT,CAcC,CAAC;AAEJ,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,KAAa;IAC3C,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE;QACpB,OAAO;KACR;IAED,IAAM,wBAAwB,GAC5B,eAAe,CAAC,GAAG,CAAC,UAAC,QAAQ,IAAK,OAAA,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAxB,CAAwB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAEzF,IAAI,wBAAwB,EAAE;QAC5B,IAAI,CACF,iBAAc,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,gPAEiC,CAC1E,CAAC;KACH;IAED,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;AAC1B,CAAC,CAAC"}
+{"version":3,"file":"dev-warnings.js","sourceRoot":"","sources":["../../../src/runtime/dev-warnings.tsx"],"names":[],"mappings":";;;;;AAAA,IAAM,eAAe,GAAG,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;AACvD,IAAM,SAAS,GAAyB,EAAE,CAAC;AAE3C,IAAM,IAAI,GAAG,UAAC,GAAW;IAAE,cAAc;SAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;QAAd,6BAAc;;IACvC,OAAA,OAAO,CAAC,KAAK,OAAb,OAAO,iBACL,q6DAUA,GAAG,OACN,GACM,IAAI;AAbT,CAcC,CAAC;AAEJ,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,KAAa;IAC3C,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE;QACpB,OAAO;KACR;IAED,IAAM,wBAAwB,GAC5B,eAAe,CAAC,GAAG,CAAC,UAAC,QAAQ,IAAK,OAAA,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAxB,CAAwB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAEzF,IAAI,wBAAwB,EAAE;QAC5B,IAAI,CACF,iBAAc,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,gPAEiC,CAC1E,CAAC;KACH;IAED,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;AAC1B,CAAC,CAAC"}

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

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

@@ -5,14 +5,11 @@
  * @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>[]
 )[];

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":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAyDlD;;;;;;;;;;;;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"}

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

@@ -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/cjs/css/index.d.ts

@@ -1,4 +1,4 @@
-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.
  *
@@ -12,7 +12,7 @@ import type { CSSProps } from '../types';
  * @param css
  * @param values
  */
-export default function css(_css: TemplateStringsArray, ..._values: (string | number)[]): CSSProps;
+export default function css<T = void>(_css: TemplateStringsArray, ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]): CSSProps;
 /**
  * Create styles that can be re-used between components with an object
  *

package/dist/cjs/css/index.js.flow

@@ -4,7 +4,7 @@
  * Flowgen v1.14.1
  * @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,wCAAkD;AAmClD,SAAwB,GAAG,CACzB,IAAqC;IACrC,iBAAsE;SAAtE,UAAsE,EAAtE,qBAAsE,EAAtE,IAAsE;QAAtE,gCAAsE;;IAEtE,MAAM,wBAAgB,EAAE,CAAC;AAC3B,CAAC;AALD,sBAKC"}

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

@@ -1,2 +1 @@
-export declare const warn: (str: string, ...args: any[]) => void;
 export declare const analyzeCssInDev: (sheet: string) => void;

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

@@ -5,7 +5,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
     return to;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.analyzeCssInDev = exports.warn = void 0;
+exports.analyzeCssInDev = void 0;
 var selectorsToWarn = [':first-child', ':nth-child'];
 var hasWarned = {};
 var warn = function (str) {
@@ -15,14 +15,13 @@ var warn = function (str) {
     }
     return console.error.apply(console, __spreadArray(["\n \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2557   \u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2557\u2588\u2588\u2557     \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2557\n\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\n\u2588\u2588\u2551     \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2588\u2588\u2588\u2588\u2554\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2551  \u2588\u2588\u2551\n\u2588\u2588\u2551     \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551\u255A\u2588\u2588\u2554\u255D\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u255D \u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2554\u2550\u2550\u255D  \u2588\u2588\u2551  \u2588\u2588\u2551\n\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551 \u255A\u2550\u255D \u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\n \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u255D     \u255A\u2550\u255D\u255A\u2550\u255D     \u255A\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u255D\n\n  @compiled/react/runtime - DEV WARNING\n\n  " + str + "\n"], args));
 };
-exports.warn = warn;
 var analyzeCssInDev = function (sheet) {
     if (hasWarned[sheet]) {
         return;
     }
     var shouldWarnAboutSelectors = selectorsToWarn.map(function (selector) { return sheet.includes(selector); }).filter(Boolean).length > 0;
     if (shouldWarnAboutSelectors) {
-        exports.warn("Selectors \"" + selectorsToWarn.join(', ') + "\" are dangerous to use when server side rendering.\n  Alternatively try and use \":nth-of-type\", or placing data attributes and targetting those instead.\n  Read https://compiledcssinjs.com/docs/server-side-rendering for more advice.");
+        warn("Selectors \"" + selectorsToWarn.join(', ') + "\" are dangerous to use when server side rendering.\n  Alternatively try and use \":nth-of-type\", or placing data attributes and targetting those instead.\n  Read https://compiledcssinjs.com/docs/server-side-rendering for more advice.");
     }
     hasWarned[sheet] = true;
 };

package/dist/cjs/runtime/dev-warnings.js.flow

@@ -4,5 +4,4 @@
  * Flowgen v1.14.1
  * @flow
  */
-declare export var warn: (str: string, ...args: any[]) => void;
 declare export var analyzeCssInDev: (sheet: string) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"dev-warnings.js","sourceRoot":"","sources":["../../../src/runtime/dev-warnings.tsx"],"names":[],"mappings":";;;;;;;;AAAA,IAAM,eAAe,GAAG,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;AACvD,IAAM,SAAS,GAAyB,EAAE,CAAC;AAEpC,IAAM,IAAI,GAAG,UAAC,GAAW;IAAE,cAAc;SAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;QAAd,6BAAc;;IAC9C,OAAA,OAAO,CAAC,KAAK,OAAb,OAAO,iBACL,q6DAUA,GAAG,OACN,GACM,IAAI;AAbT,CAcC,CAAC;AAfS,QAAA,IAAI,QAeb;AAEG,IAAM,eAAe,GAAG,UAAC,KAAa;IAC3C,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE;QACpB,OAAO;KACR;IAED,IAAM,wBAAwB,GAC5B,eAAe,CAAC,GAAG,CAAC,UAAC,QAAQ,IAAK,OAAA,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAxB,CAAwB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAEzF,IAAI,wBAAwB,EAAE;QAC5B,YAAI,CACF,iBAAc,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,gPAEiC,CAC1E,CAAC;KACH;IAED,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;AAC1B,CAAC,CAAC;AAjBW,QAAA,eAAe,mBAiB1B"}
+{"version":3,"file":"dev-warnings.js","sourceRoot":"","sources":["../../../src/runtime/dev-warnings.tsx"],"names":[],"mappings":";;;;;;;;AAAA,IAAM,eAAe,GAAG,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;AACvD,IAAM,SAAS,GAAyB,EAAE,CAAC;AAE3C,IAAM,IAAI,GAAG,UAAC,GAAW;IAAE,cAAc;SAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;QAAd,6BAAc;;IACvC,OAAA,OAAO,CAAC,KAAK,OAAb,OAAO,iBACL,q6DAUA,GAAG,OACN,GACM,IAAI;AAbT,CAcC,CAAC;AAEG,IAAM,eAAe,GAAG,UAAC,KAAa;IAC3C,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE;QACpB,OAAO;KACR;IAED,IAAM,wBAAwB,GAC5B,eAAe,CAAC,GAAG,CAAC,UAAC,QAAQ,IAAK,OAAA,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAxB,CAAwB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAEzF,IAAI,wBAAwB,EAAE;QAC5B,IAAI,CACF,iBAAc,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,gPAEiC,CAC1E,CAAC;KACH;IAED,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;AAC1B,CAAC,CAAC;AAjBW,QAAA,eAAe,mBAiB1B"}

package/dist/cjs/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

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

@@ -5,14 +5,11 @@
  * @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>[]
 )[];

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.tsx"],"names":[],"mappings":";;;AACA,wCAAkD;AA6DlD;;;;;;;;;;;;GAYG;AACU,QAAA,MAAM,GAAgC,IAAI,KAAK,CAC1D,EAAE,EACF;IACE,GAAG;QACD,OAAO;YACL,8CAA8C;YAC9C,yDAAyD;YACzD,MAAM,wBAAgB,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CACF,CACK,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.tsx"],"names":[],"mappings":";;;AACA,wCAAkD;AAyDlD;;;;;;;;;;;;GAYG;AACU,QAAA,MAAM,GAAgC,IAAI,KAAK,CAC1D,EAAE,EACF;IACE,GAAG;QACD,OAAO;YACL,8CAA8C;YAC9C,yDAAyD;YACzD,MAAM,wBAAgB,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CACF,CACK,CAAC"}

package/dist/cjs/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/cjs/types.js.flow

@@ -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/css/index.d.ts

@@ -1,4 +1,4 @@
-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.
  *
@@ -12,7 +12,7 @@ import type { CSSProps } from '../types';
  * @param css
  * @param values
  */
-export default function css(_css: TemplateStringsArray, ..._values: (string | number)[]): CSSProps;
+export default function css<T = void>(_css: TemplateStringsArray, ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]): CSSProps;
 /**
  * Create styles that can be re-used between components with an object
  *

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

@@ -4,7 +4,7 @@
  * Flowgen v1.14.1
  * @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/esm/css/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAgClD,MAAM,CAAC,OAAO,UAAU,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,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAmClD,MAAM,CAAC,OAAO,UAAU,GAAG,CACzB,IAAqC;IACrC,iBAAsE;SAAtE,UAAsE,EAAtE,qBAAsE,EAAtE,IAAsE;QAAtE,gCAAsE;;IAEtE,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

package/dist/esm/runtime/dev-warnings.d.ts

@@ -1,2 +1 @@
-export declare const warn: (str: string, ...args: any[]) => void;
 export declare const analyzeCssInDev: (sheet: string) => void;

package/dist/esm/runtime/dev-warnings.js

@@ -5,7 +5,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 };
 var selectorsToWarn = [':first-child', ':nth-child'];
 var hasWarned = {};
-export var warn = function (str) {
+var warn = function (str) {
     var args = [];
     for (var _i = 1; _i < arguments.length; _i++) {
         args[_i - 1] = arguments[_i];

package/dist/esm/runtime/dev-warnings.js.flow

@@ -4,5 +4,4 @@
  * Flowgen v1.14.1
  * @flow
  */
-declare export var warn: (str: string, ...args: any[]) => void;
 declare export var analyzeCssInDev: (sheet: string) => void;

package/dist/esm/runtime/dev-warnings.js.map

@@ -1 +1 @@
-{"version":3,"file":"dev-warnings.js","sourceRoot":"","sources":["../../../src/runtime/dev-warnings.tsx"],"names":[],"mappings":";;;;;AAAA,IAAM,eAAe,GAAG,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;AACvD,IAAM,SAAS,GAAyB,EAAE,CAAC;AAE3C,MAAM,CAAC,IAAM,IAAI,GAAG,UAAC,GAAW;IAAE,cAAc;SAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;QAAd,6BAAc;;IAC9C,OAAA,OAAO,CAAC,KAAK,OAAb,OAAO,iBACL,q6DAUA,GAAG,OACN,GACM,IAAI;AAbT,CAcC,CAAC;AAEJ,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,KAAa;IAC3C,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE;QACpB,OAAO;KACR;IAED,IAAM,wBAAwB,GAC5B,eAAe,CAAC,GAAG,CAAC,UAAC,QAAQ,IAAK,OAAA,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAxB,CAAwB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAEzF,IAAI,wBAAwB,EAAE;QAC5B,IAAI,CACF,iBAAc,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,gPAEiC,CAC1E,CAAC;KACH;IAED,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;AAC1B,CAAC,CAAC"}
+{"version":3,"file":"dev-warnings.js","sourceRoot":"","sources":["../../../src/runtime/dev-warnings.tsx"],"names":[],"mappings":";;;;;AAAA,IAAM,eAAe,GAAG,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;AACvD,IAAM,SAAS,GAAyB,EAAE,CAAC;AAE3C,IAAM,IAAI,GAAG,UAAC,GAAW;IAAE,cAAc;SAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;QAAd,6BAAc;;IACvC,OAAA,OAAO,CAAC,KAAK,OAAb,OAAO,iBACL,q6DAUA,GAAG,OACN,GACM,IAAI;AAbT,CAcC,CAAC;AAEJ,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,KAAa;IAC3C,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE;QACpB,OAAO;KACR;IAED,IAAM,wBAAwB,GAC5B,eAAe,CAAC,GAAG,CAAC,UAAC,QAAQ,IAAK,OAAA,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAxB,CAAwB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAEzF,IAAI,wBAAwB,EAAE;QAC5B,IAAI,CACF,iBAAc,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,gPAEiC,CAC1E,CAAC;KACH;IAED,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;AAC1B,CAAC,CAAC"}

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

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

@@ -5,14 +5,11 @@
  * @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>[]
 )[];

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":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAyDlD;;;;;;;;;;;;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"}

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

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",

package/src/css/index.js.flow

@@ -4,7 +4,7 @@
  * Flowgen v1.14.1
  * @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/src/css/index.tsx

@@ -1,5 +1,5 @@
 import { createSetupError } from '../utils/error';
-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.
@@ -14,7 +14,10 @@ import type { CSSProps } from '../types';
  * @param css
  * @param values
  */
-export default function css(_css: TemplateStringsArray, ..._values: (string | number)[]): CSSProps;
+export default function css<T = void>(
+  _css: TemplateStringsArray,
+  ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
+): CSSProps;
 
 /**
  * Create styles that can be re-used between components with an object
@@ -30,9 +33,9 @@ export default function css(_css: TemplateStringsArray, ..._values: (string | nu
  */
 export default function css(_css: CSSProps): CSSProps;
 
-export default function css(
+export default function css<T = void>(
   _css: TemplateStringsArray | CSSProps,
-  ..._values: (string | number)[]
+  ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
 ): CSSProps {
   throw createSetupError();
 }

package/src/runtime/__tests__/style.test.tsx

@@ -1,103 +1,137 @@
 import React from 'react';
+import type { ComponentType } from 'react';
 import { render } from '@testing-library/react';
-import Style from '../style';
 
 jest.mock('../is-node', () => ({
   isNodeEnvironment: () => false,
 }));
 
 describe('<Style />', () => {
+  let consoleErrorSpy: jest.SpyInstance;
+
   beforeEach(() => {
-    // Reset style tags in head before each test so that it will remove styles
-    // injected by test
-    document.head.querySelectorAll('style').forEach((styleElement) => {
-      styleElement.textContent = '';
-    });
+    consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+    document.head.innerHTML = '';
   });
 
+  // We want to isolate the test to correctly mimic the environment being loaded in once
+  const createIsolatedTest = (callback: (Style: ComponentType) => void) => {
+    jest.isolateModules(() => {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const Style = require('../style');
+
+      callback(Style.default);
+    });
+  };
+
   it('should render nothing on the client', () => {
-    const { baseElement } = render(<Style>{[`.a { display: block; }`]}</Style>);
+    createIsolatedTest((Style) => {
+      const { baseElement } = render(<Style>{[`.a { display: block; }`]}</Style>);
 
-    expect(baseElement.getElementsByTagName('style')).toHaveLength(0);
+      expect(baseElement.getElementsByTagName('style')).toHaveLength(0);
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 
   it('should add style to the head on the client', () => {
-    render(<Style>{[`.b { display: block; }`]}</Style>);
+    createIsolatedTest((Style) => {
+      render(<Style>{[`.b { display: block; }`]}</Style>);
 
-    expect(document.head.innerHTML).toInclude('<style>.b { display: block; }</style>');
+      expect(document.head.innerHTML).toInclude('<style>.b { display: block; }</style>');
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 
   it('should only add one style if it was already added', () => {
-    render(<Style>{[`.c { display: block; }`]}</Style>);
-    render(<Style>{[`.c { display: block; }`]}</Style>);
+    createIsolatedTest((Style) => {
+      render(<Style>{[`.c { display: block; }`]}</Style>);
+      render(<Style>{[`.c { display: block; }`]}</Style>);
 
-    expect(document.head.innerHTML).toIncludeRepeated('<style>.c { display: block; }</style>', 1);
+      expect(document.head.innerHTML).toIncludeRepeated('<style>.c { display: block; }</style>', 1);
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 
   it('should noop in prod', () => {
-    jest.spyOn(console, 'error');
-    process.env.NODE_ENV = 'production';
+    createIsolatedTest((Style) => {
+      process.env.NODE_ENV = 'production';
 
-    render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
+      render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
 
-    expect(console.error).not.toHaveBeenCalled();
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 
   it('should warn in dev when using a dangerous pseduo selector', () => {
-    jest.spyOn(console, 'error');
-    process.env.NODE_ENV = 'development';
+    createIsolatedTest((Style) => {
+      process.env.NODE_ENV = 'development';
 
-    render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
+      render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
 
-    expect(console.error).toHaveBeenCalled();
+      expect(console.error).toHaveBeenCalledTimes(1);
+    });
   });
 
   it('should warn in dev only once', () => {
-    jest.spyOn(console, 'error');
-    process.env.NODE_ENV = 'development';
+    createIsolatedTest((Style) => {
+      process.env.NODE_ENV = 'development';
 
-    render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
-    render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
+      render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
+      render(<Style>{[`.c:first-child { display: block; }`]}</Style>);
 
-    expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error).toHaveBeenCalledWith(
+        expect.stringMatching('Selectors ":first-child, :nth-child" are dangerous to use')
+      );
+    });
   });
 
   it('should render style tags in buckets', () => {
-    render(
-      <Style>
-        {[
-          `._a1234567:hover{ color: red; }`,
-          `._b1234567:active{ color: blue; }`,
-          `._c1234567:link{ color: green; }`,
-          `._d1234567{ display: block; }`,
-          `@media (max-width: 800px){ ._e1234567{ color: yellow; } }`,
-          `._f1234567:focus{ color: pink; }`,
-          `._g1234567:visited{ color: grey; }`,
-          `._h1234567:focus-visible{ color: white; }`,
-          `._i1234567:focus-within{ color: black; }`,
-        ]}
-      </Style>
-    );
-
-    expect(document.head.innerHTML.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
-      "<style>._d1234567{ display: block; }</style>
-      <style>._c1234567:link{ color: green; }</style>
-      <style>._g1234567:visited{ color: grey; }</style>
-      <style>._i1234567:focus-within{ color: black; }</style>
-      <style>._f1234567:focus{ color: pink; }</style>
-      <style>._h1234567:focus-visible{ color: white; }</style>
-      <style>._a1234567:hover{ color: red; }</style>
-      <style>._b1234567:active{ color: blue; }</style>
-      <style>@media (max-width: 800px){ ._e1234567{ color: yellow; } }</style>
-      "
-    `);
+    createIsolatedTest((Style) => {
+      render(
+        <Style>
+          {[
+            `._a1234567:hover{ color: red; }`,
+            `._b1234567:active{ color: blue; }`,
+            `._c1234567:link{ color: green; }`,
+            `._d1234567{ display: block; }`,
+            `@media (max-width: 800px){ ._e1234567{ color: yellow; } }`,
+            `._f1234567:focus{ color: pink; }`,
+            `._g1234567:visited{ color: grey; }`,
+            `._h1234567:focus-visible{ color: white; }`,
+            `._i1234567:focus-within{ color: black; }`,
+          ]}
+        </Style>
+      );
+
+      expect(document.head.innerHTML.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
+        "<style>._d1234567{ display: block; }</style>
+        <style>._c1234567:link{ color: green; }</style>
+        <style>._g1234567:visited{ color: grey; }</style>
+        <style>._i1234567:focus-within{ color: black; }</style>
+        <style>._f1234567:focus{ color: pink; }</style>
+        <style>._h1234567:focus-visible{ color: white; }</style>
+        <style>._a1234567:hover{ color: red; }</style>
+        <style>._b1234567:active{ color: blue; }</style>
+        <style>@media (max-width: 800px){ ._e1234567{ color: yellow; } }</style>
+        "
+      `);
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 
   it('should update styles', () => {
-    const { rerender } = render(<Style>{[`.first-render { display: block; }`]}</Style>);
+    createIsolatedTest((Style) => {
+      const { rerender } = render(<Style>{[`.first-render { display: block; }`]}</Style>);
 
-    rerender(<Style>{[`.second-render { display: block; }`]}</Style>);
+      rerender(<Style>{[`.second-render { display: block; }`]}</Style>);
 
-    expect(document.head.innerHTML).toInclude('.second-render { display: block; }');
+      expect(document.head.innerHTML).toInclude('.second-render { display: block; }');
+      expect(console.error).not.toHaveBeenCalled();
+    });
   });
 });

package/src/runtime/dev-warnings.js.flow

@@ -4,5 +4,4 @@
  * Flowgen v1.14.1
  * @flow
  */
-declare export var warn: (str: string, ...args: any[]) => void;
 declare export var analyzeCssInDev: (sheet: string) => void;

package/src/runtime/dev-warnings.tsx

@@ -1,7 +1,7 @@
 const selectorsToWarn = [':first-child', ':nth-child'];
 const hasWarned: Record<string, true> = {};
 
-export const warn = (str: string, ...args: any[]): void =>
+const warn = (str: string, ...args: any[]): void =>
   console.error(
     `
  ██████╗ ██████╗ ███╗   ███╗██████╗ ██╗██╗     ███████╗██████╗

package/src/styled/index.js.flow

@@ -5,14 +5,11 @@
  * @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>[]
 )[];

package/src/styled/index.tsx

@@ -1,15 +1,11 @@
 import type { ComponentType } from 'react';
 import { createSetupError } from '../utils/error';
-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 type CssObject<TProps> = CssFunction<FunctionIterpolation<TProps>>;
+export type CssObject<TProps> = CssFunction<FunctionInterpolation<TProps>>;
 
 /**
  * Extra props added to the output Styled Component.
@@ -20,7 +16,7 @@ export interface StyledProps {
 
 export type Interpolations<TProps extends unknown> = (
   | BasicTemplateInterpolations
-  | FunctionIterpolation<TProps>
+  | FunctionInterpolation<TProps>
   | CssObject<TProps>
   | CssObject<TProps>[]
 )[];

package/src/types.js.flow

@@ -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/src/types.tsx

@@ -5,13 +5,17 @@ import type * as CSS from 'csstype';
  */
 export type BasicTemplateInterpolations = string | number;
 
+export interface FunctionInterpolation<TProps> {
+  (props: TProps): CSSProps | BasicTemplateInterpolations | boolean | undefined;
+}
+
 /**
  * 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> =