Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

css.defineVars() with kebab-case keys warns unrecognized custom property and fails to resolve

Đang mở
  • Có gì không ổn?
#505 0 bình luận 2 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
javascript, react, react-native
Lĩnh vực
frontend, mobile-dev

Hướng nghiên cứu

Bắt đầu với bản tái hiện Expo tối thiểu được liên kết trong issue, sử dụng pnpm install và pnpm repro:android hoặc pnpm repro:ios, sau đó so sánh các control kebab-case và camelCase. Đọc phần tra cứu custom-property native được thảo luận cùng với PR 73 và xác minh rằng token kebab-case được resolve mà không có cảnh báo unrecognized-property, trong khi hành vi camelCase hiện có vẫn nguyên vẹn.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

bug
Describe the issue

When using css.defineVars() in React Strict DOM on native, variables whose keys contain hyphens fail to resolve at runtime.

This commonly affects generated design-token packages, where token paths are emitted as kebab-case keys such as:

export const tokens = css.defineVars({
  'components-button-primary-background': '#4f6af0',
});

Using that variable in css.create() on React Native produces a warning like:

React Strict DOM: unrecognized custom property "--components-button-primary-background__id__1"

The same pattern works on web/Next.js, and the same native repro works when the token key is changed to camelCase.

Expected behavior

css.defineVars() should resolve variables consistently on native regardless of whether the variable key is camelCase or kebab-case.

The following should work on native without warnings:

const tokens = css.defineVars({
  'components-button-primary-background': '#4f6af0',
});

const styles = css.create({
  root: {
    backgroundColor: tokens['components-button-primary-background'],
  },
});

This is important for generated design-token packages, where kebab-case keys are common and valid JavaScript object keys.

Steps to reproduce

I created a minimal Expo reproduction that follows the React Strict DOM Expo setup guide, which can be found here.

Steps to reproduce:

pnpm install
pnpm repro:android

or:

pnpm install
pnpm repro:ios

On native, the kebab-case token doesn't resolve and produces a warning:

React Strict DOM: unrecognized custom property "--components-button-primary-background__id__1"

The camelCase control does not warn and resolves as expected.

Test case

No response

Additional comments

To achieve the expected behavior, apply the patch using the following commands:

pnpm patch:apply
pnpm repro:android

Information about the environment:

react-strict-dom: 0.0.55
expo: 56.0.x
react: 19.2.3
react-dom: 19.2.3
react-native: 0.85.3
package manager: pnpm 11
platform: React Native / Expo native

Issue investigation

This appears to be caused by a mismatch in the native custom-property lookup path.

The native runtime appears to generate a custom property name that preserves the original key:

components-button-primary-background__id__1

But the lookup path normalizes the CSS custom property name by camel-casing it before reading from the custom property registry:

componentsButtonPrimaryBackground__id__1

That means the registry stores one key but native lookup checks another key, causing the value to be treated as unrecognized.

The camelCase control works because camel-casing does not change the key.

This is related to a long-standing open PR from 2024 which never got merged, and would fix this issue.

Suggested fix

Do not camel-case the native custom property name during lookup, just like PR 73 did.

Conceptually:

-return camelize(name.substring(2));
+return name.substring(2);

This makes native lookup use the same generated key format that defineVars() stores.

The repro includes a pnpm patch with that change for [email protected].

With the patch applied:

the kebab-case token no longer warns and resolves the token
the camelCase control still works
the same app code and Expo setup are used before and after the patch

Why this matters

Generated token systems commonly use kebab-case names derived from design-token paths to better align between design and development. Requiring camelCase-only keys means generated token output that works on web can fail on native, even though the code uses css.defineVars() and css.create() through the public API.

While developing a universal design-system using kebab-case vars, I hit this issue myself, so I'd love to see this get fixed.

Ngôn ngữ chính
JavaScript
Star
3.6k
Fork
208
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react/react-strict-dom

Tất cả issue của react/react-strict-dom

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.