@stylexjs/shared 0.5.1 → 0.6.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/lib/convert-to-className.d.ts +5 -1
- package/lib/convert-to-className.js +33 -1
- package/lib/convert-to-className.js.flow +5 -1
- package/lib/messages.d.ts +1 -0
- package/lib/messages.js +3 -2
- package/lib/messages.js.flow +1 -0
- package/lib/stylex-create-theme.js +30 -40
- package/lib/stylex-define-vars.d.ts +2 -6
- package/lib/stylex-define-vars.js +40 -21
- package/lib/stylex-define-vars.js.flow +1 -4
- package/lib/stylex-first-that-works.d.ts +1 -1
- package/lib/stylex-first-that-works.js.flow +1 -1
- package/lib/stylex-vars-utils.d.ts +27 -0
- package/lib/stylex-vars-utils.js +69 -0
- package/lib/stylex-vars-utils.js.flow +31 -0
- package/lib/types/index.d.ts +127 -92
- package/lib/types/index.js +28 -72
- package/lib/types/index.js.flow +138 -99
- package/lib/utils/normalize-value.js +1 -2
- package/lib/utils/normalizers/zero-dimensions.d.ts +2 -2
- package/lib/utils/normalizers/zero-dimensions.js +6 -0
- package/lib/utils/normalizers/zero-dimensions.js.flow +2 -2
- package/package.json +2 -2
package/lib/types/index.js.flow
CHANGED
@@ -15,15 +15,23 @@
|
|
15
15
|
// We want on type that defines CSS Types
|
16
16
|
// Option 2: Do a union type and make
|
17
17
|
|
18
|
-
// interface
|
18
|
+
// interface CSSType {
|
19
19
|
// toString(): string;
|
20
20
|
// }
|
21
21
|
|
22
|
-
type
|
23
|
-
|
|
22
|
+
type NestedWithNumbers =
|
23
|
+
| number
|
24
|
+
| string
|
24
25
|
| $ReadOnly<{
|
25
|
-
default:
|
26
|
-
[string]:
|
26
|
+
default: NestedWithNumbers,
|
27
|
+
[string]: NestedWithNumbers,
|
28
|
+
}>;
|
29
|
+
|
30
|
+
type ValueWithDefault =
|
31
|
+
| string
|
32
|
+
| $ReadOnly<{
|
33
|
+
default: ValueWithDefault,
|
34
|
+
[string]: ValueWithDefault,
|
27
35
|
}>;
|
28
36
|
|
29
37
|
type CSSSyntax =
|
@@ -43,199 +51,230 @@ type CSSSyntax =
|
|
43
51
|
| '<custom-ident>'
|
44
52
|
| '<transform-list>';
|
45
53
|
|
46
|
-
type CSSSyntaxType = CSSSyntax
|
47
|
-
|
48
|
-
declare export class CSSType {}
|
54
|
+
type CSSSyntaxType = CSSSyntax;
|
49
55
|
|
50
|
-
|
51
|
-
+value: ValueWithDefault
|
56
|
+
declare class BaseCSSType {
|
57
|
+
+value: ValueWithDefault;
|
58
|
+
+syntax: CSSSyntaxType;
|
59
|
+
constructor(value: ValueWithDefault): void;
|
60
|
+
}
|
61
|
+
export interface CSSType<+_T: string | number = string | number> {
|
62
|
+
+value: ValueWithDefault;
|
52
63
|
+syntax: CSSSyntaxType;
|
53
64
|
}
|
54
65
|
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
66
|
+
declare export const isCSSType: (
|
67
|
+
value: mixed,
|
68
|
+
) => value is CSSType<string | number>;
|
69
|
+
|
70
|
+
type AngleValue = string;
|
71
|
+
declare export class Angle<+T: AngleValue>
|
72
|
+
extends BaseCSSType
|
73
|
+
implements CSSType<T>
|
59
74
|
{
|
60
|
-
+value: ValueWithDefault
|
75
|
+
+value: ValueWithDefault;
|
61
76
|
+syntax: CSSSyntaxType;
|
62
77
|
static +syntax: CSSSyntaxType;
|
63
|
-
|
64
|
-
static create<T: AnguleValue = AnguleValue>(
|
65
|
-
value: ValueWithDefault<T>,
|
66
|
-
): Angle<T>;
|
78
|
+
static create<T: AngleValue = AngleValue>(value: ValueWithDefault): Angle<T>;
|
67
79
|
}
|
68
|
-
declare export const angle:
|
80
|
+
declare export const angle: <T: AngleValue = AngleValue>(
|
81
|
+
value: ValueWithDefault,
|
82
|
+
// $FlowIgnore[method-unbinding]
|
83
|
+
) => Angle<T>;
|
69
84
|
|
70
85
|
type ColorValue = string;
|
71
86
|
declare export class Color<+T: ColorValue>
|
72
|
-
extends
|
73
|
-
implements
|
87
|
+
extends BaseCSSType
|
88
|
+
implements CSSType<T>
|
74
89
|
{
|
75
|
-
+value: ValueWithDefault
|
90
|
+
+value: ValueWithDefault;
|
76
91
|
+syntax: CSSSyntaxType;
|
77
|
-
|
78
|
-
static create<T: ColorValue = ColorValue>(
|
79
|
-
value: ValueWithDefault<T>,
|
80
|
-
): Color<T>;
|
92
|
+
static create<T: ColorValue = ColorValue>(value: ValueWithDefault): Color<T>;
|
81
93
|
}
|
82
|
-
declare export const color:
|
94
|
+
declare export const color: <T: ColorValue = ColorValue>(
|
95
|
+
value: ValueWithDefault,
|
96
|
+
// $FlowIgnore[method-unbinding]
|
97
|
+
) => Color<T>;
|
83
98
|
|
84
99
|
type URLValue = string;
|
85
100
|
|
86
|
-
declare export class Url<+T: URLValue>
|
87
|
-
|
101
|
+
declare export class Url<+T: URLValue>
|
102
|
+
extends BaseCSSType
|
103
|
+
implements CSSType<T>
|
104
|
+
{
|
105
|
+
+value: ValueWithDefault;
|
88
106
|
+syntax: CSSSyntaxType;
|
89
|
-
|
90
|
-
static create<T: URLValue = URLValue>(value: ValueWithDefault<T>): Url<T>;
|
107
|
+
static create<T: URLValue = URLValue>(value: ValueWithDefault): Url<T>;
|
91
108
|
}
|
92
|
-
declare export const url:
|
109
|
+
declare export const url: <T: URLValue = URLValue>(
|
110
|
+
value: ValueWithDefault,
|
111
|
+
) => Url<T>;
|
93
112
|
|
94
113
|
type ImageValue = string;
|
95
114
|
|
96
115
|
declare export class Image<+T: ImageValue>
|
97
116
|
extends Url<T>
|
98
|
-
implements
|
117
|
+
implements CSSType<T>
|
99
118
|
{
|
100
|
-
+value: ValueWithDefault
|
119
|
+
+value: ValueWithDefault;
|
101
120
|
+syntax: CSSSyntaxType;
|
102
|
-
constructor(value: ValueWithDefault
|
103
|
-
static create<T: ImageValue = ImageValue>(
|
104
|
-
value: ValueWithDefault<T>,
|
105
|
-
): Image<T>;
|
121
|
+
constructor(value: ValueWithDefault): void;
|
122
|
+
static create<T: ImageValue = ImageValue>(value: ValueWithDefault): Image<T>;
|
106
123
|
}
|
107
|
-
declare export const image:
|
124
|
+
declare export const image: <T: ImageValue = ImageValue>(
|
125
|
+
value: ValueWithDefault,
|
126
|
+
// $FlowIgnore[method-unbinding]
|
127
|
+
) => Image<T>;
|
108
128
|
|
109
129
|
type IntegerValue = number;
|
110
130
|
|
111
131
|
declare export class Integer<+T: IntegerValue>
|
112
|
-
extends
|
113
|
-
implements
|
132
|
+
extends BaseCSSType
|
133
|
+
implements CSSType<T>
|
114
134
|
{
|
115
|
-
+value: ValueWithDefault
|
135
|
+
+value: ValueWithDefault;
|
116
136
|
+syntax: CSSSyntaxType;
|
117
|
-
constructor(value: ValueWithDefault<T>): void;
|
118
137
|
static create<T: IntegerValue = IntegerValue>(value: T): Integer<T>;
|
119
138
|
}
|
120
|
-
declare export const integer:
|
139
|
+
declare export const integer: <T: IntegerValue = IntegerValue>(
|
140
|
+
value: T,
|
141
|
+
) => Integer<T>;
|
121
142
|
|
122
143
|
type LengthPercentageValue = string;
|
123
144
|
|
124
|
-
declare export class LengthPercentage<+
|
125
|
-
extends
|
126
|
-
implements
|
145
|
+
declare export class LengthPercentage<+_T: LengthPercentageValue>
|
146
|
+
extends BaseCSSType
|
147
|
+
implements CSSType<string>
|
127
148
|
{
|
128
|
-
+value: ValueWithDefault
|
149
|
+
+value: ValueWithDefault;
|
129
150
|
+syntax: CSSSyntaxType;
|
130
|
-
|
131
|
-
|
132
|
-
value: ValueWithDefault<T>,
|
151
|
+
static createLength<_T: LengthPercentageValue | number>(
|
152
|
+
value: ValueWithDefault,
|
133
153
|
): LengthPercentage<string>;
|
134
|
-
static createPercentage<
|
135
|
-
value: ValueWithDefault
|
154
|
+
static createPercentage<_T: LengthPercentageValue | number>(
|
155
|
+
value: ValueWithDefault,
|
136
156
|
): LengthPercentage<string>;
|
137
157
|
}
|
138
|
-
declare export const lengthPercentage:
|
158
|
+
declare export const lengthPercentage: <_T: LengthPercentageValue | number>(
|
159
|
+
value: ValueWithDefault,
|
160
|
+
// $FlowIgnore[method-unbinding]
|
161
|
+
) => LengthPercentage<string>;
|
139
162
|
|
140
163
|
type LengthValue = number | string;
|
141
164
|
|
142
|
-
declare export class Length<+
|
165
|
+
declare export class Length<+_T: LengthValue>
|
143
166
|
extends LengthPercentage<string>
|
144
|
-
implements
|
167
|
+
implements CSSType<string>
|
145
168
|
{
|
146
|
-
+value: ValueWithDefault
|
169
|
+
+value: ValueWithDefault;
|
147
170
|
+syntax: CSSSyntaxType;
|
148
|
-
constructor(value: ValueWithDefault<T>): void;
|
149
171
|
static create<T: LengthValue = LengthValue>(
|
150
|
-
value:
|
172
|
+
value: NestedWithNumbers,
|
151
173
|
): Length<T>;
|
152
174
|
}
|
153
|
-
declare export const length:
|
175
|
+
declare export const length: <T: LengthValue = LengthValue>(
|
176
|
+
value: NestedWithNumbers,
|
177
|
+
// $FlowIgnore[method-unbinding]
|
178
|
+
) => Length<T>;
|
154
179
|
|
155
180
|
type PercentageValue = string | number;
|
156
181
|
|
157
|
-
declare export class Percentage<+
|
182
|
+
declare export class Percentage<+_T: PercentageValue>
|
158
183
|
extends LengthPercentage<string>
|
159
|
-
implements
|
184
|
+
implements CSSType<string>
|
160
185
|
{
|
161
|
-
+value: ValueWithDefault
|
186
|
+
+value: ValueWithDefault;
|
162
187
|
+syntax: CSSSyntaxType;
|
163
|
-
constructor(value: ValueWithDefault<T>): void;
|
164
188
|
static create<T: PercentageValue = PercentageValue>(
|
165
|
-
value:
|
189
|
+
value: NestedWithNumbers,
|
166
190
|
): Percentage<T>;
|
167
191
|
}
|
168
|
-
declare export const percentage:
|
192
|
+
declare export const percentage: <T: PercentageValue = PercentageValue>(
|
193
|
+
value: NestedWithNumbers,
|
194
|
+
// $FlowIgnore[method-unbinding]
|
195
|
+
) => Percentage<T>;
|
169
196
|
|
170
197
|
type NumberValue = number;
|
171
198
|
|
172
199
|
declare export class Num<+T: NumberValue>
|
173
|
-
extends
|
174
|
-
implements
|
200
|
+
extends BaseCSSType
|
201
|
+
implements CSSType<T>
|
175
202
|
{
|
176
|
-
+value: ValueWithDefault
|
203
|
+
+value: ValueWithDefault;
|
177
204
|
+syntax: CSSSyntaxType;
|
178
|
-
|
179
|
-
static create<T: NumberValue = NumberValue>(
|
180
|
-
value: ValueWithDefault<T>,
|
181
|
-
): Num<T>;
|
205
|
+
static create<T: NumberValue = NumberValue>(value: NestedWithNumbers): Num<T>;
|
182
206
|
}
|
183
|
-
declare export const number:
|
207
|
+
declare export const number: <T: NumberValue = NumberValue>(
|
208
|
+
value: NestedWithNumbers,
|
209
|
+
// $FlowIgnore[method-unbinding]
|
210
|
+
) => Num<T>;
|
184
211
|
|
185
212
|
type ResolutionValue = string | 0;
|
186
213
|
|
187
214
|
declare export class Resolution<+T: ResolutionValue>
|
188
|
-
extends
|
189
|
-
implements
|
215
|
+
extends BaseCSSType
|
216
|
+
implements CSSType<T>
|
190
217
|
{
|
191
|
-
+value: ValueWithDefault
|
218
|
+
+value: ValueWithDefault;
|
192
219
|
+syntax: CSSSyntaxType;
|
193
|
-
constructor(value: ValueWithDefault<T>): void;
|
194
220
|
static create<T: ResolutionValue = ResolutionValue>(
|
195
|
-
value: ValueWithDefault
|
221
|
+
value: ValueWithDefault,
|
196
222
|
): Resolution<T>;
|
197
223
|
}
|
198
|
-
declare export const resolution:
|
224
|
+
declare export const resolution: <T: ResolutionValue = ResolutionValue>(
|
225
|
+
value: ValueWithDefault,
|
226
|
+
// $FlowIgnore[method-unbinding]
|
227
|
+
) => Resolution<T>;
|
199
228
|
|
200
229
|
type TimeValue = string | 0;
|
201
230
|
|
202
231
|
declare export class Time<+T: TimeValue>
|
203
|
-
extends
|
204
|
-
implements
|
232
|
+
extends BaseCSSType
|
233
|
+
implements CSSType<T>
|
205
234
|
{
|
206
|
-
+value: ValueWithDefault
|
235
|
+
+value: ValueWithDefault;
|
207
236
|
+syntax: CSSSyntaxType;
|
208
|
-
|
209
|
-
static create<T: TimeValue = TimeValue>(value: ValueWithDefault<T>): Time<T>;
|
237
|
+
static create<T: TimeValue = TimeValue>(value: ValueWithDefault): Time<T>;
|
210
238
|
}
|
211
|
-
declare export const time:
|
239
|
+
declare export const time: <T: TimeValue = TimeValue>(
|
240
|
+
value: ValueWithDefault,
|
241
|
+
// $FlowIgnore[method-unbinding]
|
242
|
+
) => Time<T>;
|
212
243
|
|
213
244
|
type TransformFunctionValue = string;
|
214
245
|
|
215
246
|
declare export class TransformFunction<+T: TransformFunctionValue>
|
216
|
-
extends
|
217
|
-
implements
|
247
|
+
extends BaseCSSType
|
248
|
+
implements CSSType<T>
|
218
249
|
{
|
219
|
-
+value: ValueWithDefault
|
250
|
+
+value: ValueWithDefault;
|
220
251
|
+syntax: CSSSyntaxType;
|
221
|
-
constructor(value: ValueWithDefault<T>): void;
|
222
252
|
static create<T: TransformFunctionValue = TransformFunctionValue>(
|
223
|
-
value: ValueWithDefault
|
253
|
+
value: ValueWithDefault,
|
224
254
|
): TransformFunction<T>;
|
225
255
|
}
|
226
|
-
declare export const transformFunction:
|
256
|
+
declare export const transformFunction: <
|
257
|
+
T: TransformFunctionValue = TransformFunctionValue,
|
258
|
+
>(
|
259
|
+
value: ValueWithDefault,
|
260
|
+
// $FlowIgnore[method-unbinding]
|
261
|
+
) => TransformFunction<T>;
|
227
262
|
|
228
263
|
type TransformListValue = string;
|
229
264
|
|
230
265
|
declare export class TransformList<T: TransformListValue>
|
231
|
-
extends
|
232
|
-
implements
|
266
|
+
extends BaseCSSType
|
267
|
+
implements CSSType<T>
|
233
268
|
{
|
234
|
-
+value: ValueWithDefault
|
269
|
+
+value: ValueWithDefault;
|
235
270
|
+syntax: CSSSyntaxType;
|
236
|
-
constructor(value: ValueWithDefault<T>): void;
|
237
271
|
static create<T: TransformListValue = TransformListValue>(
|
238
|
-
value: ValueWithDefault
|
272
|
+
value: ValueWithDefault,
|
239
273
|
): TransformList<T>;
|
240
274
|
}
|
241
|
-
declare export const transformList:
|
275
|
+
declare export const transformList: <
|
276
|
+
T: TransformListValue = TransformListValue,
|
277
|
+
>(
|
278
|
+
value: ValueWithDefault,
|
279
|
+
// $FlowIgnore[method-unbinding]
|
280
|
+
) => TransformList<T>;
|
@@ -9,12 +9,11 @@ var _leadingZero = _interopRequireDefault(require("./normalizers/leading-zero"))
|
|
9
9
|
var _quotes = _interopRequireDefault(require("./normalizers/quotes"));
|
10
10
|
var _timings = _interopRequireDefault(require("./normalizers/timings"));
|
11
11
|
var _whitespace = _interopRequireDefault(require("./normalizers/whitespace"));
|
12
|
-
var _zeroDimensions = _interopRequireDefault(require("./normalizers/zero-dimensions"));
|
13
12
|
var _detectUnclosedFns = _interopRequireDefault(require("./normalizers/detect-unclosed-fns"));
|
14
13
|
var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
|
15
14
|
var _convertCamelCaseValues = _interopRequireDefault(require("./normalizers/convert-camel-case-values"));
|
16
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
17
|
-
const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default,
|
16
|
+
const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _leadingZero.default, _quotes.default, _convertCamelCaseValues.default];
|
18
17
|
function normalizeValue(value, key, _ref) {
|
19
18
|
let {
|
20
19
|
useRemForFontSize
|
@@ -8,8 +8,8 @@
|
|
8
8
|
*/
|
9
9
|
|
10
10
|
/**
|
11
|
-
* Remove units in zero values, except when required: in angles and
|
12
|
-
* in which case make them consistent 0deg and
|
11
|
+
* Remove units in zero values, except when required: in angles, timings, fractions, and percentages,
|
12
|
+
* in which case make them consistent 0deg, 0s, 0fr, and 0%.
|
13
13
|
*/
|
14
14
|
|
15
15
|
declare function normalizeZeroDimensions(
|
@@ -8,6 +8,8 @@ var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser")
|
|
8
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
9
9
|
const angles = ['deg', 'grad', 'turn', 'rad'];
|
10
10
|
const timings = ['ms', 's'];
|
11
|
+
const fraction = 'fr';
|
12
|
+
const percentage = '%';
|
11
13
|
function normalizeZeroDimensions(ast, _) {
|
12
14
|
let endFunction = 0;
|
13
15
|
ast.walk(node => {
|
@@ -28,6 +30,10 @@ function normalizeZeroDimensions(ast, _) {
|
|
28
30
|
node.value = '0deg';
|
29
31
|
} else if (timings.indexOf(dimension.unit) !== -1) {
|
30
32
|
node.value = '0s';
|
33
|
+
} else if (dimension.unit === fraction) {
|
34
|
+
node.value = '0fr';
|
35
|
+
} else if (dimension.unit === percentage) {
|
36
|
+
node.value = '0%';
|
31
37
|
} else if (!endFunction) {
|
32
38
|
node.value = '0';
|
33
39
|
}
|
@@ -8,8 +8,8 @@
|
|
8
8
|
*/
|
9
9
|
|
10
10
|
/**
|
11
|
-
* Remove units in zero values, except when required: in angles and
|
12
|
-
* in which case make them consistent 0deg and
|
11
|
+
* Remove units in zero values, except when required: in angles, timings, fractions, and percentages,
|
12
|
+
* in which case make them consistent 0deg, 0s, 0fr, and 0%.
|
13
13
|
*/
|
14
14
|
|
15
15
|
declare export default function normalizeZeroDimensions(
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@stylexjs/shared",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.6.1",
|
4
4
|
"main": "lib/index.js",
|
5
5
|
"repository": "https://www.github.com/facebook/stylex",
|
6
6
|
"license": "MIT",
|
@@ -13,7 +13,7 @@
|
|
13
13
|
"postcss-value-parser": "^4.1.0"
|
14
14
|
},
|
15
15
|
"devDependencies": {
|
16
|
-
"@stylexjs/scripts": "0.
|
16
|
+
"@stylexjs/scripts": "0.6.1"
|
17
17
|
},
|
18
18
|
"jest": {
|
19
19
|
"snapshotFormat": {
|