Skip to content

Conversation

@Jta26
Copy link

@Jta26 Jta26 commented Oct 21, 2025

In working with some internal stuff, I needed to do a pretty gnarly code-split between Web, Android, and iOS due to different platforms having different names for their fonts. In addition, I needed to do !important on web to override a bunch of high specificity styles in a global CSS file. When I added !important, I noticed the incompatibility here.

!important is being sent down through an html.span to the underlying <Text>'s TextStyleProps in RN, resulting in an undefined font family. RSD will also send down fallback fonts, also resulting in undefined fonts. Ideally !important is never used in atomic styles, but in the event that it is used, I think it's reasonable to strip it off completely.

Example:
image

Thought I'd try to throw up a PR that fixes it.

Two Questions

  1. Should we change this to always strip off !important for all CSS properties? There is no value in doing anything with !important on native imo.
  2. Is delegating to the first font in the list of fallbacks the right thing to do here? Should we do a runtime check on font's somehow to support proper fallbacks?

Snapshot tests written by AI

@Jta26 Jta26 requested a review from necolas as a code owner October 21, 2025 03:59
@meta-cla meta-cla bot added the cla signed label Oct 21, 2025
@Jta26
Copy link
Author

Jta26 commented Oct 21, 2025

Synced offline, updated this PR to not do anything with !important, but it will still handle delegating to the first font in the list of fallbacks on React Native.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant