Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

rtl:/ltr: variants silently dropped — lightningcss downcompiles :dir() to :lang() which is unhandled

オープン
  • 何か問題がありますか？
#453 コメント 2 件 リアクション 1 件 担当者 0 名 GitHub で見る

メンテナーはふだん 3 日以内に返信

@YevheniiKotyrlo がすでに取り組んでいます。

2026年9月22日 から。

  • #461 @YevheniiKotyrlo による — オープン
  • #472 @Abdalkaderdev による — オープン

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
css, react-native, typescript
領域
frontend, mobile

調査の方向性

Start in selector-builder.ts at parseIsWhereComponents, comparing the existing case "dir" branch with the default branch that returns null for :lang(). Check how :where() handles [dir="rtl"] attribute selectors. Two open pull requests (#461, #472) already target this, so read them before starting. Done means an rtl: class applies its style when I18nManager.isRTL is true, and the existing selector tests still pass.

索引モデルが issue の本文から書いたものです。

説明

Describe the bug

The rtl: and ltr: variants from Tailwind CSS v4 are silently dropped during compilation. No error is produced — the styles simply never apply. Related to nativewind/nativewind#1433 but traced to a different root cause in the react-native-css v5 compiler.

Root cause

  1. Tailwind v4 generates :dir(rtl) in the rtl: variant (confirmed in tailwindcss source)
  2. Lightningcss 1.30.1 downcompiles :dir(rtl) to :is(:lang(ae), :lang(ar), ...) at the parse level
  3. parseIsWhereComponents in selector-builder.ts has a case "dir" handler but no case "lang" handler
  4. :lang() hits default: { return null; } → returns null
  5. Inside :where(), [dir="rtl"] attribute selectors also return null (line ~397)
  6. ALL alternatives produce nothing → the entire rule is silently dropped

Key finding: Features.DirSelector does not help

Adding Features.DirSelector to lightningcss include list does NOT prevent the downcompile. Confirmed with a console.log verifying the flag IS loaded — the CSS output still contains :is(:lang(...)) instead of :dir(rtl). The downcompile happens at the parse level, before feature flags are consulted.

Proposed fix

Add a case "lang" handler to parseIsWhereComponents. Lightningcss expands :dir(rtl) into a fixed set of 19 RTL languages. Map these back to [=, "dir", "rtl"], leveraging the existing runtime case "dir" check against I18nManager.isRTL:

case "lang": {
  const RTL_LANGUAGES = new Set([
    "ae","ar","arc","bcc","bqi","ckb","dv","fa","glk",
    "he","ku","mzn","nqo","pnb","ps","sd","ug","ur","yi"
  ]);
  const direction = component.languages?.[0] && RTL_LANGUAGES.has(component.languages[0]) ? "rtl" : "ltr";
  queries ??= [{ specificity: [] }];
  queries.forEach(query => {
    getMediaQuery(query).push(["=", "dir", direction]);
  });
  return parseIsWhereComponents(type, selector, index + 1, queries);
}

Reproduction

Steps:

  1. npm install && npx expo run:ios
  2. Press "Force RTL" button
  3. Fully restart the app
  4. The rtl:bg-amber-400 class should make the background amber, but it stays blue

Expected behavior

rtl:bg-amber-400 should apply background-color: amber-400 when I18nManager.isRTL === true.

Workaround

Use patch-package with the patch from the fix branch.

Environment

  • react-native-css: 3.0.7
  • nativewind: 5.0.0-preview.4
  • react-native: 0.86.0
  • expo: 57
主要言語
TypeScript
スター
166
フォーク
45
平均マージ
13日 14時間
マージ済み PR（30日）
1

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

nativewind/react-native-css のほかの issue

nativewind/react-native-css の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。