Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Tailwind v4 parity gaps: stale allowlist strips core-supported props, all @media dropped, hidden→collapse rewrite is wrong on modern core

Offen
  • Stimmt etwas nicht?
#226 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
45/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
javascript, tailwindcss
Bereich
frontend, mobile-dev, tooling

Rechercherichtung

Start in src/removeUnsupported.js, including the supportedProperties allowlist, visibility rewrite, and mediaAtRule handling. Compare those paths with the NativeScript core files named in the issue, then work through the suggested order and verify the listed gap, media, visibility, translate, and scale utilities retain the supported behavior while unsupported features remain documented or dropped.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

We've been auditing @nativescript/tailwind's removeUnsupported pass against @nativescript/core 9.x with the goal of Tailwind parity between web and NativeScript wherever core makes it possible. The class vocabulary is genuine Tailwind v4 (same generated names), but several rewrites and one stale allowlist make the same class behave differently — or silently die — on native. Findings below are all source-verified against NativeScript/NativeScript packages/core.

1. supportedProperties is stale — strips properties core now supports

The allowlist in src/removeUnsupported.js predates core's current CSS registry. These properties exist in core (cssName: registrations in packages/core/ui/styling/style-properties.ts + view modules) but are stripped:

Property Tailwind utilities killed Core support
gap, row-gap, column-gap gap-*, gap-x-*, gap-y-* FlexboxLayout gap/rowGap/columnGap (NS 9)
max-width, max-height max-w-*, max-h-* maxWidth/maxHeight cssName
white-space whitespace-nowrap, whitespace-pre, … whiteSpace cssName
text-overflow text-ellipsis, text-clip, truncate textOverflow cssName (truncate still needs overflow:hidden, which core genuinely lacks — partial parity only)
perspective perspective-* perspective cssName
direction dir/rtl related direction cssName

Also note the plugin runs on all app CSS, not just Tailwind output — so a hand-written .foo { gap: 16px } in app.css is silently stripped too, even though FlexboxLayout honors it.

2. visibility: hidden → collapse rewrite is no longer correct

Core accepts hidden (core-types/index.ts Visibility.isValid = visible | hidden | collapse; style-properties.ts visibilityProperty only sets isCollapsed for collapse). So:

  • Web invisible = hidden, keeps layout space.
  • Native after rewrite = collapse, removed from layout.

Same class, different layout. The rewrite should simply pass hidden through (keep collapse/collapsed as-is).

3. @media rules are deleted wholesale — breakpoints and system dark mode could work

mediaAtRule.remove() drops every @media block: sm:–2xl: variants, media-flavor dark:, portrait:/landscape: — all dead.

But core 8.8+ ships a media query engine (packages/core/css-mediaquery/index.ts): width, height, device-width/height, orientation, prefers-color-scheme, min-/max- modifiers, not, comma lists — plus matchMedia()/MediaQueryList with change events.

The catch: the parser only accepts colon syntax (min-width: 40rem); Tailwind v4 emits range syntax (width >= 40rem), which fails RE_MQ_EXPRESSION and throws SyntaxError — presumably why the wholesale drop exists. A PostCSS rewrite from range → min-/max- colon form (plus still dropping @media blocks using features core can't evaluate: hover, prefers-reduced-motion, resolution, …) would restore the entire breakpoint family and prefers-color-scheme dark mode instead of losing it all.

4. Transform utilities die on an artificial boundary

  • rotate-* survives (rotate is allowlisted, core supports rotate).
  • translate-x-*/translate-y-*/scale-* die: v4 emits translate:/scale: shorthand properties, and core exposes translateX/translateY/scaleX/scaleY + transform. A rewrite — translate: x y → transform: translate(x, y), scale: n → transform: scale(n) — would restore these families without touching core.

5. Selector/cascade drift (smaller, mostly documentable)

  • :where() is unwrapped → loses zero-specificity, so dark:/variant rules gain real specificity on native vs web.
  • @layer flattened → utilities become unlayered on native, so utility-vs-author-CSS precedence differs between platforms. (Unavoidable until core implements cascade layers; worth documenting.)
  • @supports flattened → applied unconditionally. Mostly fine (core 8.9.1+ supports color-mix), but any future @supports guard for genuinely unsupported features will misfire.
  • @property removed → --tw-* vars lose initial-value/inherits: false; chains like shadow-* vars inherit differently than web. Mostly dead weight anyway since shadows don't map, but worth noting.
  • space-*/divide-* rewritten to * + * — loses the > :not([hidden]) ~ :not([hidden]) semantics, and the -reverse variants are broken (the --tw-space/divide-*-reverse declarations get stripped).
  • em treated identically to rem (×16) — wrong for nested-em contexts.
  • vertical-align: middle → center is redundant — core's verticalAlign validator already accepts middle (it's even in the plugin's own allowlist for that property).
  • currentColor declarations dropped → text-current, border-current dead. Could rewrite to inherit-equivalent handling or a follow-up core feature.
  • w-screen (100vw), hover:, focus-within:, & selectors — genuinely unsupported by core; dead by necessity, just worth documenting.

Suggested order of attack

  1. Refresh supportedProperties from core's cssName registry (biggest win: gap alone unlocks the whole gap-* family) — and consider only running the strip on Tailwind-generated layers rather than all author CSS.
  2. Range→colon @media rewrite + feature allowlist.
  3. Drop the hidden→collapse rewrite.
  4. translate/scale → transform rewrites.
  5. Document the rest as known divergences.

Happy to send a PR for 1–3 if you'd like — we have the core property registry mapped already.

Vorherrschende Sprache
JavaScript
Sterne
161
Forks
29
Ø Merge
1 Std. 39 Min.
Gemergte PRs (30 T.)
1

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus NativeScript/tailwind

Alle Issues in NativeScript/tailwind

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.