@pyreon/unistyle 0.11.5 → 0.11.6
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/README.md +39 -34
- package/lib/index.d.ts +13 -8
- package/lib/index.js +9 -4
- package/package.json +24 -24
- package/src/__tests__/alignContent.test.ts +57 -57
- package/src/__tests__/borderRadius.test.ts +40 -40
- package/src/__tests__/camelToKebab.test.ts +23 -23
- package/src/__tests__/context.test.ts +28 -28
- package/src/__tests__/createMediaQueries.test.ts +21 -21
- package/src/__tests__/edge.test.ts +76 -76
- package/src/__tests__/enrichTheme.test.ts +13 -13
- package/src/__tests__/index.test.ts +31 -31
- package/src/__tests__/makeItResponsive.test.ts +32 -32
- package/src/__tests__/processDescriptor.test.ts +107 -107
- package/src/__tests__/responsive.test.ts +66 -66
- package/src/__tests__/styles.test.ts +52 -52
- package/src/__tests__/units.test.ts +63 -63
- package/src/context.tsx +11 -6
- package/src/enrichTheme.ts +3 -3
- package/src/index.ts +11 -11
- package/src/responsive/createMediaQueries.ts +4 -4
- package/src/responsive/index.ts +14 -14
- package/src/responsive/makeItResponsive.ts +9 -9
- package/src/responsive/normalizeTheme.ts +2 -2
- package/src/responsive/transformTheme.ts +2 -2
- package/src/styles/alignContent.ts +14 -14
- package/src/styles/extendCss.ts +4 -4
- package/src/styles/index.ts +6 -6
- package/src/styles/shorthands/borderRadius.ts +6 -6
- package/src/styles/shorthands/edge.ts +29 -29
- package/src/styles/shorthands/index.ts +4 -4
- package/src/styles/styles/index.ts +6 -6
- package/src/styles/styles/processDescriptor.ts +31 -31
- package/src/styles/styles/propertyMap.ts +326 -326
- package/src/styles/styles/utils.ts +4 -4
- package/src/types.ts +155 -155
- package/src/units/index.ts +6 -6
- package/src/units/stripUnit.ts +1 -1
- package/src/units/value.ts +20 -20
- package/src/units/values.ts +18 -18
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import type { InnerTheme } from
|
|
1
|
+
import type { InnerTheme } from './types'
|
|
2
2
|
|
|
3
3
|
type EdgeProperty =
|
|
4
|
-
|
|
|
5
|
-
|
|
|
6
|
-
|
|
|
7
|
-
|
|
|
8
|
-
|
|
|
9
|
-
|
|
|
4
|
+
| 'inset'
|
|
5
|
+
| 'margin'
|
|
6
|
+
| 'padding'
|
|
7
|
+
| 'border-width'
|
|
8
|
+
| 'border-style'
|
|
9
|
+
| 'border-color'
|
|
10
10
|
|
|
11
11
|
type EdgeKeys = {
|
|
12
12
|
full: keyof InnerTheme
|
|
@@ -31,406 +31,406 @@ type BorderRadiusKeys = {
|
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
export type PropertyDescriptor =
|
|
34
|
-
| { kind:
|
|
35
|
-
| { kind:
|
|
36
|
-
| { kind:
|
|
37
|
-
| { kind:
|
|
38
|
-
| { kind:
|
|
39
|
-
| { kind:
|
|
34
|
+
| { kind: 'simple'; css: string; key: keyof InnerTheme }
|
|
35
|
+
| { kind: 'convert'; css: string; key: keyof InnerTheme }
|
|
36
|
+
| { kind: 'convert_fallback'; css: string; keys: (keyof InnerTheme)[] }
|
|
37
|
+
| { kind: 'edge'; property: EdgeProperty; keys: EdgeKeys }
|
|
38
|
+
| { kind: 'border_radius'; keys: BorderRadiusKeys }
|
|
39
|
+
| { kind: 'special'; id: string }
|
|
40
40
|
|
|
41
41
|
const propertyMap: PropertyDescriptor[] = [
|
|
42
42
|
// SPECIAL: fullScreen
|
|
43
|
-
{ kind:
|
|
43
|
+
{ kind: 'special', id: 'fullScreen' },
|
|
44
44
|
|
|
45
45
|
// POSITION
|
|
46
|
-
{ kind:
|
|
47
|
-
{ kind:
|
|
48
|
-
{ kind:
|
|
49
|
-
{ kind:
|
|
50
|
-
{ kind:
|
|
46
|
+
{ kind: 'simple', css: 'all', key: 'all' },
|
|
47
|
+
{ kind: 'simple', css: 'display', key: 'display' },
|
|
48
|
+
{ kind: 'simple', css: 'position', key: 'position' },
|
|
49
|
+
{ kind: 'simple', css: 'box-sizing', key: 'boxSizing' },
|
|
50
|
+
{ kind: 'simple', css: 'float', key: 'float' },
|
|
51
51
|
|
|
52
52
|
// INSET
|
|
53
53
|
{
|
|
54
|
-
kind:
|
|
55
|
-
property:
|
|
54
|
+
kind: 'edge',
|
|
55
|
+
property: 'inset',
|
|
56
56
|
keys: {
|
|
57
|
-
full:
|
|
58
|
-
x:
|
|
59
|
-
y:
|
|
60
|
-
top:
|
|
61
|
-
left:
|
|
62
|
-
bottom:
|
|
63
|
-
right:
|
|
57
|
+
full: 'inset',
|
|
58
|
+
x: 'insetX',
|
|
59
|
+
y: 'insetY',
|
|
60
|
+
top: 'top',
|
|
61
|
+
left: 'left',
|
|
62
|
+
bottom: 'bottom',
|
|
63
|
+
right: 'right',
|
|
64
64
|
},
|
|
65
65
|
},
|
|
66
66
|
|
|
67
67
|
// SIZING
|
|
68
|
-
{ kind:
|
|
69
|
-
{ kind:
|
|
70
|
-
{ kind:
|
|
71
|
-
{ kind:
|
|
72
|
-
{ kind:
|
|
73
|
-
{ kind:
|
|
74
|
-
{ kind:
|
|
75
|
-
{ kind:
|
|
76
|
-
{ kind:
|
|
77
|
-
{ kind:
|
|
78
|
-
{ kind:
|
|
79
|
-
{ kind:
|
|
80
|
-
{ kind:
|
|
81
|
-
{ kind:
|
|
82
|
-
{ kind:
|
|
83
|
-
{ kind:
|
|
84
|
-
{ kind:
|
|
85
|
-
{ kind:
|
|
68
|
+
{ kind: 'convert_fallback', css: 'width', keys: ['width', 'size'] },
|
|
69
|
+
{ kind: 'convert_fallback', css: 'min-width', keys: ['minWidth', 'minSize'] },
|
|
70
|
+
{ kind: 'convert_fallback', css: 'max-width', keys: ['maxWidth', 'maxSize'] },
|
|
71
|
+
{ kind: 'convert_fallback', css: 'height', keys: ['height', 'size'] },
|
|
72
|
+
{ kind: 'convert_fallback', css: 'min-height', keys: ['minHeight', 'minSize'] },
|
|
73
|
+
{ kind: 'convert_fallback', css: 'max-height', keys: ['maxHeight', 'maxSize'] },
|
|
74
|
+
{ kind: 'convert', css: 'gap', key: 'gap' },
|
|
75
|
+
{ kind: 'simple', css: 'aspect-ratio', key: 'aspectRatio' },
|
|
76
|
+
{ kind: 'simple', css: 'contain', key: 'contain' },
|
|
77
|
+
{ kind: 'simple', css: 'container-type', key: 'containerType' },
|
|
78
|
+
{ kind: 'simple', css: 'container-name', key: 'containerName' },
|
|
79
|
+
{ kind: 'simple', css: 'container', key: 'container' },
|
|
80
|
+
{ kind: 'convert', css: 'inline-size', key: 'inlineSize' },
|
|
81
|
+
{ kind: 'convert', css: 'block-size', key: 'blockSize' },
|
|
82
|
+
{ kind: 'convert', css: 'min-inline-size', key: 'minInlineSize' },
|
|
83
|
+
{ kind: 'convert', css: 'min-block-size', key: 'minBlockSize' },
|
|
84
|
+
{ kind: 'convert', css: 'max-inline-size', key: 'maxInlineSize' },
|
|
85
|
+
{ kind: 'convert', css: 'max-block-size', key: 'maxBlockSize' },
|
|
86
86
|
|
|
87
87
|
// SPACING
|
|
88
88
|
{
|
|
89
|
-
kind:
|
|
90
|
-
property:
|
|
89
|
+
kind: 'edge',
|
|
90
|
+
property: 'margin',
|
|
91
91
|
keys: {
|
|
92
|
-
full:
|
|
93
|
-
x:
|
|
94
|
-
y:
|
|
95
|
-
top:
|
|
96
|
-
left:
|
|
97
|
-
bottom:
|
|
98
|
-
right:
|
|
92
|
+
full: 'margin',
|
|
93
|
+
x: 'marginX',
|
|
94
|
+
y: 'marginY',
|
|
95
|
+
top: 'marginTop',
|
|
96
|
+
left: 'marginLeft',
|
|
97
|
+
bottom: 'marginBottom',
|
|
98
|
+
right: 'marginRight',
|
|
99
99
|
},
|
|
100
100
|
},
|
|
101
101
|
{
|
|
102
|
-
kind:
|
|
103
|
-
property:
|
|
102
|
+
kind: 'edge',
|
|
103
|
+
property: 'padding',
|
|
104
104
|
keys: {
|
|
105
|
-
full:
|
|
106
|
-
x:
|
|
107
|
-
y:
|
|
108
|
-
top:
|
|
109
|
-
left:
|
|
110
|
-
bottom:
|
|
111
|
-
right:
|
|
105
|
+
full: 'padding',
|
|
106
|
+
x: 'paddingX',
|
|
107
|
+
y: 'paddingY',
|
|
108
|
+
top: 'paddingTop',
|
|
109
|
+
left: 'paddingLeft',
|
|
110
|
+
bottom: 'paddingBottom',
|
|
111
|
+
right: 'paddingRight',
|
|
112
112
|
},
|
|
113
113
|
},
|
|
114
114
|
|
|
115
115
|
// Logical spacing
|
|
116
|
-
{ kind:
|
|
117
|
-
{ kind:
|
|
118
|
-
{ kind:
|
|
119
|
-
{ kind:
|
|
120
|
-
{ kind:
|
|
121
|
-
{ kind:
|
|
122
|
-
{ kind:
|
|
123
|
-
{ kind:
|
|
124
|
-
{ kind:
|
|
125
|
-
{ kind:
|
|
126
|
-
{ kind:
|
|
127
|
-
{ kind:
|
|
116
|
+
{ kind: 'convert', css: 'margin-inline', key: 'marginInline' },
|
|
117
|
+
{ kind: 'convert', css: 'margin-inline-start', key: 'marginInlineStart' },
|
|
118
|
+
{ kind: 'convert', css: 'margin-inline-end', key: 'marginInlineEnd' },
|
|
119
|
+
{ kind: 'convert', css: 'margin-block', key: 'marginBlock' },
|
|
120
|
+
{ kind: 'convert', css: 'margin-block-start', key: 'marginBlockStart' },
|
|
121
|
+
{ kind: 'convert', css: 'margin-block-end', key: 'marginBlockEnd' },
|
|
122
|
+
{ kind: 'convert', css: 'padding-inline', key: 'paddingInline' },
|
|
123
|
+
{ kind: 'convert', css: 'padding-inline-start', key: 'paddingInlineStart' },
|
|
124
|
+
{ kind: 'convert', css: 'padding-inline-end', key: 'paddingInlineEnd' },
|
|
125
|
+
{ kind: 'convert', css: 'padding-block', key: 'paddingBlock' },
|
|
126
|
+
{ kind: 'convert', css: 'padding-block-start', key: 'paddingBlockStart' },
|
|
127
|
+
{ kind: 'convert', css: 'padding-block-end', key: 'paddingBlockEnd' },
|
|
128
128
|
|
|
129
129
|
// Logical inset
|
|
130
|
-
{ kind:
|
|
131
|
-
{ kind:
|
|
132
|
-
{ kind:
|
|
133
|
-
{ kind:
|
|
134
|
-
{ kind:
|
|
135
|
-
{ kind:
|
|
130
|
+
{ kind: 'convert', css: 'inset-inline', key: 'insetInline' },
|
|
131
|
+
{ kind: 'convert', css: 'inset-inline-start', key: 'insetInlineStart' },
|
|
132
|
+
{ kind: 'convert', css: 'inset-inline-end', key: 'insetInlineEnd' },
|
|
133
|
+
{ kind: 'convert', css: 'inset-block', key: 'insetBlock' },
|
|
134
|
+
{ kind: 'convert', css: 'inset-block-start', key: 'insetBlockStart' },
|
|
135
|
+
{ kind: 'convert', css: 'inset-block-end', key: 'insetBlockEnd' },
|
|
136
136
|
|
|
137
137
|
// FLEX
|
|
138
|
-
{ kind:
|
|
139
|
-
{ kind:
|
|
140
|
-
{ kind:
|
|
141
|
-
{ kind:
|
|
142
|
-
{ kind:
|
|
143
|
-
{ kind:
|
|
144
|
-
{ kind:
|
|
145
|
-
{ kind:
|
|
146
|
-
{ kind:
|
|
147
|
-
{ kind:
|
|
148
|
-
{ kind:
|
|
149
|
-
{ kind:
|
|
150
|
-
{ kind:
|
|
151
|
-
{ kind:
|
|
152
|
-
{ kind:
|
|
153
|
-
{ kind:
|
|
154
|
-
{ kind:
|
|
155
|
-
{ kind:
|
|
138
|
+
{ kind: 'simple', css: 'align-content', key: 'alignContent' },
|
|
139
|
+
{ kind: 'simple', css: 'align-items', key: 'alignItems' },
|
|
140
|
+
{ kind: 'simple', css: 'align-self', key: 'alignSelf' },
|
|
141
|
+
{ kind: 'simple', css: 'flex', key: 'flex' },
|
|
142
|
+
{ kind: 'simple', css: 'flex-basis', key: 'flexBasis' },
|
|
143
|
+
{ kind: 'simple', css: 'flex-direction', key: 'flexDirection' },
|
|
144
|
+
{ kind: 'simple', css: 'flex-flow', key: 'flexFlow' },
|
|
145
|
+
{ kind: 'simple', css: 'flex-grow', key: 'flexGrow' },
|
|
146
|
+
{ kind: 'simple', css: 'flex-shrink', key: 'flexShrink' },
|
|
147
|
+
{ kind: 'simple', css: 'flex-wrap', key: 'flexWrap' },
|
|
148
|
+
{ kind: 'simple', css: 'justify-content', key: 'justifyContent' },
|
|
149
|
+
{ kind: 'simple', css: 'justify-items', key: 'justifyItems' },
|
|
150
|
+
{ kind: 'simple', css: 'justify-self', key: 'justifySelf' },
|
|
151
|
+
{ kind: 'simple', css: 'place-items', key: 'placeItems' },
|
|
152
|
+
{ kind: 'simple', css: 'place-content', key: 'placeContent' },
|
|
153
|
+
{ kind: 'simple', css: 'place-self', key: 'placeSelf' },
|
|
154
|
+
{ kind: 'convert', css: 'row-gap', key: 'rowGap' },
|
|
155
|
+
{ kind: 'convert', css: 'column-gap', key: 'columnGap' },
|
|
156
156
|
|
|
157
157
|
// GRID
|
|
158
|
-
{ kind:
|
|
159
|
-
{ kind:
|
|
160
|
-
{ kind:
|
|
161
|
-
{ kind:
|
|
162
|
-
{ kind:
|
|
163
|
-
{ kind:
|
|
164
|
-
{ kind:
|
|
165
|
-
{ kind:
|
|
166
|
-
{ kind:
|
|
167
|
-
{ kind:
|
|
168
|
-
{ kind:
|
|
169
|
-
{ kind:
|
|
170
|
-
{ kind:
|
|
171
|
-
{ kind:
|
|
172
|
-
{ kind:
|
|
173
|
-
{ kind:
|
|
174
|
-
{ kind:
|
|
175
|
-
{ kind:
|
|
158
|
+
{ kind: 'simple', css: 'grid', key: 'grid' },
|
|
159
|
+
{ kind: 'simple', css: 'grid-area', key: 'gridArea' },
|
|
160
|
+
{ kind: 'convert', css: 'grid-auto-columns', key: 'gridAutoColumns' },
|
|
161
|
+
{ kind: 'simple', css: 'grid-auto-flow', key: 'gridAutoFlow' },
|
|
162
|
+
{ kind: 'convert', css: 'grid-auto-rows', key: 'gridAutoRows' },
|
|
163
|
+
{ kind: 'simple', css: 'grid-column', key: 'gridColumn' },
|
|
164
|
+
{ kind: 'simple', css: 'grid-column-end', key: 'gridColumnEnd' },
|
|
165
|
+
{ kind: 'convert', css: 'grid-column-gap', key: 'gridColumnGap' },
|
|
166
|
+
{ kind: 'convert', css: 'grid-column-start', key: 'gridColumnStart' },
|
|
167
|
+
{ kind: 'convert', css: 'grid-gap', key: 'gridGap' },
|
|
168
|
+
{ kind: 'simple', css: 'grid-row', key: 'gridRow' },
|
|
169
|
+
{ kind: 'simple', css: 'grid-row-start', key: 'gridRowStart' },
|
|
170
|
+
{ kind: 'simple', css: 'grid-row-end', key: 'gridRowEnd' },
|
|
171
|
+
{ kind: 'convert', css: 'grid-row-gap', key: 'gridRowGap' },
|
|
172
|
+
{ kind: 'simple', css: 'grid-template', key: 'gridTemplate' },
|
|
173
|
+
{ kind: 'simple', css: 'grid-template-areas', key: 'gridTemplateAreas' },
|
|
174
|
+
{ kind: 'simple', css: 'grid-template-columns', key: 'gridTemplateColumns' },
|
|
175
|
+
{ kind: 'simple', css: 'grid-template-rows', key: 'gridTemplateRows' },
|
|
176
176
|
|
|
177
177
|
// POSITIONING
|
|
178
|
-
{ kind:
|
|
179
|
-
{ kind:
|
|
180
|
-
{ kind:
|
|
181
|
-
{ kind:
|
|
182
|
-
{ kind:
|
|
183
|
-
{ kind:
|
|
178
|
+
{ kind: 'simple', css: 'object-fit', key: 'objectFit' },
|
|
179
|
+
{ kind: 'simple', css: 'object-position', key: 'objectPosition' },
|
|
180
|
+
{ kind: 'simple', css: 'order', key: 'order' },
|
|
181
|
+
{ kind: 'simple', css: 'opacity', key: 'opacity' },
|
|
182
|
+
{ kind: 'simple', css: 'resize', key: 'resize' },
|
|
183
|
+
{ kind: 'simple', css: 'vertical-align', key: 'verticalAlign' },
|
|
184
184
|
|
|
185
185
|
// FONT & TEXT
|
|
186
|
-
{ kind:
|
|
187
|
-
{ kind:
|
|
188
|
-
{ kind:
|
|
189
|
-
{ kind:
|
|
190
|
-
{ kind:
|
|
191
|
-
{ kind:
|
|
192
|
-
{ kind:
|
|
193
|
-
{ kind:
|
|
194
|
-
{ kind:
|
|
195
|
-
{ kind:
|
|
196
|
-
{ kind:
|
|
197
|
-
{ kind:
|
|
198
|
-
{ kind:
|
|
199
|
-
{ kind:
|
|
200
|
-
{ kind:
|
|
201
|
-
{ kind:
|
|
202
|
-
{ kind:
|
|
203
|
-
{ kind:
|
|
204
|
-
{ kind:
|
|
205
|
-
{ kind:
|
|
206
|
-
{ kind:
|
|
207
|
-
{ kind:
|
|
208
|
-
{ kind:
|
|
209
|
-
{ kind:
|
|
210
|
-
{ kind:
|
|
211
|
-
{ kind:
|
|
212
|
-
{ kind:
|
|
213
|
-
{ kind:
|
|
214
|
-
{ kind:
|
|
215
|
-
{ kind:
|
|
216
|
-
{ kind:
|
|
217
|
-
{ kind:
|
|
218
|
-
{ kind:
|
|
219
|
-
{ kind:
|
|
220
|
-
{ kind:
|
|
221
|
-
{ kind:
|
|
222
|
-
{ kind:
|
|
223
|
-
{ kind:
|
|
224
|
-
{ kind:
|
|
186
|
+
{ kind: 'simple', css: 'line-height', key: 'lineHeight' },
|
|
187
|
+
{ kind: 'simple', css: 'font', key: 'font' },
|
|
188
|
+
{ kind: 'simple', css: 'font-family', key: 'fontFamily' },
|
|
189
|
+
{ kind: 'convert', css: 'font-size', key: 'fontSize' },
|
|
190
|
+
{ kind: 'convert', css: 'font-size-adjust', key: 'fontSizeAdjust' },
|
|
191
|
+
{ kind: 'convert', css: 'font-stretch', key: 'fontStretch' },
|
|
192
|
+
{ kind: 'simple', css: 'font-style', key: 'fontStyle' },
|
|
193
|
+
{ kind: 'simple', css: 'font-variant', key: 'fontVariant' },
|
|
194
|
+
{ kind: 'simple', css: 'font-weight', key: 'fontWeight' },
|
|
195
|
+
{ kind: 'simple', css: 'font-kerning', key: 'fontKerning' },
|
|
196
|
+
{ kind: 'simple', css: 'font-feature-settings', key: 'fontFeatureSettings' },
|
|
197
|
+
{ kind: 'simple', css: 'font-variation-settings', key: 'fontVariationSettings' },
|
|
198
|
+
{ kind: 'simple', css: 'font-optical-sizing', key: 'fontOpticalSizing' },
|
|
199
|
+
{ kind: 'simple', css: 'text-align', key: 'textAlign' },
|
|
200
|
+
{ kind: 'simple', css: 'text-align-last', key: 'textAlignLast' },
|
|
201
|
+
{ kind: 'simple', css: 'text-transform', key: 'textTransform' },
|
|
202
|
+
{ kind: 'simple', css: 'text-decoration', key: 'textDecoration' },
|
|
203
|
+
{ kind: 'simple', css: 'text-decoration-color', key: 'textDecorationColor' },
|
|
204
|
+
{ kind: 'simple', css: 'text-decoration-line', key: 'textDecorationLine' },
|
|
205
|
+
{ kind: 'simple', css: 'text-decoration-style', key: 'textDecorationStyle' },
|
|
206
|
+
{ kind: 'simple', css: 'text-decoration-thickness', key: 'textDecorationThickness' },
|
|
207
|
+
{ kind: 'simple', css: 'text-underline-offset', key: 'textUnderlineOffset' },
|
|
208
|
+
{ kind: 'simple', css: 'text-emphasis', key: 'textEmphasis' },
|
|
209
|
+
{ kind: 'simple', css: 'text-emphasis-color', key: 'textEmphasisColor' },
|
|
210
|
+
{ kind: 'simple', css: 'text-emphasis-style', key: 'textEmphasisStyle' },
|
|
211
|
+
{ kind: 'simple', css: 'letter-spacing', key: 'letterSpacing' },
|
|
212
|
+
{ kind: 'simple', css: 'word-spacing', key: 'wordSpacing' },
|
|
213
|
+
{ kind: 'simple', css: 'text-indent', key: 'textIndent' },
|
|
214
|
+
{ kind: 'simple', css: 'text-justify', key: 'textJustify' },
|
|
215
|
+
{ kind: 'simple', css: 'text-overflow', key: 'textOverflow' },
|
|
216
|
+
{ kind: 'simple', css: 'text-shadow', key: 'textShadow' },
|
|
217
|
+
{ kind: 'simple', css: 'text-wrap', key: 'textWrap' },
|
|
218
|
+
{ kind: 'simple', css: 'text-rendering', key: 'textRendering' },
|
|
219
|
+
{ kind: 'simple', css: 'white-space', key: 'whiteSpace' },
|
|
220
|
+
{ kind: 'simple', css: 'word-break', key: 'wordBreak' },
|
|
221
|
+
{ kind: 'simple', css: 'word-wrap', key: 'wordWrap' },
|
|
222
|
+
{ kind: 'simple', css: 'writing-mode', key: 'writingMode' },
|
|
223
|
+
{ kind: 'simple', css: 'direction', key: 'direction' },
|
|
224
|
+
{ kind: 'simple', css: 'hyphens', key: 'hyphens' },
|
|
225
225
|
|
|
226
226
|
// LIST
|
|
227
|
-
{ kind:
|
|
228
|
-
{ kind:
|
|
229
|
-
{ kind:
|
|
230
|
-
{ kind:
|
|
227
|
+
{ kind: 'simple', css: 'list-style', key: 'listStyle' },
|
|
228
|
+
{ kind: 'simple', css: 'list-style-image', key: 'listStyleImage' },
|
|
229
|
+
{ kind: 'simple', css: 'list-style-position', key: 'listStylePosition' },
|
|
230
|
+
{ kind: 'simple', css: 'list-style-type', key: 'listStyleType' },
|
|
231
231
|
|
|
232
232
|
// BACKGROUND & COLORS
|
|
233
|
-
{ kind:
|
|
234
|
-
{ kind:
|
|
235
|
-
{ kind:
|
|
236
|
-
{ kind:
|
|
237
|
-
{ kind:
|
|
238
|
-
{ kind:
|
|
239
|
-
{ kind:
|
|
240
|
-
{ kind:
|
|
241
|
-
{ kind:
|
|
242
|
-
{ kind:
|
|
233
|
+
{ kind: 'simple', css: 'color', key: 'color' },
|
|
234
|
+
{ kind: 'simple', css: 'background', key: 'background' },
|
|
235
|
+
{ kind: 'simple', css: 'background-color', key: 'backgroundColor' },
|
|
236
|
+
{ kind: 'special', id: 'backgroundImage' },
|
|
237
|
+
{ kind: 'simple', css: 'background-attachment', key: 'backgroundAttachment' },
|
|
238
|
+
{ kind: 'simple', css: 'background-clip', key: 'backgroundClip' },
|
|
239
|
+
{ kind: 'simple', css: 'background-origin', key: 'backgroundOrigin' },
|
|
240
|
+
{ kind: 'simple', css: 'background-position', key: 'backgroundPosition' },
|
|
241
|
+
{ kind: 'simple', css: 'background-repeat', key: 'backgroundRepeat' },
|
|
242
|
+
{ kind: 'simple', css: 'background-size', key: 'backgroundSize' },
|
|
243
243
|
|
|
244
244
|
// BORDERS
|
|
245
245
|
{
|
|
246
|
-
kind:
|
|
246
|
+
kind: 'border_radius',
|
|
247
247
|
keys: {
|
|
248
|
-
full:
|
|
249
|
-
top:
|
|
250
|
-
bottom:
|
|
251
|
-
left:
|
|
252
|
-
right:
|
|
253
|
-
topLeft:
|
|
254
|
-
topRight:
|
|
255
|
-
bottomLeft:
|
|
256
|
-
bottomRight:
|
|
248
|
+
full: 'borderRadius',
|
|
249
|
+
top: 'borderRadiusTop',
|
|
250
|
+
bottom: 'borderRadiusBottom',
|
|
251
|
+
left: 'borderRadiusLeft',
|
|
252
|
+
right: 'borderRadiusRight',
|
|
253
|
+
topLeft: 'borderRadiusTopLeft',
|
|
254
|
+
topRight: 'borderRadiusTopRight',
|
|
255
|
+
bottomLeft: 'borderRadiusBottomLeft',
|
|
256
|
+
bottomRight: 'borderRadiusBottomRight',
|
|
257
257
|
},
|
|
258
258
|
},
|
|
259
|
-
{ kind:
|
|
260
|
-
{ kind:
|
|
261
|
-
{ kind:
|
|
262
|
-
{ kind:
|
|
263
|
-
{ kind:
|
|
259
|
+
{ kind: 'simple', css: 'border', key: 'border' },
|
|
260
|
+
{ kind: 'simple', css: 'border-top', key: 'borderTop' },
|
|
261
|
+
{ kind: 'simple', css: 'border-bottom', key: 'borderBottom' },
|
|
262
|
+
{ kind: 'simple', css: 'border-left', key: 'borderLeft' },
|
|
263
|
+
{ kind: 'simple', css: 'border-right', key: 'borderRight' },
|
|
264
264
|
{
|
|
265
|
-
kind:
|
|
266
|
-
property:
|
|
265
|
+
kind: 'edge',
|
|
266
|
+
property: 'border-width',
|
|
267
267
|
keys: {
|
|
268
|
-
full:
|
|
269
|
-
x:
|
|
270
|
-
y:
|
|
271
|
-
top:
|
|
272
|
-
left:
|
|
273
|
-
bottom:
|
|
274
|
-
right:
|
|
268
|
+
full: 'borderWidth',
|
|
269
|
+
x: 'borderWidthX',
|
|
270
|
+
y: 'borderWidthY',
|
|
271
|
+
top: 'borderWidthTop',
|
|
272
|
+
left: 'borderWidthLeft',
|
|
273
|
+
bottom: 'borderWidthBottom',
|
|
274
|
+
right: 'borderWidthRight',
|
|
275
275
|
},
|
|
276
276
|
},
|
|
277
277
|
{
|
|
278
|
-
kind:
|
|
279
|
-
property:
|
|
278
|
+
kind: 'edge',
|
|
279
|
+
property: 'border-style',
|
|
280
280
|
keys: {
|
|
281
|
-
full:
|
|
282
|
-
x:
|
|
283
|
-
y:
|
|
284
|
-
top:
|
|
285
|
-
left:
|
|
286
|
-
bottom:
|
|
287
|
-
right:
|
|
281
|
+
full: 'borderStyle',
|
|
282
|
+
x: 'borderStyleX',
|
|
283
|
+
y: 'borderStyleY',
|
|
284
|
+
top: 'borderStyleTop',
|
|
285
|
+
left: 'borderStyleLeft',
|
|
286
|
+
bottom: 'borderStyleBottom',
|
|
287
|
+
right: 'borderStyleRight',
|
|
288
288
|
},
|
|
289
289
|
},
|
|
290
290
|
{
|
|
291
|
-
kind:
|
|
292
|
-
property:
|
|
291
|
+
kind: 'edge',
|
|
292
|
+
property: 'border-color',
|
|
293
293
|
keys: {
|
|
294
|
-
full:
|
|
295
|
-
x:
|
|
296
|
-
y:
|
|
297
|
-
top:
|
|
298
|
-
left:
|
|
299
|
-
bottom:
|
|
300
|
-
right:
|
|
294
|
+
full: 'borderColor',
|
|
295
|
+
x: 'borderColorX',
|
|
296
|
+
y: 'borderColorY',
|
|
297
|
+
top: 'borderColorTop',
|
|
298
|
+
left: 'borderColorLeft',
|
|
299
|
+
bottom: 'borderColorBottom',
|
|
300
|
+
right: 'borderColorRight',
|
|
301
301
|
},
|
|
302
302
|
},
|
|
303
|
-
{ kind:
|
|
304
|
-
{ kind:
|
|
305
|
-
{ kind:
|
|
306
|
-
{ kind:
|
|
307
|
-
{ kind:
|
|
308
|
-
{ kind:
|
|
309
|
-
{ kind:
|
|
303
|
+
{ kind: 'simple', css: 'border-image', key: 'borderImage' },
|
|
304
|
+
{ kind: 'simple', css: 'border-image-outset', key: 'borderImageOutset' },
|
|
305
|
+
{ kind: 'simple', css: 'border-image-repeat', key: 'borderImageRepeat' },
|
|
306
|
+
{ kind: 'simple', css: 'border-image-slice', key: 'borderImageSlice' },
|
|
307
|
+
{ kind: 'simple', css: 'border-image-source', key: 'borderImageSource' },
|
|
308
|
+
{ kind: 'simple', css: 'border-image-width', key: 'borderImageWidth' },
|
|
309
|
+
{ kind: 'simple', css: 'border-spacing', key: 'borderSpacing' },
|
|
310
310
|
|
|
311
311
|
// Logical borders
|
|
312
|
-
{ kind:
|
|
313
|
-
{ kind:
|
|
314
|
-
{ kind:
|
|
315
|
-
{ kind:
|
|
316
|
-
{ kind:
|
|
317
|
-
{ kind:
|
|
312
|
+
{ kind: 'simple', css: 'border-inline', key: 'borderInline' },
|
|
313
|
+
{ kind: 'simple', css: 'border-block', key: 'borderBlock' },
|
|
314
|
+
{ kind: 'simple', css: 'border-inline-start', key: 'borderInlineStart' },
|
|
315
|
+
{ kind: 'simple', css: 'border-inline-end', key: 'borderInlineEnd' },
|
|
316
|
+
{ kind: 'simple', css: 'border-block-start', key: 'borderBlockStart' },
|
|
317
|
+
{ kind: 'simple', css: 'border-block-end', key: 'borderBlockEnd' },
|
|
318
318
|
|
|
319
319
|
// VISUAL EFFECTS
|
|
320
|
-
{ kind:
|
|
321
|
-
{ kind:
|
|
322
|
-
{ kind:
|
|
323
|
-
{ kind:
|
|
324
|
-
{ kind:
|
|
325
|
-
{ kind:
|
|
326
|
-
{ kind:
|
|
327
|
-
{ kind:
|
|
328
|
-
{ kind:
|
|
329
|
-
{ kind:
|
|
330
|
-
{ kind:
|
|
331
|
-
{ kind:
|
|
320
|
+
{ kind: 'simple', css: 'backface-visibility', key: 'backfaceVisibility' },
|
|
321
|
+
{ kind: 'simple', css: 'box-shadow', key: 'boxShadow' },
|
|
322
|
+
{ kind: 'simple', css: 'filter', key: 'filter' },
|
|
323
|
+
{ kind: 'simple', css: 'backdrop-filter', key: 'backdropFilter' },
|
|
324
|
+
{ kind: 'simple', css: 'mix-blend-mode', key: 'mixBlendMode' },
|
|
325
|
+
{ kind: 'simple', css: 'background-blend-mode', key: 'backgroundBlendMode' },
|
|
326
|
+
{ kind: 'simple', css: 'isolation', key: 'isolation' },
|
|
327
|
+
{ kind: 'simple', css: 'outline', key: 'outline' },
|
|
328
|
+
{ kind: 'simple', css: 'outline-color', key: 'outlineColor' },
|
|
329
|
+
{ kind: 'simple', css: 'outline-offset', key: 'outlineOffset' },
|
|
330
|
+
{ kind: 'simple', css: 'outline-style', key: 'outlineStyle' },
|
|
331
|
+
{ kind: 'simple', css: 'outline-width', key: 'outlineWidth' },
|
|
332
332
|
|
|
333
333
|
// ANIMATIONS
|
|
334
|
-
{ kind:
|
|
335
|
-
{ kind:
|
|
336
|
-
{ kind:
|
|
337
|
-
{ kind:
|
|
338
|
-
{ kind:
|
|
339
|
-
{ kind:
|
|
340
|
-
{ kind:
|
|
341
|
-
{ kind:
|
|
342
|
-
{ kind:
|
|
343
|
-
{ kind:
|
|
344
|
-
{ kind:
|
|
345
|
-
{ kind:
|
|
346
|
-
{ kind:
|
|
347
|
-
{ kind:
|
|
334
|
+
{ kind: 'special', id: 'animation' },
|
|
335
|
+
{ kind: 'simple', css: 'animation-name', key: 'animationName' },
|
|
336
|
+
{ kind: 'simple', css: 'animation-duration', key: 'animationDuration' },
|
|
337
|
+
{ kind: 'simple', css: 'animation-timing-function', key: 'animationTimingFunction' },
|
|
338
|
+
{ kind: 'simple', css: 'animation-delay', key: 'animationDelay' },
|
|
339
|
+
{ kind: 'simple', css: 'animation-iteration-count', key: 'animationIterationCount' },
|
|
340
|
+
{ kind: 'simple', css: 'animation-direction', key: 'animationDirection' },
|
|
341
|
+
{ kind: 'simple', css: 'animation-fill-mode', key: 'animationFillMode' },
|
|
342
|
+
{ kind: 'simple', css: 'animation-play-state', key: 'animationPlayState' },
|
|
343
|
+
{ kind: 'simple', css: 'transition', key: 'transition' },
|
|
344
|
+
{ kind: 'simple', css: 'transition-delay', key: 'transitionDelay' },
|
|
345
|
+
{ kind: 'simple', css: 'transition-duration', key: 'transitionDuration' },
|
|
346
|
+
{ kind: 'simple', css: 'transition-property', key: 'transitionProperty' },
|
|
347
|
+
{ kind: 'simple', css: 'transition-timing-function', key: 'transitionTimingFunction' },
|
|
348
348
|
|
|
349
349
|
// TRANSFORM
|
|
350
|
-
{ kind:
|
|
351
|
-
{ kind:
|
|
352
|
-
{ kind:
|
|
353
|
-
{ kind:
|
|
354
|
-
{ kind:
|
|
355
|
-
{ kind:
|
|
356
|
-
{ kind:
|
|
350
|
+
{ kind: 'simple', css: 'transform', key: 'transform' },
|
|
351
|
+
{ kind: 'simple', css: 'transform-origin', key: 'transformOrigin' },
|
|
352
|
+
{ kind: 'simple', css: 'transform-style', key: 'transformStyle' },
|
|
353
|
+
{ kind: 'simple', css: 'translate', key: 'translate' },
|
|
354
|
+
{ kind: 'simple', css: 'rotate', key: 'rotate' },
|
|
355
|
+
{ kind: 'simple', css: 'scale', key: 'scale' },
|
|
356
|
+
{ kind: 'simple', css: 'will-change', key: 'willChange' },
|
|
357
357
|
|
|
358
358
|
// SCROLL
|
|
359
|
-
{ kind:
|
|
360
|
-
{ kind:
|
|
361
|
-
{ kind:
|
|
362
|
-
{ kind:
|
|
363
|
-
{ kind:
|
|
364
|
-
{ kind:
|
|
365
|
-
{ kind:
|
|
366
|
-
{ kind:
|
|
367
|
-
{ kind:
|
|
359
|
+
{ kind: 'simple', css: 'scroll-behavior', key: 'scrollBehavior' },
|
|
360
|
+
{ kind: 'simple', css: 'scroll-snap-type', key: 'scrollSnapType' },
|
|
361
|
+
{ kind: 'simple', css: 'scroll-snap-align', key: 'scrollSnapAlign' },
|
|
362
|
+
{ kind: 'simple', css: 'scroll-snap-stop', key: 'scrollSnapStop' },
|
|
363
|
+
{ kind: 'simple', css: 'scroll-margin', key: 'scrollMargin' },
|
|
364
|
+
{ kind: 'simple', css: 'scroll-padding', key: 'scrollPadding' },
|
|
365
|
+
{ kind: 'simple', css: 'overscroll-behavior', key: 'overscrollBehavior' },
|
|
366
|
+
{ kind: 'simple', css: 'overscroll-behavior-x', key: 'overscrollBehaviorX' },
|
|
367
|
+
{ kind: 'simple', css: 'overscroll-behavior-y', key: 'overscrollBehaviorY' },
|
|
368
368
|
|
|
369
369
|
// INTERACTION
|
|
370
|
-
{ kind:
|
|
371
|
-
{ kind:
|
|
372
|
-
{ kind:
|
|
373
|
-
{ kind:
|
|
374
|
-
{ kind:
|
|
375
|
-
{ kind:
|
|
376
|
-
{ kind:
|
|
377
|
-
{ kind:
|
|
378
|
-
{ kind:
|
|
379
|
-
{ kind:
|
|
370
|
+
{ kind: 'simple', css: 'cursor', key: 'cursor' },
|
|
371
|
+
{ kind: 'simple', css: 'pointer-events', key: 'pointerEvents' },
|
|
372
|
+
{ kind: 'simple', css: 'user-select', key: 'userSelect' },
|
|
373
|
+
{ kind: 'simple', css: 'touch-action', key: 'touchAction' },
|
|
374
|
+
{ kind: 'simple', css: 'scrollbar-width', key: 'scrollbarWidth' },
|
|
375
|
+
{ kind: 'simple', css: 'scrollbar-color', key: 'scrollbarColor' },
|
|
376
|
+
{ kind: 'simple', css: 'scrollbar-gutter', key: 'scrollbarGutter' },
|
|
377
|
+
{ kind: 'simple', css: 'caret-color', key: 'caretColor' },
|
|
378
|
+
{ kind: 'simple', css: 'accent-color', key: 'accentColor' },
|
|
379
|
+
{ kind: 'simple', css: 'color-scheme', key: 'colorScheme' },
|
|
380
380
|
|
|
381
381
|
// OTHER
|
|
382
|
-
{ kind:
|
|
383
|
-
{ kind:
|
|
384
|
-
{ kind:
|
|
385
|
-
{ kind:
|
|
386
|
-
{ kind:
|
|
387
|
-
{ kind:
|
|
388
|
-
{ kind:
|
|
389
|
-
{ kind:
|
|
390
|
-
{ kind:
|
|
391
|
-
{ kind:
|
|
392
|
-
{ kind:
|
|
393
|
-
{ kind:
|
|
394
|
-
{ kind:
|
|
395
|
-
{ kind:
|
|
396
|
-
{ kind:
|
|
397
|
-
{ kind:
|
|
398
|
-
{ kind:
|
|
399
|
-
{ kind:
|
|
400
|
-
{ kind:
|
|
401
|
-
{ kind:
|
|
402
|
-
{ kind:
|
|
403
|
-
{ kind:
|
|
382
|
+
{ kind: 'simple', css: 'caption-side', key: 'captionSide' },
|
|
383
|
+
{ kind: 'simple', css: 'clear', key: 'clear' },
|
|
384
|
+
{ kind: 'simple', css: 'clip', key: 'clip' },
|
|
385
|
+
{ kind: 'simple', css: 'clip-path', key: 'clipPath' },
|
|
386
|
+
{ kind: 'simple', css: 'content', key: 'content' },
|
|
387
|
+
{ kind: 'simple', css: 'content-visibility', key: 'contentVisibility' },
|
|
388
|
+
{ kind: 'simple', css: 'counter-increment', key: 'counterIncrement' },
|
|
389
|
+
{ kind: 'simple', css: 'counter-reset', key: 'counterReset' },
|
|
390
|
+
{ kind: 'simple', css: 'empty-cells', key: 'emptyCells' },
|
|
391
|
+
{ kind: 'simple', css: 'z-index', key: 'zIndex' },
|
|
392
|
+
{ kind: 'simple', css: 'overflow', key: 'overflow' },
|
|
393
|
+
{ kind: 'simple', css: 'overflow-wrap', key: 'overflowWrap' },
|
|
394
|
+
{ kind: 'simple', css: 'overflow-x', key: 'overflowX' },
|
|
395
|
+
{ kind: 'simple', css: 'overflow-y', key: 'overflowY' },
|
|
396
|
+
{ kind: 'simple', css: 'perspective', key: 'perspective' },
|
|
397
|
+
{ kind: 'simple', css: 'perspective-origin', key: 'perspectiveOrigin' },
|
|
398
|
+
{ kind: 'simple', css: 'quotes', key: 'quotes' },
|
|
399
|
+
{ kind: 'simple', css: 'tab-size', key: 'tabSize' },
|
|
400
|
+
{ kind: 'simple', css: 'table-layout', key: 'tableLayout' },
|
|
401
|
+
{ kind: 'simple', css: 'visibility', key: 'visibility' },
|
|
402
|
+
{ kind: 'simple', css: 'appearance', key: 'appearance' },
|
|
403
|
+
{ kind: 'simple', css: 'image-rendering', key: 'imageRendering' },
|
|
404
404
|
|
|
405
405
|
// Masks
|
|
406
|
-
{ kind:
|
|
407
|
-
{ kind:
|
|
408
|
-
{ kind:
|
|
409
|
-
{ kind:
|
|
406
|
+
{ kind: 'simple', css: 'mask-image', key: 'maskImage' },
|
|
407
|
+
{ kind: 'simple', css: 'mask-size', key: 'maskSize' },
|
|
408
|
+
{ kind: 'simple', css: 'mask-position', key: 'maskPosition' },
|
|
409
|
+
{ kind: 'simple', css: 'mask-repeat', key: 'maskRepeat' },
|
|
410
410
|
|
|
411
411
|
// Shapes
|
|
412
|
-
{ kind:
|
|
413
|
-
{ kind:
|
|
414
|
-
{ kind:
|
|
412
|
+
{ kind: 'simple', css: 'shape-outside', key: 'shapeOutside' },
|
|
413
|
+
{ kind: 'simple', css: 'shape-margin', key: 'shapeMargin' },
|
|
414
|
+
{ kind: 'simple', css: 'shape-image-threshold', key: 'shapeImageThreshold' },
|
|
415
415
|
|
|
416
416
|
// Columns
|
|
417
|
-
{ kind:
|
|
418
|
-
{ kind:
|
|
419
|
-
{ kind:
|
|
420
|
-
{ kind:
|
|
417
|
+
{ kind: 'simple', css: 'column-count', key: 'columnCount' },
|
|
418
|
+
{ kind: 'simple', css: 'column-width', key: 'columnWidth' },
|
|
419
|
+
{ kind: 'simple', css: 'column-rule', key: 'columnRule' },
|
|
420
|
+
{ kind: 'simple', css: 'columns', key: 'columns' },
|
|
421
421
|
|
|
422
422
|
// Fragmentation
|
|
423
|
-
{ kind:
|
|
424
|
-
{ kind:
|
|
425
|
-
{ kind:
|
|
426
|
-
{ kind:
|
|
427
|
-
{ kind:
|
|
428
|
-
{ kind:
|
|
423
|
+
{ kind: 'simple', css: 'break-before', key: 'breakBefore' },
|
|
424
|
+
{ kind: 'simple', css: 'break-after', key: 'breakAfter' },
|
|
425
|
+
{ kind: 'simple', css: 'break-inside', key: 'breakInside' },
|
|
426
|
+
{ kind: 'simple', css: 'orphans', key: 'orphans' },
|
|
427
|
+
{ kind: 'simple', css: 'widows', key: 'widows' },
|
|
428
|
+
{ kind: 'simple', css: 'print-color-adjust', key: 'printColorAdjust' },
|
|
429
429
|
|
|
430
430
|
// CUSTOM ATTRIBUTES
|
|
431
|
-
{ kind:
|
|
432
|
-
{ kind:
|
|
433
|
-
{ kind:
|
|
431
|
+
{ kind: 'special', id: 'hideEmpty' },
|
|
432
|
+
{ kind: 'special', id: 'clearFix' },
|
|
433
|
+
{ kind: 'special', id: 'extendCss' },
|
|
434
434
|
]
|
|
435
435
|
|
|
436
436
|
export default propertyMap
|