Skip to content

Commit 9fbf820

Browse files
committed
Allow outline* styles on stable React Native
Closes #467 ## Root cause The `outlineColor`/`outlineOffset`/`outlineStyle`/`outlineWidth` keys were gated behind `version.experimental` in `isAllowedStyleKey.js` (and `outlineOffset`/`outlineWidth` in `isLengthStyleKey.js`). Any style key not in the allow-list is silently dropped, so these props never reached React Native on a published release. `version.experimental` is **not** a user-facing flag. It is derived from the RN version at runtime https://github.com/facebook/react-strict-dom/blob/c4e69e0fa486ba8df835a2e3f396206070c17153/packages/react-strict-dom/src/native/modules/version.js#L13-L20 It is `true` **only** on HEAD/nightly builds and `false` on every published RN release (e.g. 0.84.0). So the documented `outline*` support was unreachable for normal apps, with no way to opt in. ## Why it was a stale gate The `outline*` keys were originally added alongside `boxShadow`, `filter`, and `mixBlendMode` in the same experimental block. Those three were later graduated into the always-allowed set; the four `outline*` keys were left behind by oversight. RN has supported `outline*` since 0.77, and RSD's minimum is `react-native >=0.82.0`, so the props are safe to allow unconditionally for every supported version. ## Why tests didn't catch it The test suite mocks the RN version as `major: 1000` (`tests/__mocks__/react-native/index.js`), which forces `experimental === true`. The existing `outline*` test therefore passed in CI while the same code dropped the props for users on stable RN. ## The fix Graduated the keys out of the experimental gate (same treatment already given to `boxShadow`/`filter`/`mixBlendMode`): - `isAllowedStyleKey.js` — moved `outlineColor`, `outlineOffset`, `outlineStyle`, `outlineWidth` into the main allow-list; removed the now-empty `if (version.experimental)` block and its unused `version` import. - `isLengthStyleKey.js` — moved `outlineOffset`, `outlineWidth` into the main length-key set; removed the experimental block and unused import. ## Result `outline*` now resolves on all supported RN versions, the documentation becomes accurate with no changes, the existing test now exercises the real (non-experimental) path, Flow passes, and the full CSS suite (141 tests) is green.
1 parent c4e69e0 commit 9fbf820

2 files changed

Lines changed: 6 additions & 16 deletions

File tree

packages/react-strict-dom/src/native/css/isAllowedStyleKey.js

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
* @flow strict
88
*/
99

10-
import { version } from '../modules/version';
11-
1210
const allowedStyleKeySet = new Set<string>([
1311
'alignContent',
1412
'alignItems',
@@ -122,6 +120,10 @@ const allowedStyleKeySet = new Set<string>([
122120
'mixBlendMode',
123121
'objectFit',
124122
'opacity',
123+
'outlineColor',
124+
'outlineOffset',
125+
'outlineStyle',
126+
'outlineWidth',
125127
'overflow',
126128
'padding',
127129
'paddingBlock',
@@ -167,13 +169,6 @@ const allowedStyleKeySet = new Set<string>([
167169
'::placeholder'
168170
]);
169171

170-
if (version.experimental) {
171-
allowedStyleKeySet.add('outlineColor');
172-
allowedStyleKeySet.add('outlineOffset');
173-
allowedStyleKeySet.add('outlineStyle');
174-
allowedStyleKeySet.add('outlineWidth');
175-
}
176-
177172
export function isAllowedStyleKey(key: string): boolean {
178173
return (
179174
allowedStyleKeySet.has(key) ||

packages/react-strict-dom/src/native/css/isLengthStyleKey.js

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
* @flow strict
88
*/
99

10-
import { version } from '../modules/version';
11-
1210
export const lengthStyleKeySet: Set<string> = new Set([
1311
'blockSize',
1412
'borderBottomLeftRadius',
@@ -65,6 +63,8 @@ export const lengthStyleKeySet: Set<string> = new Set([
6563
'minHeight',
6664
'minInlineSize',
6765
'minWidth',
66+
'outlineOffset',
67+
'outlineWidth',
6868
'padding',
6969
'paddingBlock',
7070
'paddingBlockEnd',
@@ -81,8 +81,3 @@ export const lengthStyleKeySet: Set<string> = new Set([
8181
'top',
8282
'width'
8383
]);
84-
85-
if (version.experimental) {
86-
lengthStyleKeySet.add('outlineOffset');
87-
lengthStyleKeySet.add('outlineWidth');
88-
}

0 commit comments

Comments
 (0)