Skip to content

Commit a625446

Browse files
authored
[chore] Replace deprecated Flow utility types with modern equivalents (#1493)
- $ReadOnly<T> → Readonly<T> - $ReadOnlyArray<T> → ReadonlyArray<T> - $Keys<T> → keyof T - mixed → unknown
1 parent 09592d0 commit a625446

File tree

8 files changed

+83
-80
lines changed

8 files changed

+83
-80
lines changed

packages/@stylexjs/stylex/src/inject.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ function updateDependentRules(constKey: string): void {
111111
});
112112
}
113113

114-
type InjectArgs = $ReadOnly<{
114+
type InjectArgs = Readonly<{
115115
ltr: string,
116116
rtl?: ?string,
117117
priority: number,

packages/@stylexjs/stylex/src/stylesheet/createOrderedCSSStyleSheet.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
type Groups = { [key: number]: { start: ?number, rules: Array<string> } };
1111
type SeenRules = { [key: string]: boolean };
1212

13-
export type OrderedCSSStyleSheet = $ReadOnly<{
13+
export type OrderedCSSStyleSheet = Readonly<{
1414
getTextContent: () => string,
1515
insert: (cssText: string, groupValue: number) => void,
1616
update: (oldCssText: string, newCssText: string, groupValue: number) => void,

packages/@stylexjs/stylex/src/stylesheet/createSheet.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { canUseDOM } from './utils';
1313
import { createCSSStyleSheet } from './createCSSStyleSheet';
1414
import { createOrderedCSSStyleSheet } from './createOrderedCSSStyleSheet';
1515

16-
type Sheet = $ReadOnly<{
16+
type Sheet = Readonly<{
1717
...OrderedCSSStyleSheet,
1818
}>;
1919

packages/@stylexjs/stylex/src/stylex.js

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,10 @@ const errorForFn = (name: string) =>
6060
new Error(
6161
`Unexpected 'stylex.${name}' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.`,
6262
);
63-
const errorForType = (key: $Keys<typeof types>) => errorForFn(`types.${key}`);
63+
const errorForType = (key: keyof typeof types) => errorForFn(`types.${key}`);
6464

6565
export const create: StyleX$Create = function stylexCreate<
66-
const S: { +[string]: mixed },
66+
const S: { +[string]: unknown },
6767
>(_styles: S): MapNamespaces<S> {
6868
throw errorForFn('create');
6969
};
@@ -89,8 +89,8 @@ export const defineMarker: StyleX$DefineMarker = () => {
8989
};
9090

9191
export const firstThatWorks = <T: string | number>(
92-
..._styles: $ReadOnlyArray<T>
93-
): $ReadOnlyArray<T> => {
92+
..._styles: ReadonlyArray<T>
93+
): ReadonlyArray<T> => {
9494
throw errorForFn('firstThatWorks');
9595
};
9696

@@ -103,22 +103,22 @@ export const positionTry = (_positionTry: PositionTry): string => {
103103
};
104104

105105
export function props(
106-
this: ?mixed,
107-
...styles: $ReadOnlyArray<
106+
this: ?unknown,
107+
...styles: ReadonlyArray<
108108
StyleXArray<
109-
?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
109+
?CompiledStyles | boolean | Readonly<[CompiledStyles, InlineStyles]>,
110110
>,
111111
>
112-
): $ReadOnly<{
112+
): Readonly<{
113113
className?: string,
114114
'data-style-src'?: string,
115-
style?: $ReadOnly<{ [string]: string | number }>,
115+
style?: Readonly<{ [string]: string | number }>,
116116
}> {
117117
const [className, style, dataStyleSrc] = styleq(styles);
118118
const result: {
119119
className?: string,
120120
'data-style-src'?: string,
121-
style?: $ReadOnly<{ [string]: string | number }>,
121+
style?: Readonly<{ [string]: string | number }>,
122122
} = {};
123123
if (className != null && className !== '') {
124124
result.className = className;
@@ -139,7 +139,7 @@ export const viewTransitionClass = (
139139
};
140140

141141
export const defaultMarker = (): MapNamespace<
142-
$ReadOnly<{
142+
Readonly<{
143143
marker: 'default-marker',
144144
}>,
145145
> => {
@@ -227,43 +227,43 @@ export const types = {
227227
*/
228228

229229
type IStyleX = {
230-
(...styles: $ReadOnlyArray<StyleXArray<?CompiledStyles | boolean>>): string,
230+
(...styles: ReadonlyArray<StyleXArray<?CompiledStyles | boolean>>): string,
231231
create: StyleX$Create,
232232
createTheme: StyleX$CreateTheme,
233233
defineConsts: StyleX$DefineConsts,
234234
defineVars: StyleX$DefineVars,
235235
defaultMarker: () => MapNamespace<
236-
$ReadOnly<{
236+
Readonly<{
237237
marker: 'default-marker',
238238
}>,
239239
>,
240240
defineMarker: StyleX$DefineMarker,
241241
firstThatWorks: <T: string | number>(
242-
...v: $ReadOnlyArray<T>
243-
) => $ReadOnlyArray<T>,
242+
...v: ReadonlyArray<T>
243+
) => ReadonlyArray<T>,
244244
keyframes: (keyframes: Keyframes) => string,
245245
positionTry: (positionTry: PositionTry) => string,
246246
props: (
247-
this: ?mixed,
248-
...styles: $ReadOnlyArray<
247+
this: ?unknown,
248+
...styles: ReadonlyArray<
249249
StyleXArray<
250-
?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
250+
?CompiledStyles | boolean | Readonly<[CompiledStyles, InlineStyles]>,
251251
>,
252252
>
253-
) => $ReadOnly<{
253+
) => Readonly<{
254254
className?: string,
255255
'data-style-src'?: string,
256-
style?: $ReadOnly<{ [string]: string | number }>,
256+
style?: Readonly<{ [string]: string | number }>,
257257
}>,
258258
viewTransitionClass: (viewTransitionClass: ViewTransitionClass) => string,
259259
types: typeof types,
260260
when: typeof when,
261-
__customProperties?: { [string]: mixed },
261+
__customProperties?: { [string]: unknown },
262262
...
263263
};
264264

265265
function _legacyMerge(
266-
...styles: $ReadOnlyArray<StyleXArray<?CompiledStyles | boolean>>
266+
...styles: ReadonlyArray<StyleXArray<?CompiledStyles | boolean>>
267267
): string {
268268
const [className] = styleq(styles);
269269
return className;

packages/@stylexjs/stylex/src/types/StyleXCSSTypes.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -955,14 +955,14 @@ type top = number | string;
955955

956956
type OptionalArray<T> = Array<T> | T;
957957

958-
export type SupportedVendorSpecificCSSProperties = $ReadOnly<{
958+
export type SupportedVendorSpecificCSSProperties = Readonly<{
959959
MozOsxFontSmoothing?: null | 'grayscale',
960960
WebkitAppearance?: null | appearance,
961961
WebkitFontSmoothing?: null | 'antialiased',
962962
WebkitTapHighlightColor?: null | color,
963963
}>;
964964

965-
export type CSSProperties = $ReadOnly<{
965+
export type CSSProperties = Readonly<{
966966
// NOTE: adding a non-CSS property here for support themes in Stylex.
967967
theme?: all | string,
968968

packages/@stylexjs/stylex/src/types/StyleXOpaqueTypes.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@
1111
// value: T;
1212
// }
1313
// This is the type for the variables object
14-
export opaque type StyleXVar<+_Val: mixed>: string = string;
14+
export opaque type StyleXVar<+_Val: unknown>: string = string;
1515

1616
export opaque type StyleXClassNameFor<+_K, +_V>: string = string;

packages/@stylexjs/stylex/src/types/StyleXTypes.js

Lines changed: 54 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ import type { CSSType } from './VarTypes';
1616
export type { StyleXClassNameFor, StyleXVar } from './StyleXOpaqueTypes';
1717

1818
// Using an opaque type to declare ClassNames generated by stylex.
19-
export type StyleXClassNameForValue<+V> = StyleXClassNameFor<mixed, V>;
20-
export type StyleXClassNameForKey<+K> = StyleXClassNameFor<K, mixed>;
21-
export type StyleXClassName = StyleXClassNameFor<mixed, mixed>;
19+
export type StyleXClassNameForValue<+V> = StyleXClassNameFor<unknown, V>;
20+
export type StyleXClassNameForKey<+K> = StyleXClassNameFor<K, unknown>;
21+
export type StyleXClassName = StyleXClassNameFor<unknown, unknown>;
2222

2323
// Type for arbitrarily nested Array.
24-
export type StyleXArray<+T> = T | $ReadOnlyArray<StyleXArray<T>>;
24+
export type StyleXArray<+T> = T | ReadonlyArray<StyleXArray<T>>;
2525

26-
type CSSPropertiesWithExtras = $ReadOnly<{
26+
type CSSPropertiesWithExtras = Readonly<{
2727
...CSSProperties,
2828
'::before'?: CSSProperties,
2929
'::after'?: CSSProperties,
@@ -47,21 +47,21 @@ type CSSPropertiesWithExtras = $ReadOnly<{
4747
'::-webkit-search-results-decoration'?: CSSProperties,
4848
}>;
4949

50-
export type NestedCSSPropTypes = $ReadOnly<{
50+
export type NestedCSSPropTypes = Readonly<{
5151
[Key in keyof CSSPropertiesWithExtras]?: StyleXClassNameForKey<Key>,
5252
}>;
5353

5454
export type StyleXSingleStyle = false | ?NestedCSSPropTypes;
5555
export type XStyle<+T = NestedCSSPropTypes> = StyleXArray<
56-
false | ?$ReadOnly<{ ...T, $$css: true }>,
56+
false | ?Readonly<{ ...T, $$css: true }>,
5757
>;
5858

59-
export type XStyleWithout<+T: { +[_K in keyof NestedCSSPropTypes]?: mixed }> =
60-
XStyle<$ReadOnly<Omit<NestedCSSPropTypes, $Keys<T>>>>;
59+
export type XStyleWithout<+T: { +[_K in keyof NestedCSSPropTypes]?: unknown }> =
60+
XStyle<Readonly<Omit<NestedCSSPropTypes, keyof T>>>;
6161

62-
export type Keyframes = $ReadOnly<{ [name: string]: CSSProperties, ... }>;
62+
export type Keyframes = Readonly<{ [name: string]: CSSProperties, ... }>;
6363

64-
export type PositionTry = $ReadOnly<{
64+
export type PositionTry = Readonly<{
6565
// Anchor Positioning Properties
6666
positionAnchor?: CSSProperties['positionAnchor'],
6767
positionArea?: CSSProperties['positionArea'],
@@ -108,14 +108,14 @@ export type PositionTry = $ReadOnly<{
108108
placeSelf?: CSSProperties['placeSelf'],
109109
}>;
110110

111-
export type ViewTransitionClass = $ReadOnly<{
111+
export type ViewTransitionClass = Readonly<{
112112
group?: CSSProperties,
113113
imagePair?: CSSProperties,
114114
old?: CSSProperties,
115115
new?: CSSProperties,
116116
}>;
117117

118-
export type LegacyThemeStyles = $ReadOnly<{
118+
export type LegacyThemeStyles = Readonly<{
119119
[constantName: string]: string,
120120
...
121121
}>;
@@ -127,85 +127,88 @@ type ComplexStyleValueType<+T> =
127127
: U
128128
: T extends string | number | null
129129
? T
130-
: T extends $ReadOnlyArray<infer U>
130+
: T extends ReadonlyArray<infer U>
131131
? ComplexStyleValueType<U>
132132
: T extends { +default: infer A, +[string]: infer B }
133133
? ComplexStyleValueType<A> | ComplexStyleValueType<B>
134-
: $ReadOnly<T>;
134+
: Readonly<T>;
135135

136-
type _MapNamespace<+CSS: { +[string]: mixed }> = $ReadOnly<{
136+
type _MapNamespace<+CSS: { +[string]: unknown }> = Readonly<{
137137
[Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>,
138138
}>;
139-
export type MapNamespace<+CSS: { +[string]: mixed }> = $ReadOnly<{
139+
export type MapNamespace<+CSS: { +[string]: unknown }> = Readonly<{
140140
..._MapNamespace<CSS>,
141141
$$css: true,
142142
}>;
143-
export type MapNamespaces<+S: { +[string]: mixed }> = $ReadOnly<{
143+
export type MapNamespaces<+S: { +[string]: unknown }> = Readonly<{
144144
[Key in keyof S]: S[Key] extends (...args: infer Args) => infer Obj
145-
? (...args: Args) => $ReadOnly<[MapNamespace<Obj>, InlineStyles]>
145+
? (...args: Args) => Readonly<[MapNamespace<Obj>, InlineStyles]>
146146
: MapNamespace<S[Key]>,
147147
}>;
148148
export type StyleX$Create = <const S: { +[string]: { ... } }>(
149149
styles: S,
150150
) => MapNamespaces<S>;
151151

152-
export type CompiledStyles = $ReadOnly<{
152+
export type CompiledStyles = Readonly<{
153153
$$css: true,
154154
[key: string]: StyleXClassName,
155155
}>;
156-
export type InlineStyles = $ReadOnly<{
156+
export type InlineStyles = Readonly<{
157157
$$css?: void,
158158
[key: string]: string,
159159
}>;
160160

161-
type _GenStylePropType<+CSS: { +[string]: mixed }> = $ReadOnly<{
162-
[Key in keyof CSS]: CSS[Key] extends { +[string]: mixed }
163-
? StyleXClassNameFor<Key, $ReadOnly<CSS[Key]>>
161+
type _GenStylePropType<+CSS: { +[string]: unknown }> = Readonly<{
162+
[Key in keyof CSS]: CSS[Key] extends { +[string]: unknown }
163+
? StyleXClassNameFor<Key, Readonly<CSS[Key]>>
164164
: StyleXClassNameFor<Key, CSS[Key]>,
165165
}>;
166-
type GenStylePropType<+CSS: { +[string]: mixed }> = $ReadOnly<{
166+
type GenStylePropType<+CSS: { +[string]: unknown }> = Readonly<{
167167
..._GenStylePropType<CSS>,
168168
$$css: true,
169169
}>;
170170

171171
// Replace `XStyle` with this.
172-
export type StaticStyles<+CSS: { +[string]: mixed } = CSSPropertiesWithExtras> =
173-
StyleXArray<false | ?GenStylePropType<$ReadOnly<CSS>>>;
172+
export type StaticStyles<
173+
+CSS: { +[string]: unknown } = CSSPropertiesWithExtras,
174+
> = StyleXArray<false | ?GenStylePropType<Readonly<CSS>>>;
174175

175-
export type StaticStylesWithout<+CSS: { +[string]: mixed }> = StaticStyles<
176-
Omit<CSSPropertiesWithExtras, $Keys<CSS>>,
176+
export type StaticStylesWithout<+CSS: { +[string]: unknown }> = StaticStyles<
177+
Omit<CSSPropertiesWithExtras, keyof CSS>,
177178
>;
178179

179-
export type StyleXStyles<+CSS: { +[string]: mixed } = CSSPropertiesWithExtras> =
180-
StyleXArray<
181-
| ?false
182-
| GenStylePropType<$ReadOnly<CSS>>
183-
| $ReadOnly<[GenStylePropType<$ReadOnly<CSS>>, InlineStyles]>,
184-
>;
180+
export type StyleXStyles<
181+
+CSS: { +[string]: unknown } = CSSPropertiesWithExtras,
182+
> = StyleXArray<
183+
| ?false
184+
| GenStylePropType<Readonly<CSS>>
185+
| Readonly<[GenStylePropType<Readonly<CSS>>, InlineStyles]>,
186+
>;
185187

186-
export type StyleXStylesWithout<+CSS: { +[string]: mixed }> = StyleXStyles<
187-
Omit<CSSPropertiesWithExtras, $Keys<CSS>>,
188+
export type StyleXStylesWithout<+CSS: { +[string]: unknown }> = StyleXStyles<
189+
Omit<CSSPropertiesWithExtras, keyof CSS>,
188190
>;
189191

190-
export type VarGroup<+Tokens: { +[string]: mixed }, +_ID: string = string> = {
192+
export type VarGroup<+Tokens: { +[string]: unknown }, +_ID: string = string> = {
191193
+[Key in keyof Tokens]: StyleXVar<Tokens[Key]>,
192194
};
193195

194-
export type TokensFromVarGroup<+T: VarGroup<{ +[string]: mixed }>> = $ReadOnly<{
195-
[Key in keyof T]: UnwrapVar<T[Key]>,
196-
}>;
196+
export type TokensFromVarGroup<+T: VarGroup<{ +[string]: unknown }>> =
197+
Readonly<{
198+
[Key in keyof T]: UnwrapVar<T[Key]>,
199+
}>;
197200

198-
type IDFromVarGroup<+T: VarGroup<{ +[string]: mixed }>> =
199-
T extends VarGroup<{ +[string]: mixed }, infer ID> ? ID : empty;
201+
type IDFromVarGroup<+T: VarGroup<{ +[string]: unknown }>> =
202+
T extends VarGroup<{ +[string]: unknown }, infer ID> ? ID : empty;
200203

201204
type NestedVarObject<+T> =
202205
| T
203-
| $ReadOnly<{
206+
| Readonly<{
204207
default: NestedVarObject<T>,
205208
[string]: NestedVarObject<T>,
206209
}>;
207210

208-
type TTokens = $ReadOnly<{
211+
type TTokens = Readonly<{
209212
[string]:
210213
| NestedVarObject<null | string | number>
211214
| StyleXVar<null | string | number>
@@ -231,24 +234,24 @@ export type StyleX$DefineConsts = <
231234
tokens: DefaultTokens,
232235
) => DefaultTokens;
233236

234-
// opaque type ThemeKey<+_VG: VarGroup<{ +[string]: mixed }>>: string = string;
237+
// opaque type ThemeKey<+_VG: VarGroup<{ +[string]: unknown }>>: string = string;
235238
export opaque type Theme<
236-
+T: VarGroup<{ +[string]: mixed }, string>,
239+
+T: VarGroup<{ +[string]: unknown }, string>,
237240
+_Tag: string = string,
238-
>: $ReadOnly<{
241+
>: Readonly<{
239242
$$css: true,
240243
theme: StyleXClassNameFor<'theme', IDFromVarGroup<T>>,
241-
}> = $ReadOnly<{
244+
}> = Readonly<{
242245
$$css: true,
243246
theme: StyleXClassNameFor<'theme', IDFromVarGroup<T>>,
244247
}>;
245248

246-
export type OverridesForTokenType<+Config: { +[string]: mixed }> = {
249+
export type OverridesForTokenType<+Config: { +[string]: unknown }> = {
247250
[Key in keyof Config]?: NestedVarObject<Config[Key]>,
248251
};
249252

250253
export type StyleX$CreateTheme = <
251-
BaseTokens: VarGroup<{ +[string]: mixed }>,
254+
BaseTokens: VarGroup<{ +[string]: unknown }>,
252255
ID: string = string,
253256
>(
254257
baseTokens: BaseTokens,

packages/@stylexjs/stylex/src/types/StyleXUtils.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
export type ValueWithDefault<+T> =
1111
| T
12-
| $ReadOnly<{
12+
| Readonly<{
1313
default: ValueWithDefault<T>,
1414
[string]: ValueWithDefault<T>,
1515
}>;

0 commit comments

Comments
 (0)