@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.
- package/CHANGELOG.md +28 -1
- package/dist/browser/class-names/index.d.ts +2 -2
- package/dist/browser/class-names/index.js.flow +45 -0
- package/dist/browser/css/index.d.ts +16 -3
- package/dist/browser/css/index.js +0 -13
- package/dist/browser/css/index.js.flow +35 -0
- package/dist/browser/css/index.js.map +1 -1
- package/dist/browser/index.d.ts +4 -1
- package/dist/browser/index.js +1 -0
- package/dist/browser/index.js.flow +40 -0
- package/dist/browser/index.js.map +1 -1
- package/dist/browser/keyframes/__fixtures__/index.d.ts +3 -0
- package/dist/browser/keyframes/__fixtures__/index.js +12 -0
- package/dist/browser/keyframes/__fixtures__/index.js.map +1 -0
- package/dist/browser/keyframes/index.d.ts +47 -0
- package/dist/browser/keyframes/index.js +9 -0
- package/dist/browser/keyframes/index.js.flow +54 -0
- package/dist/browser/keyframes/index.js.map +1 -0
- package/dist/browser/runtime/ax.js.flow +27 -0
- package/dist/browser/runtime/css-custom-property.js.flow +19 -0
- package/dist/browser/runtime/dev-warnings.d.ts +0 -1
- package/dist/browser/runtime/dev-warnings.js +1 -1
- package/dist/browser/runtime/dev-warnings.js.flow +7 -0
- package/dist/browser/runtime/dev-warnings.js.map +1 -1
- package/dist/browser/runtime/index.js.flow +10 -0
- package/dist/browser/runtime/is-node.js.flow +19 -0
- package/dist/browser/runtime/sheet.d.ts +1 -1
- package/dist/browser/runtime/sheet.js.flow +36 -0
- package/dist/browser/runtime/style-cache.d.ts +1 -1
- package/dist/browser/runtime/style-cache.js.flow +19 -0
- package/dist/browser/runtime/style.d.ts +1 -1
- package/dist/browser/runtime/style.js.flow +17 -0
- package/dist/browser/runtime/types.js.flow +23 -0
- package/dist/browser/runtime.js.flow +7 -0
- package/dist/browser/styled/index.d.ts +6 -9
- package/dist/browser/styled/index.js.flow +69 -0
- package/dist/browser/styled/index.js.map +1 -1
- package/dist/browser/types.d.ts +6 -3
- package/dist/browser/types.js.flow +29 -0
- package/dist/browser/utils/error.js.flow +7 -0
- package/dist/cjs/class-names/index.d.ts +2 -2
- package/dist/cjs/class-names/index.js.flow +45 -0
- package/dist/cjs/css/index.d.ts +16 -3
- package/dist/cjs/css/index.js +0 -13
- package/dist/cjs/css/index.js.flow +35 -0
- package/dist/cjs/css/index.js.map +1 -1
- package/dist/cjs/index.d.ts +4 -1
- package/dist/cjs/index.js +3 -1
- package/dist/cjs/index.js.flow +40 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/keyframes/__fixtures__/index.d.ts +3 -0
- package/dist/cjs/keyframes/__fixtures__/index.js +15 -0
- package/dist/cjs/keyframes/__fixtures__/index.js.map +1 -0
- package/dist/cjs/keyframes/index.d.ts +47 -0
- package/dist/cjs/keyframes/index.js +13 -0
- package/dist/cjs/keyframes/index.js.flow +54 -0
- package/dist/cjs/keyframes/index.js.map +1 -0
- package/dist/cjs/runtime/ax.js.flow +27 -0
- package/dist/cjs/runtime/css-custom-property.js.flow +19 -0
- package/dist/cjs/runtime/dev-warnings.d.ts +0 -1
- package/dist/cjs/runtime/dev-warnings.js +2 -3
- package/dist/cjs/runtime/dev-warnings.js.flow +7 -0
- package/dist/cjs/runtime/dev-warnings.js.map +1 -1
- package/dist/cjs/runtime/index.js.flow +10 -0
- package/dist/cjs/runtime/is-node.js.flow +19 -0
- package/dist/cjs/runtime/sheet.d.ts +1 -1
- package/dist/cjs/runtime/sheet.js.flow +36 -0
- package/dist/cjs/runtime/style-cache.d.ts +1 -1
- package/dist/cjs/runtime/style-cache.js.flow +19 -0
- package/dist/cjs/runtime/style.d.ts +1 -1
- package/dist/cjs/runtime/style.js.flow +17 -0
- package/dist/cjs/runtime/types.js.flow +23 -0
- package/dist/cjs/runtime.js.flow +7 -0
- package/dist/cjs/styled/index.d.ts +6 -9
- package/dist/cjs/styled/index.js.flow +69 -0
- package/dist/cjs/styled/index.js.map +1 -1
- package/dist/cjs/types.d.ts +6 -3
- package/dist/cjs/types.js.flow +29 -0
- package/dist/cjs/utils/error.js.flow +7 -0
- package/dist/esm/class-names/index.d.ts +2 -2
- package/dist/esm/class-names/index.js.flow +45 -0
- package/dist/esm/css/index.d.ts +16 -3
- package/dist/esm/css/index.js +0 -13
- package/dist/esm/css/index.js.flow +35 -0
- package/dist/esm/css/index.js.map +1 -1
- package/dist/esm/index.d.ts +4 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.flow +40 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/keyframes/__fixtures__/index.d.ts +3 -0
- package/dist/esm/keyframes/__fixtures__/index.js +12 -0
- package/dist/esm/keyframes/__fixtures__/index.js.map +1 -0
- package/dist/esm/keyframes/index.d.ts +47 -0
- package/dist/esm/keyframes/index.js +9 -0
- package/dist/esm/keyframes/index.js.flow +54 -0
- package/dist/esm/keyframes/index.js.map +1 -0
- package/dist/esm/runtime/ax.js.flow +27 -0
- package/dist/esm/runtime/css-custom-property.js.flow +19 -0
- package/dist/esm/runtime/dev-warnings.d.ts +0 -1
- package/dist/esm/runtime/dev-warnings.js +1 -1
- package/dist/esm/runtime/dev-warnings.js.flow +7 -0
- package/dist/esm/runtime/dev-warnings.js.map +1 -1
- package/dist/esm/runtime/index.js.flow +10 -0
- package/dist/esm/runtime/is-node.js.flow +19 -0
- package/dist/esm/runtime/sheet.d.ts +1 -1
- package/dist/esm/runtime/sheet.js.flow +36 -0
- package/dist/esm/runtime/style-cache.d.ts +1 -1
- package/dist/esm/runtime/style-cache.js.flow +19 -0
- package/dist/esm/runtime/style.d.ts +1 -1
- package/dist/esm/runtime/style.js.flow +17 -0
- package/dist/esm/runtime/types.js.flow +23 -0
- package/dist/esm/runtime.js.flow +7 -0
- package/dist/esm/styled/index.d.ts +6 -9
- package/dist/esm/styled/index.js.flow +69 -0
- package/dist/esm/styled/index.js.map +1 -1
- package/dist/esm/types.d.ts +6 -3
- package/dist/esm/types.js.flow +29 -0
- package/dist/esm/utils/error.js.flow +7 -0
- package/package.json +18 -20
- package/src/class-names/__tests__/types.test.js.flow +28 -0
- package/src/class-names/index.js.flow +45 -0
- package/src/class-names/index.tsx +2 -2
- package/src/css/__tests__/index.test.tsx +41 -0
- package/src/css/__tests__/types.test.js.flow +17 -0
- package/src/css/index.js.flow +35 -0
- package/src/css/index.tsx +25 -3
- package/src/index.js.flow +40 -0
- package/src/index.tsx +5 -2
- package/src/keyframes/__fixtures__/index.tsx +14 -0
- package/src/keyframes/__tests__/index.test.tsx +324 -0
- package/src/keyframes/__tests__/types.test.js.flow +31 -0
- package/src/keyframes/index.js.flow +54 -0
- package/src/keyframes/index.tsx +61 -0
- package/src/runtime/__tests__/style.test.tsx +91 -57
- package/src/runtime/ax.js.flow +27 -0
- package/src/runtime/css-custom-property.js.flow +19 -0
- package/src/runtime/dev-warnings.js.flow +7 -0
- package/src/runtime/dev-warnings.tsx +1 -1
- package/src/runtime/index.js.flow +10 -0
- package/src/runtime/is-node.js.flow +19 -0
- package/src/runtime/sheet.js.flow +36 -0
- package/src/runtime/sheet.tsx +1 -1
- package/src/runtime/style-cache.js.flow +19 -0
- package/src/runtime/style-cache.tsx +1 -1
- package/src/runtime/style.js.flow +17 -0
- package/src/runtime/style.tsx +1 -1
- package/src/runtime/types.js.flow +23 -0
- package/src/runtime.js.flow +7 -0
- package/src/styled/__tests__/types.test.js.flow +30 -0
- package/src/styled/index.js.flow +69 -0
- package/src/styled/index.tsx +6 -10
- package/src/types.js.flow +29 -0
- package/src/types.tsx +7 -3
- package/src/utils/error.js.flow +7 -0
- package/dist/browser/codemods/codemods-helpers.d.ts +0 -60
- package/dist/browser/codemods/codemods-helpers.js +0 -201
- package/dist/browser/codemods/codemods-helpers.js.map +0 -1
- package/dist/browser/codemods/constants.d.ts +0 -3
- package/dist/browser/codemods/constants.js +0 -4
- package/dist/browser/codemods/constants.js.map +0 -1
- package/dist/browser/codemods/emotion-to-compiled/emotion-to-compiled.d.ts +0 -3
- package/dist/browser/codemods/emotion-to-compiled/emotion-to-compiled.js +0 -178
- package/dist/browser/codemods/emotion-to-compiled/emotion-to-compiled.js.map +0 -1
- package/dist/browser/codemods/emotion-to-compiled/index.d.ts +0 -1
- package/dist/browser/codemods/emotion-to-compiled/index.js +0 -2
- package/dist/browser/codemods/emotion-to-compiled/index.js.map +0 -1
- package/dist/browser/codemods/styled-components-to-compiled/index.d.ts +0 -1
- package/dist/browser/codemods/styled-components-to-compiled/index.js +0 -2
- package/dist/browser/codemods/styled-components-to-compiled/index.js.map +0 -1
- package/dist/browser/codemods/styled-components-to-compiled/styled-components-to-compiled.d.ts +0 -3
- package/dist/browser/codemods/styled-components-to-compiled/styled-components-to-compiled.js +0 -33
- package/dist/browser/codemods/styled-components-to-compiled/styled-components-to-compiled.js.map +0 -1
- package/dist/cjs/codemods/codemods-helpers.d.ts +0 -60
- package/dist/cjs/codemods/codemods-helpers.js +0 -217
- package/dist/cjs/codemods/codemods-helpers.js.map +0 -1
- package/dist/cjs/codemods/constants.d.ts +0 -3
- package/dist/cjs/codemods/constants.js +0 -7
- package/dist/cjs/codemods/constants.js.map +0 -1
- package/dist/cjs/codemods/emotion-to-compiled/emotion-to-compiled.d.ts +0 -3
- package/dist/cjs/codemods/emotion-to-compiled/emotion-to-compiled.js +0 -180
- package/dist/cjs/codemods/emotion-to-compiled/emotion-to-compiled.js.map +0 -1
- package/dist/cjs/codemods/emotion-to-compiled/index.d.ts +0 -1
- package/dist/cjs/codemods/emotion-to-compiled/index.js +0 -9
- package/dist/cjs/codemods/emotion-to-compiled/index.js.map +0 -1
- package/dist/cjs/codemods/styled-components-to-compiled/index.d.ts +0 -1
- package/dist/cjs/codemods/styled-components-to-compiled/index.js +0 -9
- package/dist/cjs/codemods/styled-components-to-compiled/index.js.map +0 -1
- package/dist/cjs/codemods/styled-components-to-compiled/styled-components-to-compiled.d.ts +0 -3
- package/dist/cjs/codemods/styled-components-to-compiled/styled-components-to-compiled.js +0 -35
- package/dist/cjs/codemods/styled-components-to-compiled/styled-components-to-compiled.js.map +0 -1
- package/dist/esm/codemods/codemods-helpers.d.ts +0 -60
- package/dist/esm/codemods/codemods-helpers.js +0 -201
- package/dist/esm/codemods/codemods-helpers.js.map +0 -1
- package/dist/esm/codemods/constants.d.ts +0 -3
- package/dist/esm/codemods/constants.js +0 -4
- package/dist/esm/codemods/constants.js.map +0 -1
- package/dist/esm/codemods/emotion-to-compiled/emotion-to-compiled.d.ts +0 -3
- package/dist/esm/codemods/emotion-to-compiled/emotion-to-compiled.js +0 -178
- package/dist/esm/codemods/emotion-to-compiled/emotion-to-compiled.js.map +0 -1
- package/dist/esm/codemods/emotion-to-compiled/index.d.ts +0 -1
- package/dist/esm/codemods/emotion-to-compiled/index.js +0 -2
- package/dist/esm/codemods/emotion-to-compiled/index.js.map +0 -1
- package/dist/esm/codemods/styled-components-to-compiled/index.d.ts +0 -1
- package/dist/esm/codemods/styled-components-to-compiled/index.js +0 -2
- package/dist/esm/codemods/styled-components-to-compiled/index.js.map +0 -1
- package/dist/esm/codemods/styled-components-to-compiled/styled-components-to-compiled.d.ts +0 -3
- package/dist/esm/codemods/styled-components-to-compiled/styled-components-to-compiled.js +0 -33
- package/dist/esm/codemods/styled-components-to-compiled/styled-components-to-compiled.js.map +0 -1
- package/src/codemods/README.md +0 -8
- package/src/codemods/codemods-helpers.tsx +0 -369
- package/src/codemods/constants.tsx +0 -3
- package/src/codemods/emotion-to-compiled/README.md +0 -71
- package/src/codemods/emotion-to-compiled/__tests__/emotion-to-compiled.test.tsx +0 -526
- package/src/codemods/emotion-to-compiled/emotion-to-compiled.tsx +0 -249
- package/src/codemods/emotion-to-compiled/index.tsx +0 -1
- package/src/codemods/styled-components-to-compiled/README.md +0 -37
- package/src/codemods/styled-components-to-compiled/__tests__/styled-components-to-compiled.test.tsx +0 -109
- package/src/codemods/styled-components-to-compiled/index.tsx +0 -1
- 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;
|
|
@@ -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;
|
|
@@ -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;
|
|
@@ -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;
|
|
@@ -1,29 +1,26 @@
|
|
|
1
|
-
import { ComponentType } from 'react';
|
|
2
|
-
import { CssFunction,
|
|
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<
|
|
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 |
|
|
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>[], ...
|
|
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, ...
|
|
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;
|
|
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"}
|
package/dist/cjs/types.d.ts
CHANGED
|
@@ -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<
|
|
12
|
+
export declare type CSSProps = CSS.Properties<BasicTemplateInterpolations>;
|
|
10
13
|
export declare type AnyKeyCssProps<TValue> = {
|
|
11
|
-
[key: string]: AnyKeyCssProps<TValue> | CSSProps |
|
|
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;
|
|
@@ -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;
|
package/dist/esm/css/index.d.ts
CHANGED
|
@@ -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: (
|
|
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;
|
package/dist/esm/css/index.js
CHANGED
|
@@ -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;
|
|
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"}
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -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
|
-
|
|
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
|
@@ -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
|
+
}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"
|
|
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 @@
|
|
|
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
|