Skip to content

Wire native CSS color parsing#55679

Closed
NickGerleman wants to merge 5 commits intofacebook:mainfrom
NickGerleman:export-D94052731
Closed

Wire native CSS color parsing#55679
NickGerleman wants to merge 5 commits intofacebook:mainfrom
NickGerleman:export-D94052731

Conversation

@NickGerleman
Copy link
Copy Markdown
Contributor

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.

  • 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

Changelog: [Internal]

Differential Revision: D94052731

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Feb 23, 2026
NickGerleman added a commit to NickGerleman/react-native that referenced this pull request Feb 23, 2026
Summary:
Pull Request resolved: facebook#55679

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.

- `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

Changelog: [Internal]

Differential Revision: D94052731
@meta-codesync
Copy link
Copy Markdown

meta-codesync Bot commented Feb 23, 2026

@NickGerleman has exported this pull request. If you are a Meta employee, you can view the originating Diff in D94052731.

NickGerleman added a commit to NickGerleman/react-native that referenced this pull request Feb 23, 2026
Summary:
Pull Request resolved: facebook#55679

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.

- `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

Changelog: [Internal]

Differential Revision: D94052731
NickGerleman added a commit to NickGerleman/react-native that referenced this pull request Feb 23, 2026
Summary:
Pull Request resolved: facebook#55679

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.

- `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

Changelog: [Internal]

Differential Revision: D94052731
NickGerleman added a commit to NickGerleman/react-native that referenced this pull request Feb 23, 2026
Summary:
Pull Request resolved: facebook#55679

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.

- `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

Changelog: [Internal]

Differential Revision: D94052731
@NickGerleman NickGerleman force-pushed the export-D94052731 branch 2 times, most recently from c25557f to 96adb02 Compare February 23, 2026 13:44
NickGerleman added a commit to NickGerleman/react-native that referenced this pull request Feb 23, 2026
Summary:
Pull Request resolved: facebook#55679

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.

- `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

Changelog: [Internal]

Differential Revision: D94052731
Summary:
Gate `processTransformOrigin` behind `enableNativeCSSParsing()`. When the flag is on, CSS transform-origin strings like `"top left"` or `"10px 50%"` are parsed natively using the existing CSS transform-origin parser instead of being preprocessed in JS.

Changelog: [Internal]

Differential Revision: D94052730
Summary:
Gate `processAspectRatio` behind `enableNativeCSSParsing()`. When the flag is on, CSS ratio strings like `"16/9"` and number strings are parsed natively using the existing CSS ratio parser instead of being preprocessed in JS. The parsing is done in `fromRawValue(... FloatOptional &)` — string values are only sent for aspectRatio; other FloatOptional yoga props never receive strings from JS.

Changelog: [Internal]

Differential Revision: D94052732
Summary:
Gate `processFontVariant` behind `enableNativeCSSParsing()`. When the flag is on, CSS font-variant strings like `"small-caps oldstyle-nums"` are parsed natively using the `CSSFontVariant` / `CSSFontVariantList` types instead of being preprocessed in JS.

- Add `fontVariantFromCSSFontVariant()` to map `CSSFontVariant` enum values to `FontVariant` bitmask flags
- Add `parseProcessedFontVariant()`, `parseUnprocessedFontVariantString()`, and gated `fromRawValue(... FontVariant &)` in `attributedstring/conversions.h`
- Remove `react_native_expect(false)` hard error on unknown font variant values, replacing with graceful skip
- Export `fontVariantAttribute` from `ReactNativeStyleAttributes.js`

Changelog: [Internal]

Differential Revision: D94052733
Summary:
Add missing `default` labels to `switch` statements in CSS parser headers
(`CSSTokenizer.h`, `CSSSyntaxParser.h`, `CSSKeyword.h`) and move away from switch/case in `CSSColor.h` to fix `-Werror` build failures when
fbobjc targets import CSS headers.

Changelog: [Internal]

Differential Revision: D94074704
NickGerleman added a commit to NickGerleman/react-native that referenced this pull request Feb 24, 2026
Summary:
Pull Request resolved: facebook#55679

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.

- `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

Changelog: [Internal]

Differential Revision: D94052731
NickGerleman added a commit to NickGerleman/react-native that referenced this pull request Feb 24, 2026
Summary:
Pull Request resolved: facebook#55679

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.

- `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

Changelog: [Internal]

Differential Revision: D94052731
NickGerleman added a commit to NickGerleman/react-native that referenced this pull request Feb 24, 2026
Summary:
Pull Request resolved: facebook#55679

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.

- `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

Changelog: [Internal]

Differential Revision: D94052731
NickGerleman added a commit to NickGerleman/react-native that referenced this pull request Feb 24, 2026
Summary:
Pull Request resolved: facebook#55679

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.

- `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

Changelog: [Internal]

Differential Revision: D94052731
NickGerleman added a commit to NickGerleman/react-native that referenced this pull request Feb 24, 2026
Summary:
Pull Request resolved: facebook#55679

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.

- `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

Changelog: [Internal]

Differential Revision: D94052731
NickGerleman added a commit to NickGerleman/react-native that referenced this pull request Feb 24, 2026
Summary:
Pull Request resolved: facebook#55679

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.

- `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

Changelog: [Internal]

Differential Revision: D94052731
@NickGerleman NickGerleman force-pushed the export-D94052731 branch 2 times, most recently from 3d4a2f6 to 58c960f Compare February 25, 2026 06:49
NickGerleman added a commit to NickGerleman/react-native that referenced this pull request Feb 25, 2026
Summary:
Pull Request resolved: facebook#55679

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.

- `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

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D94052731
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]

Reviewed By: javache

Differential Revision: D94052731
@meta-codesync meta-codesync Bot closed this in 36b7158 Feb 25, 2026
@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Feb 25, 2026
@meta-codesync
Copy link
Copy Markdown

meta-codesync Bot commented Feb 25, 2026

This pull request has been merged in 36b7158.

zoontek pushed a commit to zoontek/react-native that referenced this pull request Mar 9, 2026
Summary:
Pull Request resolved: facebook#55679

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]

Reviewed By: javache

Differential Revision: D94052731

fbshipit-source-id: 8d03cfa378f76c480b2429afe4083871b208a236
meta-codesync Bot pushed a commit that referenced this pull request Apr 24, 2026
…e_frameworks! (#56591)

Summary:
`React/CoreModules/RCTRedBox.mm` imports `<react/featureflags/ReactNativeFeatureFlags.h>` (added in #56574). Under `use_frameworks!` this fails to build:

    RCTRedBox.mm:19:9: 'react/featureflags/ReactNativeFeatureFlags.h' file not found
    Did not find header 'featureflags/ReactNativeFeatureFlags.h' in framework 'react'

`React-CoreModules.podspec` uses plain `s.dependency "React-featureflags"`, which does not add the framework's Headers dir to `HEADER_SEARCH_PATHS`. Switching to `add_dependency(s, "React-featureflags")` preserves the same pod dependency and also adds the dependency header path, matching every neighboring dep (`React-debug`, `React-runtimeexecutor`, `React-jsinspector*`, etc.) in the same file.

On `main`, this missing podspec-level header path is currently likely masked by the global `update_search_paths` entry added in #55679, which injects `React_featureflags.framework/Headers` into inherited header search paths for `use_frameworks!` builds. `0.83-stable` does not have that global entry, so the same podspec issue surfaces as a build regression in 0.83.7.

This change fixes the dependency at the target that directly imports the header, so `React-CoreModules` no longer relies on a broad inherited header path. A cherry-pick to `0.83-stable` would fix the regression in 0.83.7.

## Changelog:

[IOS] [FIXED] - Fix React-CoreModules failing to compile with `use_frameworks!` due to missing React-featureflags header path

Pull Request resolved: #56591

Test Plan:
RN 0.83.7 consumer app with `use_frameworks! :linkage => :static`, `RCT_USE_RN_DEP=1`: fails before this change. After the fix, `pod install` regenerates `React-CoreModules.debug.xcconfig` so `HEADER_SEARCH_PATHS` includes:

    ${PODS_CONFIGURATION_BUILD_DIR}/React-featureflags/React_featureflags.framework/Headers

Verified locally that the `React-CoreModules` pod target builds after the fix:

    xcodebuild -project ios/Pods/Pods.xcodeproj \
      -scheme React-CoreModules \
      -configuration Debug \
      -sdk iphonesimulator \
      -derivedDataPath /tmp/rncoremodules-test \
      CODE_SIGNING_ALLOWED=NO build

Reviewed By: javache

Differential Revision: D102328650

Pulled By: cipolleschi

fbshipit-source-id: c25a7f5f733637e1d1604929665881b659fd3af3
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. fb-exported Merged This PR has been merged. meta-exported p: Facebook Partner: Facebook Partner

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants