Skip to content

Commit 005ae11

Browse files
NickGerlemanmeta-codesync[bot]
NickGerleman
authored and
meta-codesync[bot]
committed
Wire native CSS color parsing
Summary: When `enableNativeCSSParsing()` is on, CSS color strings (named colors, hex, rgb/rgba, hsl/hsla, hwb) are parsed natively using the existing CSS color parser instead of being preprocessed to integers by `processColor` in JS. Native changes: - `fromRawValueShared.h`: Wire CSS color string parsing at the top of `fromRawValueShared()`, gated behind the flag - `graphics/BUCK`: Add `react/renderer/css:css` and `react/featureflags:featureflags` deps JS changes: - Export `colorAttribute` from `ReactNativeStyleAttributes.js` - Update all ViewConfig files to import and use `colorAttribute` instead of inlining `{process: processColor}` Changelog: [Internal] Differential Revision: D94052731
1 parent ef66dec commit 005ae11

9 files changed

Lines changed: 100 additions & 147 deletions

File tree

‎packages/react-native/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
1313
import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';
1414

1515
import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
16+
import {colorAttribute} from '../View/ReactNativeStyleAttributes';
1617

1718
export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
1819
uiViewClassName: 'AndroidHorizontalScrollView',
@@ -22,7 +23,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
2223
decelerationRate: true,
2324
disableIntervalMomentum: true,
2425
maintainVisibleContentPosition: true,
25-
endFillColor: {process: require('../../StyleSheet/processColor').default},
26+
endFillColor: colorAttribute,
2627
fadingEdgeLength: true,
2728
nestedScrollEnabled: true,
2829
overScrollMode: true,
@@ -44,20 +45,14 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
4445
borderBottomRightRadius: true,
4546
borderRadius: true,
4647
borderStyle: true,
47-
borderRightColor: {
48-
process: require('../../StyleSheet/processColor').default,
49-
},
50-
borderColor: {process: require('../../StyleSheet/processColor').default},
51-
borderBottomColor: {
52-
process: require('../../StyleSheet/processColor').default,
53-
},
48+
borderRightColor: colorAttribute,
49+
borderColor: colorAttribute,
50+
borderBottomColor: colorAttribute,
5451
borderTopLeftRadius: true,
55-
borderTopColor: {process: require('../../StyleSheet/processColor').default},
52+
borderTopColor: colorAttribute,
5653
removeClippedSubviews: true,
5754
borderTopRightRadius: true,
58-
borderLeftColor: {
59-
process: require('../../StyleSheet/processColor').default,
60-
},
55+
borderLeftColor: colorAttribute,
6156
pointerEvents: true,
6257
scrollsChildToFocus: true,
6358
},

‎packages/react-native/Libraries/Components/ScrollView/ScrollViewNativeComponent.js‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentTy
1515
import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
1616
import {ConditionallyIgnoredEventHandlers} from '../../NativeComponent/ViewConfigIgnore';
1717
import Platform from '../../Utilities/Platform';
18+
import {colorAttribute} from '../View/ReactNativeStyleAttributes';
1819

1920
export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
2021
Platform.OS === 'android'
@@ -60,32 +61,20 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
6061
nestedScrollEnabled: true,
6162
scrollEventThrottle: true,
6263
borderStyle: true,
63-
borderRightColor: {
64-
process: require('../../StyleSheet/processColor').default,
65-
},
66-
borderColor: {
67-
process: require('../../StyleSheet/processColor').default,
68-
},
69-
borderBottomColor: {
70-
process: require('../../StyleSheet/processColor').default,
71-
},
64+
borderRightColor: colorAttribute,
65+
borderColor: colorAttribute,
66+
borderBottomColor: colorAttribute,
7267
persistentScrollbar: true,
7368
horizontal: true,
74-
endFillColor: {
75-
process: require('../../StyleSheet/processColor').default,
76-
},
69+
endFillColor: colorAttribute,
7770
fadingEdgeLength: true,
7871
overScrollMode: true,
7972
borderTopLeftRadius: true,
8073
scrollPerfTag: true,
81-
borderTopColor: {
82-
process: require('../../StyleSheet/processColor').default,
83-
},
74+
borderTopColor: colorAttribute,
8475
removeClippedSubviews: true,
8576
borderTopRightRadius: true,
86-
borderLeftColor: {
87-
process: require('../../StyleSheet/processColor').default,
88-
},
77+
borderLeftColor: colorAttribute,
8978
pointerEvents: true,
9079
isInvertedVirtualizedList: true,
9180
scrollsChildToFocus: true,

‎packages/react-native/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js‎

Lines changed: 13 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import type {TextInputNativeCommands} from './TextInputNativeCommands';
2424

2525
import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
2626
import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
27+
import {colorAttribute} from '../View/ReactNativeStyleAttributes';
2728

2829
export type KeyboardType =
2930
// Cross Platform
@@ -648,41 +649,33 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
648649
placeholder: true,
649650
inlineImagePadding: true,
650651
contextMenuHidden: true,
651-
textShadowColor: {
652-
process: require('../../StyleSheet/processColor').default,
653-
},
652+
textShadowColor: colorAttribute,
654653
maxLength: true,
655654
selectTextOnFocus: true,
656655
textShadowRadius: true,
657-
underlineColorAndroid: {
658-
process: require('../../StyleSheet/processColor').default,
659-
},
656+
underlineColorAndroid: colorAttribute,
660657
textDecorationLine: true,
661658
submitBehavior: true,
662659
textAlignVertical: true,
663660
fontStyle: true,
664661
textShadowOffset: true,
665-
selectionColor: {process: require('../../StyleSheet/processColor').default},
666-
selectionHandleColor: {
667-
process: require('../../StyleSheet/processColor').default,
668-
},
669-
placeholderTextColor: {
670-
process: require('../../StyleSheet/processColor').default,
671-
},
662+
selectionColor: colorAttribute,
663+
selectionHandleColor: colorAttribute,
664+
placeholderTextColor: colorAttribute,
672665
importantForAutofill: true,
673666
lineHeight: true,
674667
textTransform: true,
675668
returnKeyType: true,
676669
keyboardType: true,
677670
multiline: true,
678-
color: {process: require('../../StyleSheet/processColor').default},
671+
color: colorAttribute,
679672
autoComplete: true,
680673
numberOfLines: true,
681674
letterSpacing: true,
682675
returnKeyLabel: true,
683676
fontSize: true,
684677
onKeyPress: true,
685-
cursorColor: {process: require('../../StyleSheet/processColor').default},
678+
cursorColor: colorAttribute,
686679
text: true,
687680
showSoftInputOnFocus: true,
688681
textAlign: true,
@@ -704,22 +697,16 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
704697
editable: true,
705698
fontVariant: true,
706699
borderBottomRightRadius: true,
707-
borderBottomColor: {
708-
process: require('../../StyleSheet/processColor').default,
709-
},
700+
borderBottomColor: colorAttribute,
710701
borderRadius: true,
711-
borderRightColor: {
712-
process: require('../../StyleSheet/processColor').default,
713-
},
714-
borderColor: {process: require('../../StyleSheet/processColor').default},
702+
borderRightColor: colorAttribute,
703+
borderColor: colorAttribute,
715704
borderTopRightRadius: true,
716705
borderStyle: true,
717706
borderBottomLeftRadius: true,
718-
borderLeftColor: {
719-
process: require('../../StyleSheet/processColor').default,
720-
},
707+
borderLeftColor: colorAttribute,
721708
borderTopLeftRadius: true,
722-
borderTopColor: {process: require('../../StyleSheet/processColor').default},
709+
borderTopColor: colorAttribute,
723710
},
724711
};
725712

‎packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
1212

1313
import {ConditionallyIgnoredEventHandlers} from '../../NativeComponent/ViewConfigIgnore';
14+
import {colorAttribute} from '../View/ReactNativeStyleAttributes';
1415

1516
type PartialViewConfigWithoutName = Omit<PartialViewConfig, 'uiViewClassName'>;
1617

@@ -111,30 +112,24 @@ const RCTTextInputViewConfig: PartialViewConfigWithoutName = {
111112
textShadowRadius: true,
112113
letterSpacing: true,
113114
textDecorationStyle: true,
114-
textDecorationColor: {
115-
process: require('../../StyleSheet/processColor').default,
116-
},
117-
color: {process: require('../../StyleSheet/processColor').default},
115+
textDecorationColor: colorAttribute,
116+
color: colorAttribute,
118117
maxFontSizeMultiplier: true,
119-
textShadowColor: {
120-
process: require('../../StyleSheet/processColor').default,
121-
},
118+
textShadowColor: colorAttribute,
122119
editable: true,
123120
inputAccessoryViewID: true,
124121
inputAccessoryViewButtonLabel: true,
125122
caretHidden: true,
126123
enablesReturnKeyAutomatically: true,
127-
placeholderTextColor: {
128-
process: require('../../StyleSheet/processColor').default,
129-
},
124+
placeholderTextColor: colorAttribute,
130125
clearButtonMode: true,
131126
keyboardType: true,
132127
selection: true,
133128
returnKeyType: true,
134129
submitBehavior: true,
135130
mostRecentEventCount: true,
136131
scrollEnabled: true,
137-
selectionColor: {process: require('../../StyleSheet/processColor').default},
132+
selectionColor: colorAttribute,
138133
contextMenuHidden: true,
139134
secureTextEntry: true,
140135
placeholder: true,

‎packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,15 @@ import sizesDiffer from '../../Utilities/differ/sizesDiffer';
2626

2727
const nativeCSSParsing = ReactNativeFeatureFlags.enableNativeCSSParsing();
2828

29-
const colorAttributes = {process: processColor};
30-
3129
/**
3230
* Gated style attribute types. When native CSS parsing is enabled, the JS
3331
* processor is bypassed and the raw value is sent directly to native.
3432
* These are exported so that other ViewConfigs can reuse them.
3533
*/
34+
export const colorAttribute: AnyAttributeType = nativeCSSParsing
35+
? true
36+
: {process: processColor};
37+
3638
export const filterAttribute: AnyAttributeType = nativeCSSParsing
3739
? true
3840
: {process: processFilter};
@@ -158,7 +160,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
158160
* Shadow
159161
*/
160162
elevation: true,
161-
shadowColor: colorAttributes,
163+
shadowColor: colorAttribute,
162164
shadowOffset: {diff: sizesDiffer},
163165
shadowOpacity: true,
164166
shadowRadius: true,
@@ -213,35 +215,35 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
213215
* View
214216
*/
215217
backfaceVisibility: true,
216-
backgroundColor: colorAttributes,
217-
borderBlockColor: colorAttributes,
218-
borderBlockEndColor: colorAttributes,
219-
borderBlockStartColor: colorAttributes,
220-
borderBottomColor: colorAttributes,
218+
backgroundColor: colorAttribute,
219+
borderBlockColor: colorAttribute,
220+
borderBlockEndColor: colorAttribute,
221+
borderBlockStartColor: colorAttribute,
222+
borderBottomColor: colorAttribute,
221223
borderBottomEndRadius: true,
222224
borderBottomLeftRadius: true,
223225
borderBottomRightRadius: true,
224226
borderBottomStartRadius: true,
225-
borderColor: colorAttributes,
227+
borderColor: colorAttribute,
226228
borderCurve: true,
227-
borderEndColor: colorAttributes,
229+
borderEndColor: colorAttribute,
228230
borderEndEndRadius: true,
229231
borderEndStartRadius: true,
230-
borderLeftColor: colorAttributes,
232+
borderLeftColor: colorAttribute,
231233
borderRadius: true,
232-
borderRightColor: colorAttributes,
233-
borderStartColor: colorAttributes,
234+
borderRightColor: colorAttribute,
235+
borderStartColor: colorAttribute,
234236
borderStartEndRadius: true,
235237
borderStartStartRadius: true,
236238
borderStyle: true,
237-
borderTopColor: colorAttributes,
239+
borderTopColor: colorAttribute,
238240
borderTopEndRadius: true,
239241
borderTopLeftRadius: true,
240242
borderTopRightRadius: true,
241243
borderTopStartRadius: true,
242244
cursor: true,
243245
opacity: true,
244-
outlineColor: colorAttributes,
246+
outlineColor: colorAttribute,
245247
outlineOffset: true,
246248
outlineStyle: true,
247249
outlineWidth: true,
@@ -250,7 +252,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
250252
/**
251253
* Text
252254
*/
253-
color: colorAttributes,
255+
color: colorAttribute,
254256
fontFamily: true,
255257
fontSize: true,
256258
fontStyle: true,
@@ -261,10 +263,10 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
261263
lineHeight: true,
262264
textAlign: true,
263265
textAlignVertical: true,
264-
textDecorationColor: colorAttributes,
266+
textDecorationColor: colorAttribute,
265267
textDecorationLine: true,
266268
textDecorationStyle: true,
267-
textShadowColor: colorAttributes,
269+
textShadowColor: colorAttribute,
268270
textShadowOffset: true,
269271
textShadowRadius: true,
270272
textTransform: true,
@@ -275,9 +277,9 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
275277
/**
276278
* Image
277279
*/
278-
overlayColor: colorAttributes,
280+
overlayColor: colorAttribute,
279281
resizeMode: true,
280-
tintColor: colorAttributes,
282+
tintColor: colorAttribute,
281283
objectFit: true,
282284
};
283285

‎packages/react-native/Libraries/Image/ImageViewNativeComponent.js‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import type {ResolvedAssetSource} from './AssetSourceResolver';
2121
import type {ImageProps} from './ImageProps';
2222
import type {ImageSource} from './ImageSource';
2323

24+
import {colorAttribute} from '../Components/View/ReactNativeStyleAttributes';
2425
import * as NativeComponentRegistry from '../NativeComponent/NativeComponentRegistry';
2526
import {ConditionallyIgnoredEventHandlers} from '../NativeComponent/ViewConfigIgnore';
2627
import codegenNativeCommands from '../Utilities/codegenNativeCommands';
@@ -84,9 +85,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
8485
resizeMethod: true,
8586
resizeMode: true,
8687
resizeMultiplier: true,
87-
tintColor: {
88-
process: require('../StyleSheet/processColor').default,
89-
},
88+
tintColor: colorAttribute,
9089
borderBottomLeftRadius: true,
9190
borderTopLeftRadius: true,
9291
src: true,
@@ -98,12 +97,8 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
9897
borderRadius: true,
9998
headers: true,
10099
shouldNotifyLoadEvents: true,
101-
overlayColor: {
102-
process: require('../StyleSheet/processColor').default,
103-
},
104-
borderColor: {
105-
process: require('../StyleSheet/processColor').default,
106-
},
100+
overlayColor: colorAttribute,
101+
borderColor: colorAttribute,
107102
accessible: true,
108103
progressiveRenderingEnabled: true,
109104
fadeDuration: true,
@@ -146,9 +141,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
146141
internal_analyticTag: true,
147142
resizeMode: true,
148143
source: true,
149-
tintColor: {
150-
process: require('../StyleSheet/processColor').default,
151-
},
144+
tintColor: colorAttribute,
152145
...ConditionallyIgnoredEventHandlers({
153146
onLoadStart: true,
154147
onLoad: true,

0 commit comments

Comments
 (0)