@compiled/react 0.10.4 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (152) hide show
  1. package/dist/browser/class-names/index.d.ts +11 -5
  2. package/dist/browser/class-names/index.js.flow +29 -20
  3. package/dist/browser/class-names/index.js.map +1 -1
  4. package/dist/browser/css/index.d.ts +3 -3
  5. package/dist/browser/css/index.js.flow +24 -23
  6. package/dist/browser/css/index.js.map +1 -1
  7. package/dist/browser/index.d.ts +2 -3
  8. package/dist/browser/index.js.flow +4 -7
  9. package/dist/browser/index.js.map +1 -1
  10. package/dist/browser/jsx/jsx-local-namespace.d.ts +2 -2
  11. package/dist/browser/keyframes/index.d.ts +1 -1
  12. package/dist/browser/keyframes/index.js.flow +25 -31
  13. package/dist/browser/runtime/ax.js.flow +1 -1
  14. package/dist/browser/runtime/cache.js.flow +1 -1
  15. package/dist/browser/runtime/css-custom-property.js.flow +1 -1
  16. package/dist/browser/runtime/dev-warnings.js.flow +1 -1
  17. package/dist/browser/runtime/index.js.flow +1 -1
  18. package/dist/browser/runtime/{is-node.d.ts → is-server-environment.d.ts} +2 -2
  19. package/dist/browser/runtime/is-server-environment.js +31 -0
  20. package/dist/{cjs/runtime/is-node.js.flow → browser/runtime/is-server-environment.js.flow} +4 -4
  21. package/dist/browser/runtime/is-server-environment.js.map +1 -0
  22. package/dist/browser/runtime/sheet.js.flow +1 -1
  23. package/dist/browser/runtime/style-cache.js +1 -1
  24. package/dist/browser/runtime/style-cache.js.flow +1 -1
  25. package/dist/browser/runtime/style-cache.js.map +1 -1
  26. package/dist/browser/runtime/style.js +1 -1
  27. package/dist/browser/runtime/style.js.flow +1 -1
  28. package/dist/browser/runtime/style.js.map +1 -1
  29. package/dist/browser/runtime/types.js.flow +2 -2
  30. package/dist/browser/runtime.js.flow +1 -1
  31. package/dist/browser/styled/index.d.ts +10 -23
  32. package/dist/browser/styled/index.js.flow +45 -46
  33. package/dist/browser/styled/index.js.map +1 -1
  34. package/dist/browser/types.d.ts +9 -5
  35. package/dist/browser/types.js.flow +13 -10
  36. package/dist/browser/utils/error.js.flow +1 -1
  37. package/dist/cjs/class-names/index.d.ts +11 -5
  38. package/dist/cjs/class-names/index.js.flow +29 -20
  39. package/dist/cjs/class-names/index.js.map +1 -1
  40. package/dist/cjs/css/index.d.ts +3 -3
  41. package/dist/cjs/css/index.js.flow +24 -23
  42. package/dist/cjs/css/index.js.map +1 -1
  43. package/dist/cjs/index.d.ts +2 -3
  44. package/dist/cjs/index.js.flow +4 -7
  45. package/dist/cjs/index.js.map +1 -1
  46. package/dist/cjs/jsx/jsx-local-namespace.d.ts +2 -2
  47. package/dist/cjs/keyframes/index.d.ts +1 -1
  48. package/dist/cjs/keyframes/index.js.flow +25 -31
  49. package/dist/cjs/runtime/ax.js.flow +1 -1
  50. package/dist/cjs/runtime/cache.js.flow +1 -1
  51. package/dist/cjs/runtime/css-custom-property.js.flow +1 -1
  52. package/dist/cjs/runtime/dev-warnings.js.flow +1 -1
  53. package/dist/cjs/runtime/index.js.flow +1 -1
  54. package/dist/{esm/runtime/is-node.d.ts → cjs/runtime/is-server-environment.d.ts} +2 -2
  55. package/dist/cjs/runtime/is-server-environment.js +35 -0
  56. package/dist/{esm/runtime/is-node.js.flow → cjs/runtime/is-server-environment.js.flow} +4 -4
  57. package/dist/cjs/runtime/is-server-environment.js.map +1 -0
  58. package/dist/cjs/runtime/sheet.js.flow +1 -1
  59. package/dist/cjs/runtime/style-cache.js +5 -5
  60. package/dist/cjs/runtime/style-cache.js.flow +1 -1
  61. package/dist/cjs/runtime/style-cache.js.map +1 -1
  62. package/dist/cjs/runtime/style.js +2 -2
  63. package/dist/cjs/runtime/style.js.flow +1 -1
  64. package/dist/cjs/runtime/style.js.map +1 -1
  65. package/dist/cjs/runtime/types.js.flow +2 -2
  66. package/dist/cjs/runtime.js.flow +1 -1
  67. package/dist/cjs/styled/index.d.ts +10 -23
  68. package/dist/cjs/styled/index.js.flow +45 -46
  69. package/dist/cjs/styled/index.js.map +1 -1
  70. package/dist/cjs/types.d.ts +9 -5
  71. package/dist/cjs/types.js.flow +13 -10
  72. package/dist/cjs/utils/error.js.flow +1 -1
  73. package/dist/esm/class-names/index.d.ts +11 -5
  74. package/dist/esm/class-names/index.js.flow +29 -20
  75. package/dist/esm/class-names/index.js.map +1 -1
  76. package/dist/esm/css/index.d.ts +3 -3
  77. package/dist/esm/css/index.js.flow +24 -23
  78. package/dist/esm/css/index.js.map +1 -1
  79. package/dist/esm/index.d.ts +2 -3
  80. package/dist/esm/index.js.flow +4 -7
  81. package/dist/esm/index.js.map +1 -1
  82. package/dist/esm/jsx/jsx-local-namespace.d.ts +2 -2
  83. package/dist/esm/keyframes/index.d.ts +1 -1
  84. package/dist/esm/keyframes/index.js.flow +25 -31
  85. package/dist/esm/runtime/ax.js.flow +1 -1
  86. package/dist/esm/runtime/cache.js.flow +1 -1
  87. package/dist/esm/runtime/css-custom-property.js.flow +1 -1
  88. package/dist/esm/runtime/dev-warnings.js.flow +1 -1
  89. package/dist/esm/runtime/index.js.flow +1 -1
  90. package/dist/{cjs/runtime/is-node.d.ts → esm/runtime/is-server-environment.d.ts} +2 -2
  91. package/dist/esm/runtime/is-server-environment.js +31 -0
  92. package/dist/{browser/runtime/is-node.js.flow → esm/runtime/is-server-environment.js.flow} +4 -4
  93. package/dist/esm/runtime/is-server-environment.js.map +1 -0
  94. package/dist/esm/runtime/sheet.js.flow +1 -1
  95. package/dist/esm/runtime/style-cache.js +5 -5
  96. package/dist/esm/runtime/style-cache.js.flow +1 -1
  97. package/dist/esm/runtime/style-cache.js.map +1 -1
  98. package/dist/esm/runtime/style.js +2 -2
  99. package/dist/esm/runtime/style.js.flow +1 -1
  100. package/dist/esm/runtime/style.js.map +1 -1
  101. package/dist/esm/runtime/types.js.flow +2 -2
  102. package/dist/esm/runtime.js.flow +1 -1
  103. package/dist/esm/styled/index.d.ts +10 -23
  104. package/dist/esm/styled/index.js.flow +45 -46
  105. package/dist/esm/styled/index.js.map +1 -1
  106. package/dist/esm/types.d.ts +9 -5
  107. package/dist/esm/types.js.flow +13 -10
  108. package/dist/esm/utils/error.js.flow +1 -1
  109. package/package.json +4 -4
  110. package/src/__tests__/browser.test.tsx +4 -0
  111. package/src/__tests__/server-side-hydrate.test.tsx +2 -2
  112. package/src/class-names/__tests__/types.test.js.flow +10 -3
  113. package/src/class-names/index.js.flow +29 -20
  114. package/src/class-names/index.ts +15 -9
  115. package/src/css/__tests__/types.test.js.flow +25 -0
  116. package/src/css/index.js.flow +24 -23
  117. package/src/css/index.ts +9 -14
  118. package/src/index.js.flow +4 -7
  119. package/src/index.ts +3 -4
  120. package/src/jsx/jsx-local-namespace.ts +2 -2
  121. package/src/keyframes/__tests__/index.test.tsx +4 -0
  122. package/src/keyframes/index.js.flow +25 -31
  123. package/src/keyframes/index.ts +1 -1
  124. package/src/runtime/__tests__/style.test.tsx +4 -0
  125. package/src/runtime/ax.js.flow +1 -1
  126. package/src/runtime/cache.js.flow +1 -1
  127. package/src/runtime/css-custom-property.js.flow +1 -1
  128. package/src/runtime/dev-warnings.js.flow +1 -1
  129. package/src/runtime/index.js.flow +1 -1
  130. package/src/runtime/{is-node.js.flow → is-server-environment.js.flow} +4 -4
  131. package/src/runtime/is-server-environment.ts +29 -0
  132. package/src/runtime/sheet.js.flow +1 -1
  133. package/src/runtime/style-cache.js.flow +1 -1
  134. package/src/runtime/style-cache.tsx +5 -5
  135. package/src/runtime/style.js.flow +1 -1
  136. package/src/runtime/style.tsx +2 -2
  137. package/src/runtime/types.js.flow +2 -2
  138. package/src/runtime.js.flow +1 -1
  139. package/src/styled/__tests__/index.test.tsx +1 -1
  140. package/src/styled/__tests__/types.test.js.flow +65 -11
  141. package/src/styled/index.js.flow +45 -46
  142. package/src/styled/index.ts +21 -39
  143. package/src/types.js.flow +13 -10
  144. package/src/types.ts +19 -11
  145. package/src/utils/error.js.flow +1 -1
  146. package/dist/browser/runtime/is-node.js +0 -16
  147. package/dist/browser/runtime/is-node.js.map +0 -1
  148. package/dist/cjs/runtime/is-node.js +0 -20
  149. package/dist/cjs/runtime/is-node.js.map +0 -1
  150. package/dist/esm/runtime/is-node.js +0 -16
  151. package/dist/esm/runtime/is-node.js.map +0 -1
  152. package/src/runtime/is-node.ts +0 -15
@@ -1,9 +1,14 @@
1
1
  import type { ReactNode, CSSProperties } from 'react';
2
- import type { BasicTemplateInterpolations, CssFunction } from '../types';
3
- export declare type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFunction[])[];
4
- export interface ClassNamesProps {
2
+ import type { CssType, CssFunction } from '../types';
3
+ export declare type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
4
+ export declare type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
5
+ interface CssSignature<TProps> {
6
+ (...interpolations: ObjectInterpolation<TProps>[]): string;
7
+ (template: TemplateStringsArray, ...interpolations: TemplateStringsInterpolation<TProps>[]): string;
8
+ }
9
+ export interface ClassNamesProps<TProps> {
5
10
  children: (opts: {
6
- css: (css: CssFunction | CssFunction[], ...interpolations: Interpolations) => string;
11
+ css: CssSignature<TProps>;
7
12
  style: CSSProperties;
8
13
  }) => ReactNode;
9
14
  }
@@ -41,4 +46,5 @@ export interface ClassNamesProps {
41
46
  * </ClassNames>
42
47
  * ```
43
48
  */
44
- export declare function ClassNames({ children }: ClassNamesProps): JSX.Element;
49
+ export declare function ClassNames<TProps = void>({ children }: ClassNamesProps<TProps>): JSX.Element;
50
+ export {};
@@ -1,45 +1,54 @@
1
1
  /**
2
2
  * Flowtype definitions for index
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.15.0
4
+ * Flowgen v1.17.0
5
5
  * @flow
6
6
  */
7
7
  import type { Node } from 'react';
8
- import type { BasicTemplateInterpolations, CssFunction } from '../types';
9
- export type Interpolations = (BasicTemplateInterpolations | CssFunction<> | CssFunction<>[])[];
10
- export interface ClassNamesProps {
8
+ import type { CssType, CssFunction } from '../types';
9
+ export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
10
+ export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
11
+ declare interface CssSignature<TProps> {
12
+ (...interpolations: ObjectInterpolation<TProps>[]): string;
13
+ (
14
+ template: $ReadOnlyArray<string>,
15
+ ...interpolations: TemplateStringsInterpolation<TProps>[]
16
+ ): string;
17
+ }
18
+ export interface ClassNamesProps<TProps> {
11
19
  children: (opts: {
12
- css: (css: CssFunction<> | CssFunction<>[], ...interpolations: Interpolations) => string,
13
- style: {
14
- [key: string]: string,
15
- ...
16
- },
20
+ css: CssSignature<TProps>,
21
+ style: $Shape<CSSStyleDeclaration>,
17
22
  ...
18
23
  }) => Node;
19
24
  }
20
25
  /**
21
- * Use a component where styles are not necessarily tied to an element.
26
+ * ## Class names
22
27
  *
23
- * ```
24
- * // Object CSS
28
+ * Use a component where styles are not necessarily used on a JSX element.
29
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-class-names).
30
+ *
31
+ * ### Style with objects
32
+ * @example ```
25
33
  * <ClassNames>
26
34
  * {({ css, style }) => children({ className: css({ fontSize: 12 }) })}
27
35
  * </ClassNames>
36
+ * ```
28
37
  *
29
- * // Template literal CSS
38
+ * ### Style with template literals
39
+ * @example ```
30
40
  * <ClassNames>
31
41
  * {({ css, style }) => children({ className: css`font-size: 12px;` })}
32
42
  * </ClassNames>
43
+ * ```
33
44
  *
34
- * // Array CSS
45
+ * ### Compose styles with arrays
46
+ * @example ```
35
47
  * <ClassNames>
36
48
  * {({ css, style }) =>
37
- * children({ className: css([{ fontSize: 12 }, `font-size: 12px`]) })}
49
+ * children({ className: css([{ fontSize: 12 }, css`font-size: 12px`]) })}
38
50
  * </ClassNames>
39
51
  * ```
40
- *
41
- * For more help, read the docs:
42
- * https://compiledcssinjs.com/docs/api-class-names
43
- * @param props
44
52
  */
45
- declare export function ClassNames(_: ClassNamesProps): React$Node;
53
+ declare export function ClassNames<TProps>(x: ClassNamesProps<TProps>): React$Node;
54
+ declare export {};
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/class-names/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA+ClD,MAAM,UAAU,UAAU,CAAC,MAAuB;IAChD,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/class-names/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAqDlD,MAAM,UAAU,UAAU,CAAgB,MAA+B;IACvE,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
@@ -1,4 +1,4 @@
1
- import type { AnyKeyCssProps, BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
1
+ import type { CSSProps, CssObject, CssFunction } from '../types';
2
2
  /**
3
3
  * ## CSS
4
4
  *
@@ -27,5 +27,5 @@ import type { AnyKeyCssProps, BasicTemplateInterpolations, CSSProps, FunctionInt
27
27
  * <div css={redText} />
28
28
  * ```
29
29
  */
30
- export default function css<T = void>(styles: TemplateStringsArray, ...interpolations: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]): CSSProps;
31
- export default function css(styles: AnyKeyCssProps<void> | CSSProps): CSSProps;
30
+ export default function css<TProps = unknown>(styles: TemplateStringsArray, ...interpolations: CssFunction<TProps>[]): CSSProps<TProps>;
31
+ export default function css<T = unknown>(styles: CssObject<T> | CssObject<T>[]): CSSProps<T>;
@@ -1,35 +1,36 @@
1
1
  /**
2
2
  * Flowtype definitions for index
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.15.0
4
+ * Flowgen v1.17.0
5
5
  * @flow
6
6
  */
7
- import type { BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
7
+ import type { CSSProps, CssObject, CssFunction } from '../types';
8
8
  /**
9
- * Create styles that can be re-used between components with a template literal.
9
+ * ## CSS
10
10
  *
11
- * ```
12
- * css`color: red;`;
13
- * ```
11
+ * Define styles that are statically typed and useable with other Compiled APIs.
12
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-css).
14
13
  *
15
- * For more help, read the docs:
16
- * https://compiledcssinjs.com/docs/api-css
17
- * @param css
18
- * @param values
19
- */
20
- declare export default function css<T>(
21
- _css: $ReadOnlyArray<string>,
22
- ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]
23
- ): CSSProps;
24
- /**
25
- * Create styles that can be re-used between components with an object
14
+ * ### Style with objects
15
+ * @example ```
16
+ * const redText = css({
17
+ * color: 'red',
18
+ * });
26
19
  *
20
+ * <div css={redText} />
27
21
  * ```
28
- * css({ color: 'red' });
29
- * ```
30
22
  *
31
- * For more help, read the docs:
32
- * https://compiledcssinjs.com/docs/api-css
33
- * @param css
23
+ * ### Style with template literals
24
+ * @example ```
25
+ * const redText = css`
26
+ * color: red;
27
+ * `;
28
+ *
29
+ * <div css={redText} />
30
+ * ```
34
31
  */
35
- declare export default function css(_css: CSSProps): CSSProps;
32
+ declare export default function css<TProps>(
33
+ styles: $ReadOnlyArray<string>,
34
+ ...interpolations: CssFunction<TProps>[]
35
+ ): CSSProps<TProps>;
36
+ declare export default function css<T>(styles: CssObject<T> | CssObject<T>[]): CSSProps<T>;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAQlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAqClD,MAAM,CAAC,OAAO,UAAU,GAAG,CACzB,OAAwC;IACxC,yBAA8E;SAA9E,UAA8E,EAA9E,qBAA8E,EAA9E,IAA8E;QAA9E,wCAA8E;;IAE9E,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAGlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAqClD,MAAM,CAAC,OAAO,UAAU,GAAG,CACzB,OAA6D;IAC7D,yBAAiC;SAAjC,UAAiC,EAAjC,qBAAiC,EAAjC,IAAiC;QAAjC,wCAAiC;;IAEjC,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
@@ -1,13 +1,12 @@
1
1
  import { createElement } from 'react';
2
2
  import type { CompiledJSX } from './jsx/jsx-local-namespace';
3
- import type { CssFunction, CSSProps } from './types';
3
+ import type { CssFunction, CSSProps, CssType } from './types';
4
+ export type { CSSProps, CssFunction, CssType };
4
5
  export { keyframes } from './keyframes';
5
6
  export { styled } from './styled';
6
7
  export { ClassNames } from './class-names';
7
8
  export { default as css } from './css';
8
9
  export declare const jsx: typeof createElement;
9
- export type { CssFunction, CSSProps };
10
- export type { CssObject } from './styled';
11
10
  export declare namespace jsx {
12
11
  namespace JSX {
13
12
  type Element = CompiledJSX.Element;
@@ -1,15 +1,12 @@
1
1
  /**
2
- * THIS IS A MANUALLY CURATED FLOW FILE.
3
- *
4
- * Flowtype definitions for runtime
2
+ * Flowtype definitions for index
5
3
  * Generated by Flowgen from a Typescript Definition
6
- * Flowgen v1.15.0
4
+ * Flowgen v1.17.0
7
5
  * @flow
8
6
  */
9
- import type { CSSProps, CssFunction } from './types';
7
+ import type { CssFunction, CSSProps, CssType } from './types';
8
+ export type { CSSProps, CssFunction, CssType };
10
9
  declare export { keyframes } from './keyframes';
11
10
  declare export { styled } from './styled';
12
11
  declare export { ClassNames } from './class-names';
13
12
  declare export { default as css } from './css';
14
- export type { CssFunction, CSSProps };
15
- export type { CssObject } from './styled';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,IAAM,GAAG,GAAG,aAAa,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAOtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,IAAM,GAAG,GAAG,aAAa,CAAC"}
@@ -39,7 +39,7 @@ declare type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ?
39
39
  * />
40
40
  * ```
41
41
  */
42
- css?: CssFunction | CssFunction[];
42
+ css?: CssFunction<void> | CssFunction<void>[];
43
43
  } : {} : {};
44
44
  declare type ReactJSXElement = JSX.Element;
45
45
  declare type ReactJSXElementClass = JSX.ElementClass;
@@ -59,7 +59,7 @@ export declare namespace CompiledJSX {
59
59
  type IntrinsicClassAttributes<T> = ReactJSXIntrinsicClassAttributes<T>;
60
60
  type IntrinsicElements = {
61
61
  [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
62
- css?: CssFunction | CssFunction[];
62
+ css?: CssFunction<void> | CssFunction<void>[];
63
63
  };
64
64
  };
65
65
  }
@@ -1,5 +1,5 @@
1
1
  import type { BasicTemplateInterpolations, CSSProps } from '../types';
2
- export declare type KeyframeSteps = string | Record<string, CSSProps>;
2
+ export declare type KeyframeSteps = string | Record<string, CSSProps<void>>;
3
3
  /**
4
4
  * ## Keyframes
5
5
  *
@@ -1,33 +1,19 @@
1
1
  /**
2
2
  * Flowtype definitions for index
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.15.0
4
+ * Flowgen v1.17.0
5
5
  * @flow
6
6
  */
7
7
  import type { BasicTemplateInterpolations, CSSProps } from '../types';
8
- export type KeyframeSteps = string | { [key: string]: CSSProps, ... };
8
+ export type KeyframeSteps = string | { [key: string]: CSSProps<void> };
9
9
  /**
10
- * Create keyframes using a tagged template expression:
10
+ * ## Keyframes
11
11
  *
12
- * ```
13
- * const fadeOut = keyframes`
14
- * from { opacity: 1; }
15
- * to { opacity: 0; }
16
- * `;
17
- * ```
18
- * @param _strings The input string values
19
- * @param _interpolations The arguments used in the expression
20
- */
21
- declare export function keyframes(
22
- _strings: $ReadOnlyArray<string>,
23
- ..._interpolations: BasicTemplateInterpolations[]
24
- ): string;
25
- /**
26
- * Create keyframes using:
12
+ * Define keyframes to be used in a [CSS animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation).
13
+ * For further details [read the API documentation](https://compiledcssinjs.com/docs/api-keyframes).
27
14
  *
28
- * 1. An object expression
29
- *
30
- * ```
15
+ * ### Style with objects
16
+ * @example ```
31
17
  * const fadeOut = keyframes({
32
18
  * from: {
33
19
  * opacity: 1,
@@ -36,19 +22,27 @@ declare export function keyframes(
36
22
  * opacity: 0,
37
23
  * },
38
24
  * });
39
- * ```
40
- *
41
- * 2. A string
42
25
  *
43
- * ```
44
- * const fadeOut = keyframes('from { opacity: 1; } to { opacity: 0; }');
26
+ * <div css={{ animation: `${fadeOut} 2s` }} />
45
27
  * ```
46
28
  *
47
- * 3. A template literal
29
+ * ### Style with template literals
30
+ * @example ```
31
+ * const fadeOut = keyframes`
32
+ * from {
33
+ * opacity: 1;
34
+ * }
48
35
  *
36
+ * to {
37
+ * opacity: 0;
38
+ * }
39
+ * `;
40
+ *
41
+ * <div css={{ animation: `${fadeOut} 2s` }} />
49
42
  * ```
50
- * const fadeOut = keyframes(`from { opacity: 1; } to { opacity: 0; }`);
51
- * ```
52
- * @param _steps The waypoints along the animation sequence
53
43
  */
54
- declare export function keyframes(_steps: KeyframeSteps): string;
44
+ declare export function keyframes(steps: KeyframeSteps): string;
45
+ declare export function keyframes(
46
+ strings: $ReadOnlyArray<string>,
47
+ ...interpolations: BasicTemplateInterpolations[]
48
+ ): string;
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for ax
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.15.0
4
+ * Flowgen v1.17.0
5
5
  * @flow
6
6
  */
7
7
  /**
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for cache
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.15.0
4
+ * Flowgen v1.17.0
5
5
  * @flow
6
6
  */
7
7
  /**
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for css-custom-property
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.15.0
4
+ * Flowgen v1.17.0
5
5
  * @flow
6
6
  */
7
7
  /**
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for dev-warnings
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.15.0
4
+ * Flowgen v1.17.0
5
5
  * @flow
6
6
  */
7
7
  declare export var analyzeCssInDev: (sheet: string) => void;
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for index
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.15.0
4
+ * Flowgen v1.17.0
5
5
  * @flow
6
6
  */
7
7
  declare export { default as CS } from './style';
@@ -5,9 +5,9 @@
5
5
  * When using this it will remove any node code from the browser bundle - for example:
6
6
  *
7
7
  * ```js
8
- * if (isNodeEnvironment()) {
8
+ * if (isServerEnvironment()) {
9
9
  * // This code will be removed from the browser bundle
10
10
  * }
11
11
  * ```
12
12
  */
13
- export declare const isNodeEnvironment: () => boolean;
13
+ export declare const isServerEnvironment: () => boolean;
@@ -0,0 +1,31 @@
1
+ /**
2
+ * @see https://github.com/jsdom/jsdom/releases/tag/12.0.0
3
+ * @see https://github.com/jsdom/jsdom/issues/1537
4
+ */
5
+ var isJsDomEnvironment = function () {
6
+ return window.name === 'nodejs' ||
7
+ navigator.userAgent.includes('Node.js') ||
8
+ navigator.userAgent.includes('jsdom');
9
+ };
10
+ /**
11
+ * Returns `true` when inside a node environment,
12
+ * else `false`.
13
+ *
14
+ * When using this it will remove any node code from the browser bundle - for example:
15
+ *
16
+ * ```js
17
+ * if (isServerEnvironment()) {
18
+ * // This code will be removed from the browser bundle
19
+ * }
20
+ * ```
21
+ */
22
+ export var isServerEnvironment = function () {
23
+ if (typeof process !== 'undefined' && process.versions != null && process.versions.node != null) {
24
+ return true;
25
+ }
26
+ if (isJsDomEnvironment()) {
27
+ return true;
28
+ }
29
+ return false;
30
+ };
31
+ //# sourceMappingURL=is-server-environment.js.map
@@ -1,7 +1,7 @@
1
1
  /**
2
- * Flowtype definitions for is-node
2
+ * Flowtype definitions for is-server-environment
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.15.0
4
+ * Flowgen v1.17.0
5
5
  * @flow
6
6
  */
7
7
  /**
@@ -11,9 +11,9 @@
11
11
  * When using this it will remove any node code from the browser bundle - for example:
12
12
  *
13
13
  * ```js
14
- * if (isNodeEnvironment()) {
14
+ * if (isServerEnvironment()) {
15
15
  * // This code will be removed from the browser bundle
16
16
  * }
17
17
  * ```
18
18
  */
19
- declare export var isNodeEnvironment: () => boolean;
19
+ declare export var isServerEnvironment: () => boolean;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"is-server-environment.js","sourceRoot":"","sources":["../../../src/runtime/is-server-environment.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,IAAM,kBAAkB,GAAG;IACzB,OAAA,MAAM,CAAC,IAAI,KAAK,QAAQ;QACxB,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;QACvC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC;AAFrC,CAEqC,CAAC;AACxC;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,IAAM,mBAAmB,GAAG;IACjC,IAAI,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,QAAQ,IAAI,IAAI,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,IAAI,IAAI,EAAE;QAC/F,OAAO,IAAI,CAAC;KACb;IACD,IAAI,kBAAkB,EAAE,EAAE;QACxB,OAAO,IAAI,CAAC;KACb;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC"}
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for sheet
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.15.0
4
+ * Flowgen v1.17.0
5
5
  * @flow
6
6
  */
7
7
  import type { Bucket, StyleSheetOpts } from './types';
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { createContext, useContext } from 'react';
3
3
  import { isCacheDisabled } from './cache';
4
- import { isNodeEnvironment } from './is-node';
4
+ import { isServerEnvironment } from './is-server-environment';
5
5
  /**
6
6
  * Cache to hold already used styles.
7
7
  * React Context on the server - singleton object on the client.
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for style-cache
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.15.0
4
+ * Flowgen v1.17.0
5
5
  * @flow
6
6
  */
7
7
  import type { ProviderComponent, UseCacheHook } from './types';
@@ -1 +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,MAAoB,CAAC,CAAC,aAAa,CAA8B,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAE/F,IAAI,MAAoB,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,IAAI,eAAe,EAAE,EAAE;QACrB,OAAO,EAAE,CAAC;KACX;IAED,WAAyB;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,WAAyB;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"}
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,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAG9D;;;GAGG;AACH,IAAM,KAAK,GAAQ,MAAsB,CAAC,CAAC,aAAa,CAA8B,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAEjG,IAAI,MAAsB,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,IAAI,eAAe,EAAE,EAAE;QACrB,OAAO,EAAE,CAAC;KACX;IAED,WAA2B;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,WAA2B;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"}
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { analyzeCssInDev } from './dev-warnings';
3
- import { isNodeEnvironment } from './is-node';
3
+ import { isServerEnvironment } from './is-server-environment';
4
4
  import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet';
5
5
  import { useCache } from './style-cache';
6
6
  export default function Style(props) {
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for style
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.15.0
4
+ * Flowgen v1.17.0
5
5
  * @flow
6
6
  */
7
7
  import type { StyleSheetOpts } from './types';
@@ -1 +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,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"}
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,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,WAA2B;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"}
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for types
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.15.0
4
+ * Flowgen v1.17.0
5
5
  * @flow
6
6
  */
7
7
  export interface StyleSheetOpts {
@@ -16,7 +16,7 @@ export interface StyleSheetOpts {
16
16
  * Buckets under which we will group our stylesheets
17
17
  */
18
18
  export type Bucket = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
19
- export type UseCacheHook = () => { [key: string]: true, ... };
19
+ export type UseCacheHook = () => { [key: string]: true };
20
20
  export type ProviderComponent = (props: {
21
21
  children: React$Node[] | React$Node,
22
22
  ...
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Flowtype definitions for runtime
3
3
  * Generated by Flowgen from a Typescript Definition
4
- * Flowgen v1.15.0
4
+ * Flowgen v1.17.0
5
5
  * @flow
6
6
  */
7
7
  declare export { CC, CS, ax, ix } from './runtime/index';
@@ -1,35 +1,22 @@
1
1
  import type { ComponentType } from 'react';
2
- import type { BasicTemplateInterpolations, CssFunction, FunctionInterpolation } from '../types';
3
- /**
4
- * Typing for the CSS object.
5
- */
6
- export declare type CssObject<TProps> = CssFunction<FunctionInterpolation<TProps>>;
2
+ import type { CssType, CssFunction } from '../types';
7
3
  /**
8
4
  * Extra props added to the output Styled Component.
9
5
  */
10
6
  export interface StyledProps {
11
7
  as?: keyof JSX.IntrinsicElements;
12
8
  }
13
- export declare type Interpolations<TProps extends unknown> = (BasicTemplateInterpolations | FunctionInterpolation<TProps> | CssObject<TProps> | CssObject<TProps>[])[];
14
- /**
15
- * This allows us to take the generic `TTag` (that will be a valid `DOM` tag) and then use it to
16
- * define correct props based on it from `JSX.IntrinsicElements`, while also injecting our own
17
- * props from `StyledProps`.
18
- */
19
- export interface StyledFunctionFromTag<TTag extends keyof JSX.IntrinsicElements> {
20
- <TProps extends unknown>(css: CssObject<TProps> | CssObject<TProps>[], ...interpolations: Interpolations<TProps>): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
21
- }
22
- export interface StyledFunctionFromComponent<TInheritedProps extends unknown> {
23
- <TProps extends unknown>(css: CssObject<TProps> | TemplateStringsArray, ...interpolations: Interpolations<TProps>): React.ComponentType<TProps & StyledProps & TInheritedProps>;
9
+ export declare type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
10
+ export declare type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
11
+ export interface StyledComponent<ComponentProps extends unknown> {
12
+ <TProps = {}>(...css: ObjectInterpolation<TProps>[]): React.ComponentType<TProps & ComponentProps & StyledProps>;
13
+ <TProps = {}>(template: TemplateStringsArray, ...interpolations: TemplateStringsInterpolation<TProps>[]): React.ComponentType<TProps & ComponentProps & StyledProps>;
24
14
  }
25
15
  export declare type StyledComponentMap = {
26
- [Tag in keyof JSX.IntrinsicElements]: StyledFunctionFromTag<Tag>;
16
+ [Tag in keyof JSX.IntrinsicElements]: StyledComponent<JSX.IntrinsicElements[Tag]>;
27
17
  };
28
- export interface StyledComponentInstantiator extends StyledComponentMap {
29
- /**
30
- * Typing to enable consumers to compose components, e.g: `styled(Component)`
31
- */
32
- <TInheritedProps extends unknown>(Component: ComponentType<TInheritedProps>): StyledFunctionFromComponent<TInheritedProps>;
18
+ export interface CreateStyledComponent extends StyledComponentMap {
19
+ <TInheritedProps extends unknown>(Component: ComponentType<TInheritedProps>): StyledComponent<TInheritedProps>;
33
20
  }
34
21
  /**
35
22
  * ## Styled component
@@ -72,4 +59,4 @@ export interface StyledComponentInstantiator extends StyledComponentMap {
72
59
  * );
73
60
  * ```
74
61
  */
75
- export declare const styled: StyledComponentInstantiator;
62
+ export declare const styled: CreateStyledComponent;