Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

handle font-variant text style prop#1524

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
InkaAlicja wants to merge1 commit intonativewind:main
base:main
Choose a base branch
Loading
fromInkaAlicja:@InkaAlicja/font-variant-text-style-prop

Conversation

@InkaAlicja
Copy link

@InkaAlicjaInkaAlicja commentedJul 10, 2025•
edited
Loading

font-variant was not being handled. For example this:<Text className="[font-variant:small-caps]">Hello!</Text> was not actually using small-caps. But according to RNdocs,fontVariant is a valid text style prop.

I tested this by using the following patch in my own repo, which uses nativewind:

diff --git a/dist/css-to-rn/parseDeclaration.js b/dist/css-to-rn/parseDeclaration.jsindex 59ea66e459dbf6922bcd80a6ac014408ca13c2af..693fbae6cafc7d4a65033c95c00a3fd4a2a364f1 100644--- a/dist/css-to-rn/parseDeclaration.js+++ b/dist/css-to-rn/parseDeclaration.js@@ -94,6 +94,7 @@ const validProperties = [     "font-size",     "font-style",     "font-variant-caps",+    "font-variant",     "font-weight",     "gap",     "height",@@ -761,6 +762,8 @@ function parseDeclaration(declaration, options) {             return addStyleProp(declaration.property, parseFontStyle(declaration.value, parseOptions));         case "font-variant-caps":             return addStyleProp(declaration.property, parseFontVariantCaps(declaration.value, parseOptions));+        case "font-variant":+            return addStyleProp(declaration.property, parseFontVariantCaps(declaration.value, parseOptions));         case "line-height":             return addStyleProp(declaration.property, parseLineHeight(declaration.value, parseOptions));         case "font":

Using this patch made<Text className="[font-variant:small-caps]">Hello!</Text> actually use small-caps.

I also added aFontVariant type. The cssfont-variant property allows much more values (docs), but the RNfontVariant text style prop allows the values I listed in the type (docs).
Either way as can be seen by the already existingparseFontVariantCaps function, these are the only valuesreact-native-css-interop was allowing.

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

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@InkaAlicja
[8]ページ先頭
©2009-2025 Movatter.jp