@compiled/react 0.14.0 → 0.15.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.
- package/dist/browser/css-map/index.d.ts +94 -3
- package/dist/browser/css-map/index.js +17 -0
- package/dist/browser/css-map/index.js.flow +104 -5
- package/dist/browser/css-map/index.js.map +1 -1
- package/dist/browser/css-map/pseudos.d.ts +1 -0
- package/dist/browser/css-map/pseudos.js +5 -0
- package/dist/browser/css-map/pseudos.js.flow +57 -0
- package/dist/browser/css-map/pseudos.js.map +1 -0
- package/dist/cjs/css-map/index.d.ts +94 -3
- package/dist/cjs/css-map/index.js +17 -0
- package/dist/cjs/css-map/index.js.flow +104 -5
- package/dist/cjs/css-map/index.js.map +1 -1
- package/dist/cjs/css-map/pseudos.d.ts +1 -0
- package/dist/cjs/css-map/pseudos.js +6 -0
- package/dist/cjs/css-map/pseudos.js.flow +57 -0
- package/dist/cjs/css-map/pseudos.js.map +1 -0
- package/dist/esm/css-map/index.d.ts +94 -3
- package/dist/esm/css-map/index.js +17 -0
- package/dist/esm/css-map/index.js.flow +104 -5
- package/dist/esm/css-map/index.js.map +1 -1
- package/dist/esm/css-map/pseudos.d.ts +1 -0
- package/dist/esm/css-map/pseudos.js +5 -0
- package/dist/esm/css-map/pseudos.js.flow +57 -0
- package/dist/esm/css-map/pseudos.js.map +1 -0
- package/package.json +1 -1
- package/src/css-map/index.js.flow +104 -5
- package/src/css-map/index.ts +104 -5
- package/src/css-map/pseudos.js.flow +57 -0
- package/src/css-map/pseudos.ts +59 -0
|
@@ -1,4 +1,96 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { Properties, AtRules } from 'csstype';
|
|
2
|
+
import type { Pseudos } from './pseudos';
|
|
3
|
+
/**
|
|
4
|
+
* These are all the CSS props that will exist.
|
|
5
|
+
* Only 'string' and 'number' are valid CSS values.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```
|
|
9
|
+
* const style: CssProps = {
|
|
10
|
+
* color: 'red',
|
|
11
|
+
* margin: 10,
|
|
12
|
+
* };
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
type CssProps = Readonly<Properties<string | number>>;
|
|
16
|
+
type AllPseudos = {
|
|
17
|
+
[key in Pseudos]?: CssProps & AllPseudos;
|
|
18
|
+
};
|
|
19
|
+
type AtRuleSecondHalf = string;
|
|
20
|
+
type WhitelistedAtRule = {
|
|
21
|
+
[atRuleFirstHalf in AtRules]?: {
|
|
22
|
+
[atRuleSecondHalf in AtRuleSecondHalf]: CssProps & AllPseudos & WhitelistedAtRule;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
type WhitelistedSelector = AllPseudos & WhitelistedAtRule;
|
|
26
|
+
type ExtendedSelector = {
|
|
27
|
+
[key: string]: CssProps | ExtendedSelector;
|
|
28
|
+
} & {
|
|
29
|
+
/**
|
|
30
|
+
* Using `selectors` is not valid here - you cannot nest a `selectors` object
|
|
31
|
+
* inside another `selectors` object.
|
|
32
|
+
*/
|
|
33
|
+
selectors?: never;
|
|
34
|
+
};
|
|
35
|
+
type ExtendedSelectors = {
|
|
36
|
+
/**
|
|
37
|
+
* Provides a way to use selectors that have not been explicitly whitelisted
|
|
38
|
+
* in cssMap.
|
|
39
|
+
*
|
|
40
|
+
* This does not provide any type-checking for the selectors (thus allowing
|
|
41
|
+
* more expressive selectors), though this is more flexible and allows
|
|
42
|
+
* nesting selectors in other selectors.
|
|
43
|
+
*
|
|
44
|
+
* A selector defined both outside of the `selectors` object and
|
|
45
|
+
* inside the `selectors` object is a runtime error.
|
|
46
|
+
*
|
|
47
|
+
* Note that you cannot nest a `selectors` object inside another
|
|
48
|
+
* `selectors` object.
|
|
49
|
+
*
|
|
50
|
+
* Only use if absolutely necessary.
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* ```
|
|
54
|
+
* const myMap = cssMap({
|
|
55
|
+
* danger: {
|
|
56
|
+
* color: 'red',
|
|
57
|
+
* '@media': {
|
|
58
|
+
* '(min-width: 100px)': {
|
|
59
|
+
* font-size: '1.5em',
|
|
60
|
+
* },
|
|
61
|
+
* },
|
|
62
|
+
* '&:hover': {
|
|
63
|
+
* color: 'pink',
|
|
64
|
+
* },
|
|
65
|
+
* selectors: {
|
|
66
|
+
* '&:not(:active)': {
|
|
67
|
+
* backgroundColor: 'yellow',
|
|
68
|
+
* }
|
|
69
|
+
* },
|
|
70
|
+
* },
|
|
71
|
+
* success: {
|
|
72
|
+
* color: 'green',
|
|
73
|
+
* '@media': {
|
|
74
|
+
* '(min-width: 100px)': {
|
|
75
|
+
* font-size: '1.3em',
|
|
76
|
+
* },
|
|
77
|
+
* },
|
|
78
|
+
* '&:hover': {
|
|
79
|
+
* color: '#8f8',
|
|
80
|
+
* },
|
|
81
|
+
* selectors: {
|
|
82
|
+
* '&:not(:active)': {
|
|
83
|
+
* backgroundColor: 'white',
|
|
84
|
+
* }
|
|
85
|
+
* },
|
|
86
|
+
* },
|
|
87
|
+
* });
|
|
88
|
+
* ```
|
|
89
|
+
*/
|
|
90
|
+
selectors?: ExtendedSelector;
|
|
91
|
+
};
|
|
92
|
+
type Variants<VariantName extends string> = Record<VariantName, CssProps & WhitelistedSelector & ExtendedSelectors>;
|
|
93
|
+
type ReturnType<VariantName extends string> = Record<VariantName, CssProps>;
|
|
2
94
|
/**
|
|
3
95
|
* ## cssMap
|
|
4
96
|
*
|
|
@@ -16,6 +108,5 @@ import type { CSSProps, CssObject } from '../types';
|
|
|
16
108
|
* <Component borderStyle="solid" />
|
|
17
109
|
* ```
|
|
18
110
|
*/
|
|
19
|
-
|
|
20
|
-
export default function cssMap<T extends string, TProps = unknown>(_styles: Record<T, CssObject<TProps> | CssObject<TProps>[]>): Readonly<returnType<T, TProps>>;
|
|
111
|
+
export default function cssMap<T extends string>(_styles: Variants<T>): Readonly<ReturnType<T>>;
|
|
21
112
|
export {};
|
|
@@ -1,4 +1,21 @@
|
|
|
1
1
|
import { createSetupError } from '../utils/error';
|
|
2
|
+
/**
|
|
3
|
+
* ## cssMap
|
|
4
|
+
*
|
|
5
|
+
* Creates a collection of named CSS rules that are statically typed and useable with other Compiled APIs.
|
|
6
|
+
* For further details [read the documentation](https://compiledcssinjs.com/docs/api-cssmap).
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```
|
|
10
|
+
* const borderStyleMap = cssMap({
|
|
11
|
+
* none: { borderStyle: 'none' },
|
|
12
|
+
* solid: { borderStyle: 'solid' },
|
|
13
|
+
* });
|
|
14
|
+
* const Component = ({ borderStyle }) => <div css={css(borderStyleMap[borderStyle])} />
|
|
15
|
+
*
|
|
16
|
+
* <Component borderStyle="solid" />
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
2
19
|
export default function cssMap(_styles) {
|
|
3
20
|
throw createSetupError();
|
|
4
21
|
}
|
|
@@ -4,7 +4,109 @@
|
|
|
4
4
|
* Flowgen v1.21.0
|
|
5
5
|
* @flow
|
|
6
6
|
*/
|
|
7
|
-
import type {
|
|
7
|
+
import type { Properties, AtRules } from 'csstype';
|
|
8
|
+
import type { Pseudos } from './pseudos';
|
|
9
|
+
/**
|
|
10
|
+
* These are all the CSS props that will exist.
|
|
11
|
+
* Only 'string' and 'number' are valid CSS values.
|
|
12
|
+
* @example ```
|
|
13
|
+
* const style: CssProps = {
|
|
14
|
+
* color: 'red',
|
|
15
|
+
* margin: 10,
|
|
16
|
+
* };
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
declare type CssProps = $ReadOnly<Properties<string | number>>;
|
|
20
|
+
declare type AllPseudos = $ObjMapi<
|
|
21
|
+
{ [k: Pseudos]: any },
|
|
22
|
+
<key>(key) => { ...CssProps, ...AllPseudos }
|
|
23
|
+
>;
|
|
24
|
+
declare type AtRuleSecondHalf = string;
|
|
25
|
+
declare type WhitelistedAtRule = $ObjMapi<
|
|
26
|
+
{ [k: AtRules]: any },
|
|
27
|
+
<atRuleFirstHalf>(atRuleFirstHalf) => $ObjMapi<
|
|
28
|
+
{ [k: AtRuleSecondHalf]: any },
|
|
29
|
+
<atRuleSecondHalf>(atRuleSecondHalf) => {
|
|
30
|
+
...CssProps,
|
|
31
|
+
...AllPseudos,
|
|
32
|
+
...WhitelistedAtRule,
|
|
33
|
+
}
|
|
34
|
+
>
|
|
35
|
+
>;
|
|
36
|
+
declare type WhitelistedSelector = { ...AllPseudos, ...WhitelistedAtRule };
|
|
37
|
+
declare type ExtendedSelector = {
|
|
38
|
+
...{
|
|
39
|
+
[key: string]: CssProps | ExtendedSelector,
|
|
40
|
+
},
|
|
41
|
+
...{
|
|
42
|
+
/**
|
|
43
|
+
* Using `selectors` is not valid here - you cannot nest a `selectors` object
|
|
44
|
+
* inside another `selectors` object.
|
|
45
|
+
*/
|
|
46
|
+
selectors?: empty,
|
|
47
|
+
...
|
|
48
|
+
},
|
|
49
|
+
};
|
|
50
|
+
declare type ExtendedSelectors = {
|
|
51
|
+
/**
|
|
52
|
+
* Provides a way to use selectors that have not been explicitly whitelisted
|
|
53
|
+
* in cssMap.
|
|
54
|
+
*
|
|
55
|
+
* This does not provide any type-checking for the selectors (thus allowing
|
|
56
|
+
* more expressive selectors), though this is more flexible and allows
|
|
57
|
+
* nesting selectors in other selectors.
|
|
58
|
+
*
|
|
59
|
+
* A selector defined both outside of the `selectors` object and
|
|
60
|
+
* inside the `selectors` object is a runtime error.
|
|
61
|
+
*
|
|
62
|
+
* Note that you cannot nest a `selectors` object inside another
|
|
63
|
+
* `selectors` object.
|
|
64
|
+
*
|
|
65
|
+
* Only use if absolutely necessary.
|
|
66
|
+
* @example ```
|
|
67
|
+
* const myMap = cssMap({
|
|
68
|
+
* danger: {
|
|
69
|
+
* color: 'red',
|
|
70
|
+
* '@media': {
|
|
71
|
+
* '(min-width: 100px)': {
|
|
72
|
+
* font-size: '1.5em',
|
|
73
|
+
* },
|
|
74
|
+
* },
|
|
75
|
+
* '&:hover': {
|
|
76
|
+
* color: 'pink',
|
|
77
|
+
* },
|
|
78
|
+
* selectors: {
|
|
79
|
+
* '&:not(:active)': {
|
|
80
|
+
* backgroundColor: 'yellow',
|
|
81
|
+
* }
|
|
82
|
+
* },
|
|
83
|
+
* },
|
|
84
|
+
* success: {
|
|
85
|
+
* color: 'green',
|
|
86
|
+
* '@media': {
|
|
87
|
+
* '(min-width: 100px)': {
|
|
88
|
+
* font-size: '1.3em',
|
|
89
|
+
* },
|
|
90
|
+
* },
|
|
91
|
+
* '&:hover': {
|
|
92
|
+
* color: '#8f8',
|
|
93
|
+
* },
|
|
94
|
+
* selectors: {
|
|
95
|
+
* '&:not(:active)': {
|
|
96
|
+
* backgroundColor: 'white',
|
|
97
|
+
* }
|
|
98
|
+
* },
|
|
99
|
+
* },
|
|
100
|
+
* });
|
|
101
|
+
* ```
|
|
102
|
+
*/
|
|
103
|
+
selectors?: ExtendedSelector,
|
|
104
|
+
...
|
|
105
|
+
};
|
|
106
|
+
declare type Variants<VariantName: string> = {
|
|
107
|
+
[key: VariantName]: { ...CssProps, ...WhitelistedSelector, ...ExtendedSelectors },
|
|
108
|
+
};
|
|
109
|
+
declare type ReturnType<VariantName: string> = { [key: VariantName]: CssProps };
|
|
8
110
|
/**
|
|
9
111
|
* ## cssMap
|
|
10
112
|
*
|
|
@@ -20,7 +122,4 @@ import type { CSSProps, CssObject } from '../types';
|
|
|
20
122
|
* <Component borderStyle="solid" />
|
|
21
123
|
* ```
|
|
22
124
|
*/
|
|
23
|
-
declare
|
|
24
|
-
declare export default function cssMap<T: string, TProps>(_styles: {
|
|
25
|
-
[key: T]: CssObject<TProps> | CssObject<TProps>[],
|
|
26
|
-
}): $ReadOnly<returnType<T, TProps>>;
|
|
125
|
+
declare export default function cssMap<T: string>(_styles: Variants<T>): $ReadOnly<ReturnType<T>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css-map/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css-map/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAuGlD;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAmB,OAAoB;IACnE,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type Pseudos = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::target-text' | '&::view-transition' | '&:active' | '&:autofill' | '&:blank' | '&:checked' | '&:default' | '&:defined' | '&:disabled' | '&:empty' | '&:enabled' | '&:first' | '&:focus' | '&:focus-visible' | '&:focus-within' | '&:fullscreen' | '&:hover' | '&:in-range' | '&:indeterminate' | '&:invalid' | '&:left' | '&:link' | '&:local-link' | '&:optional' | '&:out-of-range' | '&:paused' | '&:picture-in-picture' | '&:placeholder-shown' | '&:playing' | '&:read-only' | '&:read-write' | '&:required' | '&:right' | '&:target' | '&:user-invalid' | '&:user-valid' | '&:valid' | '&:visited';
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Flowtype definitions for pseudos
|
|
3
|
+
* Generated by Flowgen from a Typescript Definition
|
|
4
|
+
* Flowgen v1.21.0
|
|
5
|
+
* @flow
|
|
6
|
+
*/
|
|
7
|
+
export type Pseudos =
|
|
8
|
+
| '&::after'
|
|
9
|
+
| '&::backdrop'
|
|
10
|
+
| '&::before'
|
|
11
|
+
| '&::cue'
|
|
12
|
+
| '&::cue-region'
|
|
13
|
+
| '&::first-letter'
|
|
14
|
+
| '&::first-line'
|
|
15
|
+
| '&::grammar-error'
|
|
16
|
+
| '&::marker'
|
|
17
|
+
| '&::placeholder'
|
|
18
|
+
| '&::selection'
|
|
19
|
+
| '&::spelling-error'
|
|
20
|
+
| '&::target-text'
|
|
21
|
+
| '&::view-transition'
|
|
22
|
+
| '&:active'
|
|
23
|
+
| '&:autofill'
|
|
24
|
+
| '&:blank'
|
|
25
|
+
| '&:checked'
|
|
26
|
+
| '&:default'
|
|
27
|
+
| '&:defined'
|
|
28
|
+
| '&:disabled'
|
|
29
|
+
| '&:empty'
|
|
30
|
+
| '&:enabled'
|
|
31
|
+
| '&:first'
|
|
32
|
+
| '&:focus'
|
|
33
|
+
| '&:focus-visible'
|
|
34
|
+
| '&:focus-within'
|
|
35
|
+
| '&:fullscreen'
|
|
36
|
+
| '&:hover'
|
|
37
|
+
| '&:in-range'
|
|
38
|
+
| '&:indeterminate'
|
|
39
|
+
| '&:invalid'
|
|
40
|
+
| '&:left'
|
|
41
|
+
| '&:link'
|
|
42
|
+
| '&:local-link'
|
|
43
|
+
| '&:optional'
|
|
44
|
+
| '&:out-of-range'
|
|
45
|
+
| '&:paused'
|
|
46
|
+
| '&:picture-in-picture'
|
|
47
|
+
| '&:placeholder-shown'
|
|
48
|
+
| '&:playing'
|
|
49
|
+
| '&:read-only'
|
|
50
|
+
| '&:read-write'
|
|
51
|
+
| '&:required'
|
|
52
|
+
| '&:right'
|
|
53
|
+
| '&:target'
|
|
54
|
+
| '&:user-invalid'
|
|
55
|
+
| '&:user-valid'
|
|
56
|
+
| '&:valid'
|
|
57
|
+
| '&:visited';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pseudos.js","sourceRoot":"","sources":["../../../src/css-map/pseudos.ts"],"names":[],"mappings":"AAAA,8DAA8D;AAC9D,uEAAuE;AACvE,+BAA+B"}
|
|
@@ -1,4 +1,96 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { Properties, AtRules } from 'csstype';
|
|
2
|
+
import type { Pseudos } from './pseudos';
|
|
3
|
+
/**
|
|
4
|
+
* These are all the CSS props that will exist.
|
|
5
|
+
* Only 'string' and 'number' are valid CSS values.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```
|
|
9
|
+
* const style: CssProps = {
|
|
10
|
+
* color: 'red',
|
|
11
|
+
* margin: 10,
|
|
12
|
+
* };
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
type CssProps = Readonly<Properties<string | number>>;
|
|
16
|
+
type AllPseudos = {
|
|
17
|
+
[key in Pseudos]?: CssProps & AllPseudos;
|
|
18
|
+
};
|
|
19
|
+
type AtRuleSecondHalf = string;
|
|
20
|
+
type WhitelistedAtRule = {
|
|
21
|
+
[atRuleFirstHalf in AtRules]?: {
|
|
22
|
+
[atRuleSecondHalf in AtRuleSecondHalf]: CssProps & AllPseudos & WhitelistedAtRule;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
type WhitelistedSelector = AllPseudos & WhitelistedAtRule;
|
|
26
|
+
type ExtendedSelector = {
|
|
27
|
+
[key: string]: CssProps | ExtendedSelector;
|
|
28
|
+
} & {
|
|
29
|
+
/**
|
|
30
|
+
* Using `selectors` is not valid here - you cannot nest a `selectors` object
|
|
31
|
+
* inside another `selectors` object.
|
|
32
|
+
*/
|
|
33
|
+
selectors?: never;
|
|
34
|
+
};
|
|
35
|
+
type ExtendedSelectors = {
|
|
36
|
+
/**
|
|
37
|
+
* Provides a way to use selectors that have not been explicitly whitelisted
|
|
38
|
+
* in cssMap.
|
|
39
|
+
*
|
|
40
|
+
* This does not provide any type-checking for the selectors (thus allowing
|
|
41
|
+
* more expressive selectors), though this is more flexible and allows
|
|
42
|
+
* nesting selectors in other selectors.
|
|
43
|
+
*
|
|
44
|
+
* A selector defined both outside of the `selectors` object and
|
|
45
|
+
* inside the `selectors` object is a runtime error.
|
|
46
|
+
*
|
|
47
|
+
* Note that you cannot nest a `selectors` object inside another
|
|
48
|
+
* `selectors` object.
|
|
49
|
+
*
|
|
50
|
+
* Only use if absolutely necessary.
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* ```
|
|
54
|
+
* const myMap = cssMap({
|
|
55
|
+
* danger: {
|
|
56
|
+
* color: 'red',
|
|
57
|
+
* '@media': {
|
|
58
|
+
* '(min-width: 100px)': {
|
|
59
|
+
* font-size: '1.5em',
|
|
60
|
+
* },
|
|
61
|
+
* },
|
|
62
|
+
* '&:hover': {
|
|
63
|
+
* color: 'pink',
|
|
64
|
+
* },
|
|
65
|
+
* selectors: {
|
|
66
|
+
* '&:not(:active)': {
|
|
67
|
+
* backgroundColor: 'yellow',
|
|
68
|
+
* }
|
|
69
|
+
* },
|
|
70
|
+
* },
|
|
71
|
+
* success: {
|
|
72
|
+
* color: 'green',
|
|
73
|
+
* '@media': {
|
|
74
|
+
* '(min-width: 100px)': {
|
|
75
|
+
* font-size: '1.3em',
|
|
76
|
+
* },
|
|
77
|
+
* },
|
|
78
|
+
* '&:hover': {
|
|
79
|
+
* color: '#8f8',
|
|
80
|
+
* },
|
|
81
|
+
* selectors: {
|
|
82
|
+
* '&:not(:active)': {
|
|
83
|
+
* backgroundColor: 'white',
|
|
84
|
+
* }
|
|
85
|
+
* },
|
|
86
|
+
* },
|
|
87
|
+
* });
|
|
88
|
+
* ```
|
|
89
|
+
*/
|
|
90
|
+
selectors?: ExtendedSelector;
|
|
91
|
+
};
|
|
92
|
+
type Variants<VariantName extends string> = Record<VariantName, CssProps & WhitelistedSelector & ExtendedSelectors>;
|
|
93
|
+
type ReturnType<VariantName extends string> = Record<VariantName, CssProps>;
|
|
2
94
|
/**
|
|
3
95
|
* ## cssMap
|
|
4
96
|
*
|
|
@@ -16,6 +108,5 @@ import type { CSSProps, CssObject } from '../types';
|
|
|
16
108
|
* <Component borderStyle="solid" />
|
|
17
109
|
* ```
|
|
18
110
|
*/
|
|
19
|
-
|
|
20
|
-
export default function cssMap<T extends string, TProps = unknown>(_styles: Record<T, CssObject<TProps> | CssObject<TProps>[]>): Readonly<returnType<T, TProps>>;
|
|
111
|
+
export default function cssMap<T extends string>(_styles: Variants<T>): Readonly<ReturnType<T>>;
|
|
21
112
|
export {};
|
|
@@ -1,6 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const error_1 = require("../utils/error");
|
|
4
|
+
/**
|
|
5
|
+
* ## cssMap
|
|
6
|
+
*
|
|
7
|
+
* Creates a collection of named CSS rules that are statically typed and useable with other Compiled APIs.
|
|
8
|
+
* For further details [read the documentation](https://compiledcssinjs.com/docs/api-cssmap).
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```
|
|
12
|
+
* const borderStyleMap = cssMap({
|
|
13
|
+
* none: { borderStyle: 'none' },
|
|
14
|
+
* solid: { borderStyle: 'solid' },
|
|
15
|
+
* });
|
|
16
|
+
* const Component = ({ borderStyle }) => <div css={css(borderStyleMap[borderStyle])} />
|
|
17
|
+
*
|
|
18
|
+
* <Component borderStyle="solid" />
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
4
21
|
function cssMap(_styles) {
|
|
5
22
|
throw (0, error_1.createSetupError)();
|
|
6
23
|
}
|
|
@@ -4,7 +4,109 @@
|
|
|
4
4
|
* Flowgen v1.21.0
|
|
5
5
|
* @flow
|
|
6
6
|
*/
|
|
7
|
-
import type {
|
|
7
|
+
import type { Properties, AtRules } from 'csstype';
|
|
8
|
+
import type { Pseudos } from './pseudos';
|
|
9
|
+
/**
|
|
10
|
+
* These are all the CSS props that will exist.
|
|
11
|
+
* Only 'string' and 'number' are valid CSS values.
|
|
12
|
+
* @example ```
|
|
13
|
+
* const style: CssProps = {
|
|
14
|
+
* color: 'red',
|
|
15
|
+
* margin: 10,
|
|
16
|
+
* };
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
declare type CssProps = $ReadOnly<Properties<string | number>>;
|
|
20
|
+
declare type AllPseudos = $ObjMapi<
|
|
21
|
+
{ [k: Pseudos]: any },
|
|
22
|
+
<key>(key) => { ...CssProps, ...AllPseudos }
|
|
23
|
+
>;
|
|
24
|
+
declare type AtRuleSecondHalf = string;
|
|
25
|
+
declare type WhitelistedAtRule = $ObjMapi<
|
|
26
|
+
{ [k: AtRules]: any },
|
|
27
|
+
<atRuleFirstHalf>(atRuleFirstHalf) => $ObjMapi<
|
|
28
|
+
{ [k: AtRuleSecondHalf]: any },
|
|
29
|
+
<atRuleSecondHalf>(atRuleSecondHalf) => {
|
|
30
|
+
...CssProps,
|
|
31
|
+
...AllPseudos,
|
|
32
|
+
...WhitelistedAtRule,
|
|
33
|
+
}
|
|
34
|
+
>
|
|
35
|
+
>;
|
|
36
|
+
declare type WhitelistedSelector = { ...AllPseudos, ...WhitelistedAtRule };
|
|
37
|
+
declare type ExtendedSelector = {
|
|
38
|
+
...{
|
|
39
|
+
[key: string]: CssProps | ExtendedSelector,
|
|
40
|
+
},
|
|
41
|
+
...{
|
|
42
|
+
/**
|
|
43
|
+
* Using `selectors` is not valid here - you cannot nest a `selectors` object
|
|
44
|
+
* inside another `selectors` object.
|
|
45
|
+
*/
|
|
46
|
+
selectors?: empty,
|
|
47
|
+
...
|
|
48
|
+
},
|
|
49
|
+
};
|
|
50
|
+
declare type ExtendedSelectors = {
|
|
51
|
+
/**
|
|
52
|
+
* Provides a way to use selectors that have not been explicitly whitelisted
|
|
53
|
+
* in cssMap.
|
|
54
|
+
*
|
|
55
|
+
* This does not provide any type-checking for the selectors (thus allowing
|
|
56
|
+
* more expressive selectors), though this is more flexible and allows
|
|
57
|
+
* nesting selectors in other selectors.
|
|
58
|
+
*
|
|
59
|
+
* A selector defined both outside of the `selectors` object and
|
|
60
|
+
* inside the `selectors` object is a runtime error.
|
|
61
|
+
*
|
|
62
|
+
* Note that you cannot nest a `selectors` object inside another
|
|
63
|
+
* `selectors` object.
|
|
64
|
+
*
|
|
65
|
+
* Only use if absolutely necessary.
|
|
66
|
+
* @example ```
|
|
67
|
+
* const myMap = cssMap({
|
|
68
|
+
* danger: {
|
|
69
|
+
* color: 'red',
|
|
70
|
+
* '@media': {
|
|
71
|
+
* '(min-width: 100px)': {
|
|
72
|
+
* font-size: '1.5em',
|
|
73
|
+
* },
|
|
74
|
+
* },
|
|
75
|
+
* '&:hover': {
|
|
76
|
+
* color: 'pink',
|
|
77
|
+
* },
|
|
78
|
+
* selectors: {
|
|
79
|
+
* '&:not(:active)': {
|
|
80
|
+
* backgroundColor: 'yellow',
|
|
81
|
+
* }
|
|
82
|
+
* },
|
|
83
|
+
* },
|
|
84
|
+
* success: {
|
|
85
|
+
* color: 'green',
|
|
86
|
+
* '@media': {
|
|
87
|
+
* '(min-width: 100px)': {
|
|
88
|
+
* font-size: '1.3em',
|
|
89
|
+
* },
|
|
90
|
+
* },
|
|
91
|
+
* '&:hover': {
|
|
92
|
+
* color: '#8f8',
|
|
93
|
+
* },
|
|
94
|
+
* selectors: {
|
|
95
|
+
* '&:not(:active)': {
|
|
96
|
+
* backgroundColor: 'white',
|
|
97
|
+
* }
|
|
98
|
+
* },
|
|
99
|
+
* },
|
|
100
|
+
* });
|
|
101
|
+
* ```
|
|
102
|
+
*/
|
|
103
|
+
selectors?: ExtendedSelector,
|
|
104
|
+
...
|
|
105
|
+
};
|
|
106
|
+
declare type Variants<VariantName: string> = {
|
|
107
|
+
[key: VariantName]: { ...CssProps, ...WhitelistedSelector, ...ExtendedSelectors },
|
|
108
|
+
};
|
|
109
|
+
declare type ReturnType<VariantName: string> = { [key: VariantName]: CssProps };
|
|
8
110
|
/**
|
|
9
111
|
* ## cssMap
|
|
10
112
|
*
|
|
@@ -20,7 +122,4 @@ import type { CSSProps, CssObject } from '../types';
|
|
|
20
122
|
* <Component borderStyle="solid" />
|
|
21
123
|
* ```
|
|
22
124
|
*/
|
|
23
|
-
declare
|
|
24
|
-
declare export default function cssMap<T: string, TProps>(_styles: {
|
|
25
|
-
[key: T]: CssObject<TProps> | CssObject<TProps>[],
|
|
26
|
-
}): $ReadOnly<returnType<T, TProps>>;
|
|
125
|
+
declare export default function cssMap<T: string>(_styles: Variants<T>): $ReadOnly<ReturnType<T>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css-map/index.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css-map/index.ts"],"names":[],"mappings":";;AAEA,0CAAkD;AAuGlD;;;;;;;;;;;;;;;;GAgBG;AAEH,SAAwB,MAAM,CAAmB,OAAoB;IACnE,MAAM,IAAA,wBAAgB,GAAE,CAAC;AAC3B,CAAC;AAFD,yBAEC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type Pseudos = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::target-text' | '&::view-transition' | '&:active' | '&:autofill' | '&:blank' | '&:checked' | '&:default' | '&:defined' | '&:disabled' | '&:empty' | '&:enabled' | '&:first' | '&:focus' | '&:focus-visible' | '&:focus-within' | '&:fullscreen' | '&:hover' | '&:in-range' | '&:indeterminate' | '&:invalid' | '&:left' | '&:link' | '&:local-link' | '&:optional' | '&:out-of-range' | '&:paused' | '&:picture-in-picture' | '&:placeholder-shown' | '&:playing' | '&:read-only' | '&:read-write' | '&:required' | '&:right' | '&:target' | '&:user-invalid' | '&:user-valid' | '&:valid' | '&:visited';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// List of pseudo-classes and pseudo-elements are from csstype
|
|
3
|
+
// but with & added in the front, so that we target the current element
|
|
4
|
+
// (instead of a child element)
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
//# sourceMappingURL=pseudos.js.map
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Flowtype definitions for pseudos
|
|
3
|
+
* Generated by Flowgen from a Typescript Definition
|
|
4
|
+
* Flowgen v1.21.0
|
|
5
|
+
* @flow
|
|
6
|
+
*/
|
|
7
|
+
export type Pseudos =
|
|
8
|
+
| '&::after'
|
|
9
|
+
| '&::backdrop'
|
|
10
|
+
| '&::before'
|
|
11
|
+
| '&::cue'
|
|
12
|
+
| '&::cue-region'
|
|
13
|
+
| '&::first-letter'
|
|
14
|
+
| '&::first-line'
|
|
15
|
+
| '&::grammar-error'
|
|
16
|
+
| '&::marker'
|
|
17
|
+
| '&::placeholder'
|
|
18
|
+
| '&::selection'
|
|
19
|
+
| '&::spelling-error'
|
|
20
|
+
| '&::target-text'
|
|
21
|
+
| '&::view-transition'
|
|
22
|
+
| '&:active'
|
|
23
|
+
| '&:autofill'
|
|
24
|
+
| '&:blank'
|
|
25
|
+
| '&:checked'
|
|
26
|
+
| '&:default'
|
|
27
|
+
| '&:defined'
|
|
28
|
+
| '&:disabled'
|
|
29
|
+
| '&:empty'
|
|
30
|
+
| '&:enabled'
|
|
31
|
+
| '&:first'
|
|
32
|
+
| '&:focus'
|
|
33
|
+
| '&:focus-visible'
|
|
34
|
+
| '&:focus-within'
|
|
35
|
+
| '&:fullscreen'
|
|
36
|
+
| '&:hover'
|
|
37
|
+
| '&:in-range'
|
|
38
|
+
| '&:indeterminate'
|
|
39
|
+
| '&:invalid'
|
|
40
|
+
| '&:left'
|
|
41
|
+
| '&:link'
|
|
42
|
+
| '&:local-link'
|
|
43
|
+
| '&:optional'
|
|
44
|
+
| '&:out-of-range'
|
|
45
|
+
| '&:paused'
|
|
46
|
+
| '&:picture-in-picture'
|
|
47
|
+
| '&:placeholder-shown'
|
|
48
|
+
| '&:playing'
|
|
49
|
+
| '&:read-only'
|
|
50
|
+
| '&:read-write'
|
|
51
|
+
| '&:required'
|
|
52
|
+
| '&:right'
|
|
53
|
+
| '&:target'
|
|
54
|
+
| '&:user-invalid'
|
|
55
|
+
| '&:user-valid'
|
|
56
|
+
| '&:valid'
|
|
57
|
+
| '&:visited';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pseudos.js","sourceRoot":"","sources":["../../../src/css-map/pseudos.ts"],"names":[],"mappings":";AAAA,8DAA8D;AAC9D,uEAAuE;AACvE,+BAA+B"}
|