React Strict DOM (RSD) standardizes the development of styled React components for web and native.
by reactJavaScript
Last 12 weeks · 4 commits
4 of 6 standards met
Fixes #506. builds the strict ref with , so a method that lives on the host node prototype chain is still reachable from the wrapper but gets invoked with the wrapper as its receiver. React Native host node methods read internals off , and the wrapper does not carry those internals, so and silently do nothing on native while still works. Reads keep working because own properties of the node resolve through the prototype chain, which is why only the imperative methods broke. This walks the node's prototype chain once per node and re-exposes each inherited method as an own property that calls through to the node, so the receiver stays correct. Own methods of the node are left alone since React Native assigns those as closures over the node, and accessors are left on the prototype chain since they read plain instance fields the wrapper already inherits. The binding runs before the strict-dom overrides are defined so the viewport-scaled still wins. Added a regression test in that mounts an over a host node mock whose and live on the prototype, then asserts the receiver is the host node. It fails on main and passes with this change. Ran the full package suite (19 suites, 897 tests), , eslint, and prettier, all clean.
This reduces RSD's memory overhead in React Native. Measured with https://github.com/ixf/rsd-bench - exact numbers in the readme there combine dimensions, color scheme and reduced motion into one store - , which replaces - no need to keep two stores around, and wrapping dimensions and color scheme hooks into them reduces number of subscriptions per useStyleProps call remove from . It has two call sites and the was useless in both cases
ships its calls uncompiled by design — the consumer compiles them, and extracts the resulting rules into via . In that arrangement an app's own StyleX styles sit in later layers and correctly override the element defaults. A consumer that pre-compiles the package instead gets a different result. Compiling with on emits calls, and the runtime path applies specificity boosts into an unlayered stylesheet. (Our reason for pre-compiling is import safety in a test runner that externalises the package, so it reaches the runtime uncompiled: each carries a at module scope, and throws on it by design. #265 is the same error in a Vite context and #273 the general pre-compiled-library case — both closed as completed, and neither concerns the cascade consequence below, which is what this issue is about.) Unlayered rules outrank every layered rule, regardless of specificity or source order. So the same element defaults flip from "overridable by the consumer" to "overriding the consumer". Observed Identical class names in both arrangements — the divergence is purely cascade position, so every name-level comparison passes: beat the app's own padding on every element carrying both classes. Rendered result: nav items running together, button text overflowing its pill, header clipped. The build, the tests and a name-level fidelity check were all green throughout. The gap The two supported paths for the same package produce different cascade semantics, and nothing surfaces that. A consumer who pre-compiles for import safety silently gets reset rules that outrank their own styles. The smallest fix is documentation: pre-compiling requires plus consuming the emitted rules through . That is what we now do — the rules ship as a CSS sidecar the app imports, so layer assembly is delegated to the same function the postcss plugin uses rather than reimplemented against a mapping that could drift. A stronger fix would be to ship a pre-compiled entry point, so import safety never requires a consumer to choose an injection mode at all. Related The companion issue https://github.com/facebook/stylex/issues/1806 covers the naming half of the same contract. Together: a library's style output should be invariant to how the library was compiled — in the names it derives and in the cascade address those names are delivered to.**
Summary The validation in the constructor throws the wrong error message. It reports a damping problem when an invalid mass is supplied, because the message was copy-pasted from the preceding damping check. A user passing (or a negative mass) gets told their damping value is wrong, which points them at the wrong config field. React Native's equivalent throws here. Fix Use the correct message for the mass check. Test Added covering all three constructor validations (stiffness, damping, mass). The mass case fails on (asserts ) and passes with the fix. and are clean. Reopening this. I closed it by accident during a bulk cleanup of my stale forks and cannot reopen the original because the fork was deleted, so this is the same branch restored. Sorry for the noise @MoOx.
Fixes #452 On native, returning for a property from an inline style function (or any style object with an undefined value) leaks that key through and into the style resolver, which throws . This is a regression; these values used to be dropped, and on web undefined values are simply ignored. The loop in branches on //, so an undefined value falls through to the catch-all assignment and ends up in the result as . This adds an early for undefined values so the property is omitted, matching web behavior and letting inline style functions return undefined to opt out of a property. is left untouched since the resolver accepts it. Testing: added a regression test under that asserts the property is absent when the inline function returns undefined. Confirmed it fails on and passes with the fix. Full native + web jest suites pass (888 tests, 711 snapshots unchanged), Flow and ESLint clean. Reopening this. I closed it by accident during a bulk cleanup of my stale forks and cannot reopen the original because the fork was deleted, so this is the same branch restored. Sorry for the noise @MoOx.
Repository: react/react-strict-dom. Description: React Strict DOM (RSD) standardizes the development of styled React components for web and native. Stars: 3548, Forks: 203. Primary language: JavaScript. Languages: JavaScript (94.9%), CSS (3%), TypeScript (1.9%), HTML (0.1%), Shell (0%). License: MIT. Homepage: https://react.github.io/react-strict-dom Latest release: 0.0.54 (10mo ago). Open PRs: 46, open issues: 54. Last activity: 2mo ago. Community health: 62%. Top contributors: necolas, ecreeth, dependabot[bot], SamChou19815, nmn, martinbooth, javascripter, vincentriemer, yaminyassin, AlexanderOMara and others.