@compiled/react 0.6.13 → 0.9.1

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 (219) hide show
  1. package/CHANGELOG.md +28 -1
  2. package/dist/browser/class-names/index.d.ts +2 -2
  3. package/dist/browser/class-names/index.js.flow +45 -0
  4. package/dist/browser/css/index.d.ts +16 -3
  5. package/dist/browser/css/index.js +0 -13
  6. package/dist/browser/css/index.js.flow +35 -0
  7. package/dist/browser/css/index.js.map +1 -1
  8. package/dist/browser/index.d.ts +4 -1
  9. package/dist/browser/index.js +1 -0
  10. package/dist/browser/index.js.flow +40 -0
  11. package/dist/browser/index.js.map +1 -1
  12. package/dist/browser/keyframes/__fixtures__/index.d.ts +3 -0
  13. package/dist/browser/keyframes/__fixtures__/index.js +12 -0
  14. package/dist/browser/keyframes/__fixtures__/index.js.map +1 -0
  15. package/dist/browser/keyframes/index.d.ts +47 -0
  16. package/dist/browser/keyframes/index.js +9 -0
  17. package/dist/browser/keyframes/index.js.flow +54 -0
  18. package/dist/browser/keyframes/index.js.map +1 -0
  19. package/dist/browser/runtime/ax.js.flow +27 -0
  20. package/dist/browser/runtime/css-custom-property.js.flow +19 -0
  21. package/dist/browser/runtime/dev-warnings.d.ts +0 -1
  22. package/dist/browser/runtime/dev-warnings.js +1 -1
  23. package/dist/browser/runtime/dev-warnings.js.flow +7 -0
  24. package/dist/browser/runtime/dev-warnings.js.map +1 -1
  25. package/dist/browser/runtime/index.js.flow +10 -0
  26. package/dist/browser/runtime/is-node.js.flow +19 -0
  27. package/dist/browser/runtime/sheet.d.ts +1 -1
  28. package/dist/browser/runtime/sheet.js.flow +36 -0
  29. package/dist/browser/runtime/style-cache.d.ts +1 -1
  30. package/dist/browser/runtime/style-cache.js.flow +19 -0
  31. package/dist/browser/runtime/style.d.ts +1 -1
  32. package/dist/browser/runtime/style.js.flow +17 -0
  33. package/dist/browser/runtime/types.js.flow +23 -0
  34. package/dist/browser/runtime.js.flow +7 -0
  35. package/dist/browser/styled/index.d.ts +6 -9
  36. package/dist/browser/styled/index.js.flow +69 -0
  37. package/dist/browser/styled/index.js.map +1 -1
  38. package/dist/browser/types.d.ts +6 -3
  39. package/dist/browser/types.js.flow +29 -0
  40. package/dist/browser/utils/error.js.flow +7 -0
  41. package/dist/cjs/class-names/index.d.ts +2 -2
  42. package/dist/cjs/class-names/index.js.flow +45 -0
  43. package/dist/cjs/css/index.d.ts +16 -3
  44. package/dist/cjs/css/index.js +0 -13
  45. package/dist/cjs/css/index.js.flow +35 -0
  46. package/dist/cjs/css/index.js.map +1 -1
  47. package/dist/cjs/index.d.ts +4 -1
  48. package/dist/cjs/index.js +3 -1
  49. package/dist/cjs/index.js.flow +40 -0
  50. package/dist/cjs/index.js.map +1 -1
  51. package/dist/cjs/keyframes/__fixtures__/index.d.ts +3 -0
  52. package/dist/cjs/keyframes/__fixtures__/index.js +15 -0
  53. package/dist/cjs/keyframes/__fixtures__/index.js.map +1 -0
  54. package/dist/cjs/keyframes/index.d.ts +47 -0
  55. package/dist/cjs/keyframes/index.js +13 -0
  56. package/dist/cjs/keyframes/index.js.flow +54 -0
  57. package/dist/cjs/keyframes/index.js.map +1 -0
  58. package/dist/cjs/runtime/ax.js.flow +27 -0
  59. package/dist/cjs/runtime/css-custom-property.js.flow +19 -0
  60. package/dist/cjs/runtime/dev-warnings.d.ts +0 -1
  61. package/dist/cjs/runtime/dev-warnings.js +2 -3
  62. package/dist/cjs/runtime/dev-warnings.js.flow +7 -0
  63. package/dist/cjs/runtime/dev-warnings.js.map +1 -1
  64. package/dist/cjs/runtime/index.js.flow +10 -0
  65. package/dist/cjs/runtime/is-node.js.flow +19 -0
  66. package/dist/cjs/runtime/sheet.d.ts +1 -1
  67. package/dist/cjs/runtime/sheet.js.flow +36 -0
  68. package/dist/cjs/runtime/style-cache.d.ts +1 -1
  69. package/dist/cjs/runtime/style-cache.js.flow +19 -0
  70. package/dist/cjs/runtime/style.d.ts +1 -1
  71. package/dist/cjs/runtime/style.js.flow +17 -0
  72. package/dist/cjs/runtime/types.js.flow +23 -0
  73. package/dist/cjs/runtime.js.flow +7 -0
  74. package/dist/cjs/styled/index.d.ts +6 -9
  75. package/dist/cjs/styled/index.js.flow +69 -0
  76. package/dist/cjs/styled/index.js.map +1 -1
  77. package/dist/cjs/types.d.ts +6 -3
  78. package/dist/cjs/types.js.flow +29 -0
  79. package/dist/cjs/utils/error.js.flow +7 -0
  80. package/dist/esm/class-names/index.d.ts +2 -2
  81. package/dist/esm/class-names/index.js.flow +45 -0
  82. package/dist/esm/css/index.d.ts +16 -3
  83. package/dist/esm/css/index.js +0 -13
  84. package/dist/esm/css/index.js.flow +35 -0
  85. package/dist/esm/css/index.js.map +1 -1
  86. package/dist/esm/index.d.ts +4 -1
  87. package/dist/esm/index.js +1 -0
  88. package/dist/esm/index.js.flow +40 -0
  89. package/dist/esm/index.js.map +1 -1
  90. package/dist/esm/keyframes/__fixtures__/index.d.ts +3 -0
  91. package/dist/esm/keyframes/__fixtures__/index.js +12 -0
  92. package/dist/esm/keyframes/__fixtures__/index.js.map +1 -0
  93. package/dist/esm/keyframes/index.d.ts +47 -0
  94. package/dist/esm/keyframes/index.js +9 -0
  95. package/dist/esm/keyframes/index.js.flow +54 -0
  96. package/dist/esm/keyframes/index.js.map +1 -0
  97. package/dist/esm/runtime/ax.js.flow +27 -0
  98. package/dist/esm/runtime/css-custom-property.js.flow +19 -0
  99. package/dist/esm/runtime/dev-warnings.d.ts +0 -1
  100. package/dist/esm/runtime/dev-warnings.js +1 -1
  101. package/dist/esm/runtime/dev-warnings.js.flow +7 -0
  102. package/dist/esm/runtime/dev-warnings.js.map +1 -1
  103. package/dist/esm/runtime/index.js.flow +10 -0
  104. package/dist/esm/runtime/is-node.js.flow +19 -0
  105. package/dist/esm/runtime/sheet.d.ts +1 -1
  106. package/dist/esm/runtime/sheet.js.flow +36 -0
  107. package/dist/esm/runtime/style-cache.d.ts +1 -1
  108. package/dist/esm/runtime/style-cache.js.flow +19 -0
  109. package/dist/esm/runtime/style.d.ts +1 -1
  110. package/dist/esm/runtime/style.js.flow +17 -0
  111. package/dist/esm/runtime/types.js.flow +23 -0
  112. package/dist/esm/runtime.js.flow +7 -0
  113. package/dist/esm/styled/index.d.ts +6 -9
  114. package/dist/esm/styled/index.js.flow +69 -0
  115. package/dist/esm/styled/index.js.map +1 -1
  116. package/dist/esm/types.d.ts +6 -3
  117. package/dist/esm/types.js.flow +29 -0
  118. package/dist/esm/utils/error.js.flow +7 -0
  119. package/package.json +18 -20
  120. package/src/class-names/__tests__/types.test.js.flow +28 -0
  121. package/src/class-names/index.js.flow +45 -0
  122. package/src/class-names/index.tsx +2 -2
  123. package/src/css/__tests__/index.test.tsx +41 -0
  124. package/src/css/__tests__/types.test.js.flow +17 -0
  125. package/src/css/index.js.flow +35 -0
  126. package/src/css/index.tsx +25 -3
  127. package/src/index.js.flow +40 -0
  128. package/src/index.tsx +5 -2
  129. package/src/keyframes/__fixtures__/index.tsx +14 -0
  130. package/src/keyframes/__tests__/index.test.tsx +324 -0
  131. package/src/keyframes/__tests__/types.test.js.flow +31 -0
  132. package/src/keyframes/index.js.flow +54 -0
  133. package/src/keyframes/index.tsx +61 -0
  134. package/src/runtime/__tests__/style.test.tsx +91 -57
  135. package/src/runtime/ax.js.flow +27 -0
  136. package/src/runtime/css-custom-property.js.flow +19 -0
  137. package/src/runtime/dev-warnings.js.flow +7 -0
  138. package/src/runtime/dev-warnings.tsx +1 -1
  139. package/src/runtime/index.js.flow +10 -0
  140. package/src/runtime/is-node.js.flow +19 -0
  141. package/src/runtime/sheet.js.flow +36 -0
  142. package/src/runtime/sheet.tsx +1 -1
  143. package/src/runtime/style-cache.js.flow +19 -0
  144. package/src/runtime/style-cache.tsx +1 -1
  145. package/src/runtime/style.js.flow +17 -0
  146. package/src/runtime/style.tsx +1 -1
  147. package/src/runtime/types.js.flow +23 -0
  148. package/src/runtime.js.flow +7 -0
  149. package/src/styled/__tests__/types.test.js.flow +30 -0
  150. package/src/styled/index.js.flow +69 -0
  151. package/src/styled/index.tsx +6 -10
  152. package/src/types.js.flow +29 -0
  153. package/src/types.tsx +7 -3
  154. package/src/utils/error.js.flow +7 -0
  155. package/dist/browser/codemods/codemods-helpers.d.ts +0 -60
  156. package/dist/browser/codemods/codemods-helpers.js +0 -201
  157. package/dist/browser/codemods/codemods-helpers.js.map +0 -1
  158. package/dist/browser/codemods/constants.d.ts +0 -3
  159. package/dist/browser/codemods/constants.js +0 -4
  160. package/dist/browser/codemods/constants.js.map +0 -1
  161. package/dist/browser/codemods/emotion-to-compiled/emotion-to-compiled.d.ts +0 -3
  162. package/dist/browser/codemods/emotion-to-compiled/emotion-to-compiled.js +0 -178
  163. package/dist/browser/codemods/emotion-to-compiled/emotion-to-compiled.js.map +0 -1
  164. package/dist/browser/codemods/emotion-to-compiled/index.d.ts +0 -1
  165. package/dist/browser/codemods/emotion-to-compiled/index.js +0 -2
  166. package/dist/browser/codemods/emotion-to-compiled/index.js.map +0 -1
  167. package/dist/browser/codemods/styled-components-to-compiled/index.d.ts +0 -1
  168. package/dist/browser/codemods/styled-components-to-compiled/index.js +0 -2
  169. package/dist/browser/codemods/styled-components-to-compiled/index.js.map +0 -1
  170. package/dist/browser/codemods/styled-components-to-compiled/styled-components-to-compiled.d.ts +0 -3
  171. package/dist/browser/codemods/styled-components-to-compiled/styled-components-to-compiled.js +0 -33
  172. package/dist/browser/codemods/styled-components-to-compiled/styled-components-to-compiled.js.map +0 -1
  173. package/dist/cjs/codemods/codemods-helpers.d.ts +0 -60
  174. package/dist/cjs/codemods/codemods-helpers.js +0 -217
  175. package/dist/cjs/codemods/codemods-helpers.js.map +0 -1
  176. package/dist/cjs/codemods/constants.d.ts +0 -3
  177. package/dist/cjs/codemods/constants.js +0 -7
  178. package/dist/cjs/codemods/constants.js.map +0 -1
  179. package/dist/cjs/codemods/emotion-to-compiled/emotion-to-compiled.d.ts +0 -3
  180. package/dist/cjs/codemods/emotion-to-compiled/emotion-to-compiled.js +0 -180
  181. package/dist/cjs/codemods/emotion-to-compiled/emotion-to-compiled.js.map +0 -1
  182. package/dist/cjs/codemods/emotion-to-compiled/index.d.ts +0 -1
  183. package/dist/cjs/codemods/emotion-to-compiled/index.js +0 -9
  184. package/dist/cjs/codemods/emotion-to-compiled/index.js.map +0 -1
  185. package/dist/cjs/codemods/styled-components-to-compiled/index.d.ts +0 -1
  186. package/dist/cjs/codemods/styled-components-to-compiled/index.js +0 -9
  187. package/dist/cjs/codemods/styled-components-to-compiled/index.js.map +0 -1
  188. package/dist/cjs/codemods/styled-components-to-compiled/styled-components-to-compiled.d.ts +0 -3
  189. package/dist/cjs/codemods/styled-components-to-compiled/styled-components-to-compiled.js +0 -35
  190. package/dist/cjs/codemods/styled-components-to-compiled/styled-components-to-compiled.js.map +0 -1
  191. package/dist/esm/codemods/codemods-helpers.d.ts +0 -60
  192. package/dist/esm/codemods/codemods-helpers.js +0 -201
  193. package/dist/esm/codemods/codemods-helpers.js.map +0 -1
  194. package/dist/esm/codemods/constants.d.ts +0 -3
  195. package/dist/esm/codemods/constants.js +0 -4
  196. package/dist/esm/codemods/constants.js.map +0 -1
  197. package/dist/esm/codemods/emotion-to-compiled/emotion-to-compiled.d.ts +0 -3
  198. package/dist/esm/codemods/emotion-to-compiled/emotion-to-compiled.js +0 -178
  199. package/dist/esm/codemods/emotion-to-compiled/emotion-to-compiled.js.map +0 -1
  200. package/dist/esm/codemods/emotion-to-compiled/index.d.ts +0 -1
  201. package/dist/esm/codemods/emotion-to-compiled/index.js +0 -2
  202. package/dist/esm/codemods/emotion-to-compiled/index.js.map +0 -1
  203. package/dist/esm/codemods/styled-components-to-compiled/index.d.ts +0 -1
  204. package/dist/esm/codemods/styled-components-to-compiled/index.js +0 -2
  205. package/dist/esm/codemods/styled-components-to-compiled/index.js.map +0 -1
  206. package/dist/esm/codemods/styled-components-to-compiled/styled-components-to-compiled.d.ts +0 -3
  207. package/dist/esm/codemods/styled-components-to-compiled/styled-components-to-compiled.js +0 -33
  208. package/dist/esm/codemods/styled-components-to-compiled/styled-components-to-compiled.js.map +0 -1
  209. package/src/codemods/README.md +0 -8
  210. package/src/codemods/codemods-helpers.tsx +0 -369
  211. package/src/codemods/constants.tsx +0 -3
  212. package/src/codemods/emotion-to-compiled/README.md +0 -71
  213. package/src/codemods/emotion-to-compiled/__tests__/emotion-to-compiled.test.tsx +0 -526
  214. package/src/codemods/emotion-to-compiled/emotion-to-compiled.tsx +0 -249
  215. package/src/codemods/emotion-to-compiled/index.tsx +0 -1
  216. package/src/codemods/styled-components-to-compiled/README.md +0 -37
  217. package/src/codemods/styled-components-to-compiled/__tests__/styled-components-to-compiled.test.tsx +0 -109
  218. package/src/codemods/styled-components-to-compiled/index.tsx +0 -1
  219. package/src/codemods/styled-components-to-compiled/styled-components-to-compiled.tsx +0 -45
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Flowtype definitions for is-node
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ /**
8
+ * Returns `true` when inside a node environment,
9
+ * else `false`.
10
+ *
11
+ * When using this it will remove any node code from the browser bundle - for example:
12
+ *
13
+ * ```js
14
+ * if (isNodeEnvironment()) {
15
+ * // This code will be removed from the browser bundle
16
+ * }
17
+ * ```
18
+ */
19
+ declare export var isNodeEnvironment: () => boolean;
@@ -1,4 +1,4 @@
1
- import { StyleSheetOpts, Bucket } from './types';
1
+ import type { StyleSheetOpts, Bucket } from './types';
2
2
  /**
3
3
  * Ordered style buckets using their short psuedo name.
4
4
  * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.
@@ -0,0 +1,36 @@
1
+ /**
2
+ * Flowtype definitions for sheet
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ import type { StyleSheetOpts, Bucket } from './types';
8
+ /**
9
+ * Ordered style buckets using their short psuedo name.
10
+ * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.
11
+ */
12
+ declare export var styleBucketOrdering: Bucket[];
13
+ /**
14
+ * Gets the bucket depending on the sheet.
15
+ * This function makes assumptions as to the form of the input class name.
16
+ *
17
+ * Input:
18
+ *
19
+ * ```
20
+ * "._a1234567:hover{ color: red; }"
21
+ * ```
22
+ *
23
+ * Output:
24
+ *
25
+ * ```
26
+ * "h"
27
+ * ```
28
+ * @param sheet styles for which we are getting the bucket
29
+ */
30
+ declare export var getStyleBucketName: (sheet: string) => Bucket;
31
+ /**
32
+ * Used to move styles to the head of the application during runtime.
33
+ * @param css string
34
+ * @param opts StyleSheetOpts
35
+ */
36
+ declare export default function insertRule(css: string, opts: StyleSheetOpts): void;
@@ -1,4 +1,4 @@
1
- import { ProviderComponent, UseCacheHook } from './types';
1
+ import type { ProviderComponent, UseCacheHook } from './types';
2
2
  /**
3
3
  * Hook using the cache created on the server or client.
4
4
  */
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Flowtype definitions for style-cache
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ import type { ProviderComponent, UseCacheHook } from './types';
8
+ /**
9
+ * Hook using the cache created on the server or client.
10
+ */
11
+ declare export var useCache: UseCacheHook;
12
+ /**
13
+ * On the server this ensures the minimal amount of styles will be rendered
14
+ * safely using React Context.
15
+ *
16
+ * On the browser this turns into a fragment with no React Context.
17
+ */
18
+ declare var StyleCacheProvider: ProviderComponent;
19
+ declare export default typeof StyleCacheProvider;
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { StyleSheetOpts } from './types';
2
+ import type { StyleSheetOpts } from './types';
3
3
  interface StyleProps extends StyleSheetOpts {
4
4
  /**
5
5
  * CSS Rules.
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Flowtype definitions for style
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ import type { StyleSheetOpts } from './types';
8
+ declare type StyleProps = {
9
+ /**
10
+ * CSS Rules.
11
+ * Ensure each rule is a separate element in the array.
12
+ */
13
+ children: string[],
14
+ ...
15
+ } & StyleSheetOpts;
16
+ declare export default function Style(props: StyleProps): React$Node | null;
17
+ declare export {};
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Flowtype definitions for types
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ export interface StyleSheetOpts {
8
+ /**
9
+ * Used to set a nonce on the style element.
10
+ * This is needed when using a strict CSP and should be a random hash generated every server load.
11
+ * Check out https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src for more information.
12
+ */
13
+ nonce?: string;
14
+ }
15
+ /**
16
+ * Buckets under which we will group our stylesheets
17
+ */
18
+ export type Bucket = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
19
+ export type UseCacheHook = () => { [key: string]: true, ... };
20
+ export type ProviderComponent = (props: {
21
+ children: React$Node[] | React$Node,
22
+ ...
23
+ }) => React$Node;
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Flowtype definitions for runtime
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ declare export { CC, CS, ax, ix } from './runtime/index';
@@ -1,29 +1,26 @@
1
- import { ComponentType } from 'react';
2
- import { CssFunction, BasicTemplateInterpolations } from '../types';
3
- export interface FunctionIterpolation<TProps> {
4
- (props: TProps): string | number | undefined;
5
- }
1
+ import type { ComponentType } from 'react';
2
+ import type { BasicTemplateInterpolations, CssFunction, FunctionInterpolation } from '../types';
6
3
  /**
7
4
  * Typing for the CSS object.
8
5
  */
9
- export declare type CssObject<TProps> = CssFunction<FunctionIterpolation<TProps>>;
6
+ export declare type CssObject<TProps> = CssFunction<FunctionInterpolation<TProps>>;
10
7
  /**
11
8
  * Extra props added to the output Styled Component.
12
9
  */
13
10
  export interface StyledProps {
14
11
  as?: keyof JSX.IntrinsicElements;
15
12
  }
16
- export declare type Interpolations<TProps extends unknown> = (BasicTemplateInterpolations | FunctionIterpolation<TProps> | CssObject<TProps> | CssObject<TProps>[])[];
13
+ export declare type Interpolations<TProps extends unknown> = (BasicTemplateInterpolations | FunctionInterpolation<TProps> | CssObject<TProps> | CssObject<TProps>[])[];
17
14
  /**
18
15
  * This allows us to take the generic `TTag` (that will be a valid `DOM` tag) and then use it to
19
16
  * define correct props based on it from `JSX.IntrinsicElements`, while also injecting our own
20
17
  * props from `StyledProps`.
21
18
  */
22
19
  export interface StyledFunctionFromTag<TTag extends keyof JSX.IntrinsicElements> {
23
- <TProps extends unknown>(css: CssObject<TProps> | CssObject<TProps>[], ...interpoltations: Interpolations<TProps>): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
20
+ <TProps extends unknown>(css: CssObject<TProps> | CssObject<TProps>[], ...interpolations: Interpolations<TProps>): React.ComponentType<TProps & JSX.IntrinsicElements[TTag] & StyledProps>;
24
21
  }
25
22
  export interface StyledFunctionFromComponent<TInheritedProps extends unknown> {
26
- <TProps extends unknown>(css: CssObject<TProps> | TemplateStringsArray, ...interpoltations: Interpolations<TProps>): React.ComponentType<TProps & StyledProps & TInheritedProps>;
23
+ <TProps extends unknown>(css: CssObject<TProps> | TemplateStringsArray, ...interpolations: Interpolations<TProps>): React.ComponentType<TProps & StyledProps & TInheritedProps>;
27
24
  }
28
25
  export declare type StyledComponentMap = {
29
26
  [Tag in keyof JSX.IntrinsicElements]: StyledFunctionFromTag<Tag>;
@@ -0,0 +1,69 @@
1
+ /**
2
+ * Flowtype definitions for index
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ import type { ComponentType } from 'react';
8
+ import type { BasicTemplateInterpolations, CssFunction, FunctionInterpolation } from '../types';
9
+ /**
10
+ * Typing for the CSS object.
11
+ */
12
+ export type CssObject<TProps> = CssFunction<FunctionInterpolation<TProps>>;
13
+ /**
14
+ * Extra props added to the output Styled Component.
15
+ */
16
+ export type StyledProps = {
17
+ as?: $Keys<$JSXIntrinsics>,
18
+ };
19
+ export type Interpolations<TProps: mixed> = (
20
+ | BasicTemplateInterpolations
21
+ | FunctionInterpolation<TProps>
22
+ | CssObject<TProps>
23
+ | CssObject<TProps>[]
24
+ )[];
25
+ /**
26
+ * This allows us to take the generic `TTag` (that will be a valid `DOM` tag) and then use it to
27
+ * define correct props based on it from `$JSXIntrinsics`, while also injecting our own
28
+ * props from `StyledProps`.
29
+ */
30
+ export interface StyledFunctionFromTag<TTag: $Keys<$JSXIntrinsics>> {
31
+ <TProps: mixed>(
32
+ css: CssObject<TProps> | $ReadOnlyArray<CssObject<TProps>>,
33
+ ...interpolations: Interpolations<TProps>
34
+ ): React$ComponentType<{
35
+ ...TProps,
36
+ ...$Exact<$ElementType<$JSXIntrinsics, TTag>>,
37
+ ...StyledProps,
38
+ }>;
39
+ }
40
+ export interface StyledFunctionFromComponent<TInheritedProps: mixed> {
41
+ <TProps: mixed>(
42
+ css: CssObject<TProps> | $ReadOnlyArray<string>,
43
+ ...interpolations: Interpolations<TProps>
44
+ ): React$ComponentType<{ ...TProps, ...StyledProps, ...TInheritedProps }>;
45
+ }
46
+ export type StyledComponentMap = $ObjMapi<$JSXIntrinsics, <Tag>(Tag) => StyledFunctionFromTag<Tag>>;
47
+ export type StyledComponentInstantiator = {
48
+ /**
49
+ * Typing to enable consumers to compose components, e.g: `styled(Component)`
50
+ */
51
+ <TInheritedProps: mixed>(
52
+ Component: ComponentType<TInheritedProps>
53
+ ): StyledFunctionFromComponent<TInheritedProps>,
54
+ ...
55
+ } & StyledComponentMap;
56
+ /**
57
+ * Create a component that ties styles to an element which comes with built-in behavior such as `ref` and `as` prop support.
58
+ *
59
+ * ```
60
+ * styled.div`font-size: 12px`; // Template literal CSS
61
+ * styled.div({ fontSize: 12 }); // Object CSS
62
+ * styled.div([{ fontSize: 12 }, `font-size: 12px;`]) // Array CSS
63
+ * styled.div({ fontSize: 12 }, `font-size: 12px`) Multi arguments CSS
64
+ * ```
65
+ *
66
+ * For more help, read the docs:
67
+ * https://compiledcssinjs.com/docs/api-styled
68
+ */
69
+ declare export var styled: StyledComponentInstantiator;
@@ -1 +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"}
1
+ {"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"}
@@ -1,13 +1,16 @@
1
- import * as CSS from 'csstype';
1
+ import type * as CSS from 'csstype';
2
2
  /**
3
3
  * Typing for the interpolations.
4
4
  */
5
5
  export declare type BasicTemplateInterpolations = string | number;
6
+ export interface FunctionInterpolation<TProps> {
7
+ (props: TProps): CSSProps | BasicTemplateInterpolations | boolean | undefined;
8
+ }
6
9
  /**
7
10
  * These are all the CSS props that will exist.
8
11
  */
9
- export declare type CSSProps = CSS.Properties<string | number>;
12
+ export declare type CSSProps = CSS.Properties<BasicTemplateInterpolations>;
10
13
  export declare type AnyKeyCssProps<TValue> = {
11
- [key: string]: AnyKeyCssProps<TValue> | CSSProps | string | number | TValue;
14
+ [key: string]: AnyKeyCssProps<TValue> | CSSProps | BasicTemplateInterpolations | TValue;
12
15
  };
13
16
  export declare type CssFunction<TValue = void> = CSSProps | AnyKeyCssProps<TValue> | TemplateStringsArray | string | boolean | undefined;
@@ -0,0 +1,29 @@
1
+ /**
2
+ * Flowtype definitions for types
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ import * as CSS from 'csstype';
8
+ /**
9
+ * Typing for the interpolations.
10
+ */
11
+ export type BasicTemplateInterpolations = string | number;
12
+ export interface FunctionInterpolation<TProps> {
13
+ (props: TProps): CSSProps | BasicTemplateInterpolations | boolean | void;
14
+ }
15
+ /**
16
+ * These are all the CSS props that will exist.
17
+ */
18
+ export type CSSProps = CSS.Properties<BasicTemplateInterpolations>;
19
+ export type AnyKeyCssProps<TValue> = {
20
+ [key: string]: AnyKeyCssProps<TValue> | CSSProps | BasicTemplateInterpolations | TValue,
21
+ ...
22
+ };
23
+ export type CssFunction<TValue = void> =
24
+ | CSSProps
25
+ | AnyKeyCssProps<TValue>
26
+ | $ReadOnlyArray<string>
27
+ | string
28
+ | boolean
29
+ | void;
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Flowtype definitions for error
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ declare export var createSetupError: () => Error;
@@ -1,5 +1,5 @@
1
- import { ReactNode } from 'react';
2
- import { CssFunction, BasicTemplateInterpolations } from '../types';
1
+ import type { ReactNode } from 'react';
2
+ import type { CssFunction, BasicTemplateInterpolations } from '../types';
3
3
  export declare type Interpolations = (BasicTemplateInterpolations | CssFunction | CssFunction[])[];
4
4
  export interface ClassNamesProps {
5
5
  children: (opts: {
@@ -0,0 +1,45 @@
1
+ /**
2
+ * Flowtype definitions for index
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ import type { Node } from 'react';
8
+ import type { CssFunction, BasicTemplateInterpolations } from '../types';
9
+ export type Interpolations = (BasicTemplateInterpolations | CssFunction<> | CssFunction<>[])[];
10
+ export interface ClassNamesProps {
11
+ children: (opts: {
12
+ css: (css: CssFunction<> | CssFunction<>[], ...interpolations: Interpolations) => string,
13
+ style: {
14
+ [key: string]: string,
15
+ ...
16
+ },
17
+ ...
18
+ }) => Node;
19
+ }
20
+ /**
21
+ * Use a component where styles are not necessarily tied to an element.
22
+ *
23
+ * ```
24
+ * // Object CSS
25
+ * <ClassNames>
26
+ * {({ css, style }) => children({ className: css({ fontSize: 12 }) })}
27
+ * </ClassNames>
28
+ *
29
+ * // Template literal CSS
30
+ * <ClassNames>
31
+ * {({ css, style }) => children({ className: css`font-size: 12px;` })}
32
+ * </ClassNames>
33
+ *
34
+ * // Array CSS
35
+ * <ClassNames>
36
+ * {({ css, style }) =>
37
+ * children({ className: css([{ fontSize: 12 }, `font-size: 12px`]) })}
38
+ * </ClassNames>
39
+ * ```
40
+ *
41
+ * For more help, read the docs:
42
+ * https://compiledcssinjs.com/docs/api-class-names
43
+ * @param props
44
+ */
45
+ declare export function ClassNames(_: ClassNamesProps): React$Node;
@@ -1,6 +1,6 @@
1
- import type { CSSProps } from '../types';
1
+ import type { BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
2
2
  /**
3
- * Create styles that can be re-used between components.
3
+ * Create styles that can be re-used between components with a template literal.
4
4
  *
5
5
  * ```
6
6
  * css`color: red;`;
@@ -12,4 +12,17 @@ import type { CSSProps } from '../types';
12
12
  * @param css
13
13
  * @param values
14
14
  */
15
- export default function css(_css: TemplateStringsArray, ..._values: (string | number)[]): CSSProps;
15
+ export default function css<T = void>(_css: TemplateStringsArray, ..._values: (BasicTemplateInterpolations | FunctionInterpolation<T>)[]): CSSProps;
16
+ /**
17
+ * Create styles that can be re-used between components with an object
18
+ *
19
+ * ```
20
+ * css({ color: 'red' });
21
+ * ```
22
+ *
23
+ * For more help, read the docs:
24
+ * https://compiledcssinjs.com/docs/api-css
25
+ *
26
+ * @param css
27
+ */
28
+ export default function css(_css: CSSProps): CSSProps;
@@ -1,17 +1,4 @@
1
1
  import { createSetupError } from '../utils/error';
2
- /**
3
- * Create styles that can be re-used between components.
4
- *
5
- * ```
6
- * css`color: red;`;
7
- * ```
8
- *
9
- * For more help, read the docs:
10
- * https://compiledcssinjs.com/docs/api-css
11
- *
12
- * @param css
13
- * @param values
14
- */
15
2
  export default function css(_css) {
16
3
  var _values = [];
17
4
  for (var _i = 1; _i < arguments.length; _i++) {
@@ -0,0 +1,35 @@
1
+ /**
2
+ * Flowtype definitions for index
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ import type { BasicTemplateInterpolations, CSSProps, FunctionInterpolation } from '../types';
8
+ /**
9
+ * Create styles that can be re-used between components with a template literal.
10
+ *
11
+ * ```
12
+ * css`color: red;`;
13
+ * ```
14
+ *
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
26
+ *
27
+ * ```
28
+ * css({ color: 'red' });
29
+ * ```
30
+ *
31
+ * For more help, read the docs:
32
+ * https://compiledcssinjs.com/docs/api-css
33
+ * @param css
34
+ */
35
+ declare export default function css(_css: CSSProps): CSSProps;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGlD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,IAA0B;IAAE,iBAA4B;SAA5B,UAA4B,EAA5B,qBAA4B,EAA5B,IAA4B;QAA5B,gCAA4B;;IAClF,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
1
+ {"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"}
@@ -1,7 +1,10 @@
1
+ import type { CssFunction, CSSProps } from './types';
2
+ export { keyframes } from './keyframes';
1
3
  export { styled } from './styled';
2
4
  export { ClassNames } from './class-names';
3
5
  export { default as css } from './css';
4
- import { CssFunction } from './types';
6
+ export type { CssFunction, CSSProps };
7
+ export type { CssObject } from './styled';
5
8
  declare module 'react' {
6
9
  interface DOMAttributes<T> {
7
10
  css?: CssFunction | CssFunction[];
package/dist/esm/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ export { keyframes } from './keyframes';
1
2
  export { styled } from './styled';
2
3
  export { ClassNames } from './class-names';
3
4
  export { default as css } from './css';
@@ -0,0 +1,40 @@
1
+ /**
2
+ * Flowtype definitions for index
3
+ * Generated by Flowgen from a Typescript Definition
4
+ * Flowgen v1.15.0
5
+ * @flow
6
+ */
7
+ import type { CssFunction, CSSProps } from './types';
8
+ declare export { keyframes } from './keyframes';
9
+ declare export { styled } from './styled';
10
+ declare export { ClassNames } from './class-names';
11
+ declare export { default as css } from './css';
12
+ export type { CssFunction, CSSProps };
13
+ export type { CssObject } from './styled';
14
+ declare module 'react' {
15
+ declare interface DOMAttributes<T> {
16
+ css?: CssFunction<> | CssFunction<>[];
17
+ }
18
+ }
19
+ declare module 'global' {
20
+ declare var JSX: typeof npm$namespace$JSX;
21
+ declare var npm$namespace$JSX: {|
22
+ IntrinsicAttributes: Class<JSX$IntrinsicAttributes>,
23
+ |};
24
+ declare interface JSX$IntrinsicAttributes {
25
+ /**
26
+ * Tie styles to an element.
27
+ * It is available when the `@compiled/react` module is in scope.
28
+ *
29
+ * ```
30
+ * css={{ fontSize: 12 }} // Object CSS
31
+ * css={`font-size: 12px;`} // Template literal CSS
32
+ * css={[{ fontSize: 12 }, `font-size: 12px;`]} // Array CSS
33
+ * ```
34
+ *
35
+ * For more help, read the docs:
36
+ * https://compiledcssinjs.com/docs/api-css-prop
37
+ */
38
+ css?: CssFunction<> | CssFunction<>[];
39
+ }
40
+ }
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAEA,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"}
@@ -0,0 +1,3 @@
1
+ export declare const fadeOut: string;
2
+ export declare const namedFadeOut: string;
3
+ export default fadeOut;
@@ -0,0 +1,12 @@
1
+ import { keyframes } from '@compiled/react';
2
+ export var fadeOut = keyframes({
3
+ from: {
4
+ opacity: 1,
5
+ },
6
+ to: {
7
+ opacity: 0,
8
+ },
9
+ });
10
+ export var namedFadeOut = fadeOut;
11
+ export default fadeOut;
12
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/keyframes/__fixtures__/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,CAAC,IAAM,OAAO,GAAG,SAAS,CAAC;IAC/B,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,OAAO,EAAE,CAAC;KACX;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,YAAY,GAAG,OAAO,CAAC;AAEpC,eAAe,OAAO,CAAC"}
@@ -0,0 +1,47 @@
1
+ import type { BasicTemplateInterpolations, CSSProps } from '../types';
2
+ export declare type KeyframeSteps = string | Record<string, CSSProps>;
3
+ /**
4
+ * Create keyframes using a tagged template expression:
5
+ *
6
+ * ```
7
+ * const fadeOut = keyframes`
8
+ * from { opacity: 1; }
9
+ * to { opacity: 0; }
10
+ * `;
11
+ * ```
12
+ *
13
+ * @param _strings The input string values
14
+ * @param _interpolations The arguments used in the expression
15
+ */
16
+ export declare function keyframes(_strings: TemplateStringsArray, ..._interpolations: BasicTemplateInterpolations[]): string;
17
+ /**
18
+ * Create keyframes using:
19
+ *
20
+ * 1. An object expression
21
+ *
22
+ * ```
23
+ * const fadeOut = keyframes({
24
+ * from: {
25
+ * opacity: 1,
26
+ * },
27
+ * to: {
28
+ * opacity: 0,
29
+ * },
30
+ * });
31
+ * ```
32
+ *
33
+ * 2. A string
34
+ *
35
+ * ```
36
+ * const fadeOut = keyframes('from { opacity: 1; } to { opacity: 0; }');
37
+ * ```
38
+ *
39
+ * 3. A template literal
40
+ *
41
+ * ```
42
+ * const fadeOut = keyframes(`from { opacity: 1; } to { opacity: 0; }`);
43
+ * ```
44
+ *
45
+ * @param _steps The waypoints along the animation sequence
46
+ */
47
+ export declare function keyframes(_steps: KeyframeSteps): string;
@@ -0,0 +1,9 @@
1
+ import { createSetupError } from '../utils/error';
2
+ export function keyframes(_stringsOrSteps) {
3
+ var _interpolations = [];
4
+ for (var _i = 1; _i < arguments.length; _i++) {
5
+ _interpolations[_i - 1] = arguments[_i];
6
+ }
7
+ throw createSetupError();
8
+ }
9
+ //# sourceMappingURL=index.js.map