From a420393e4d9f30ef1d190150218adfb002521f0d Mon Sep 17 00:00:00 2001 From: Hoang Vo Date: Fri, 15 May 2026 20:45:26 +0700 Subject: [PATCH 1/8] Remove outline style props gating --- .../src/native/css/isAllowedStyleKey.js | 13 +++---- .../src/native/css/isLengthStyleKey.js | 9 ++--- .../src/native/modules/version.js | 34 ------------------- .../tests/__mocks__/react-native/index.js | 6 ++-- 4 files changed, 9 insertions(+), 53 deletions(-) delete mode 100644 packages/react-strict-dom/src/native/modules/version.js diff --git a/packages/react-strict-dom/src/native/css/isAllowedStyleKey.js b/packages/react-strict-dom/src/native/css/isAllowedStyleKey.js index bfbb0d2b..2c0f9da5 100644 --- a/packages/react-strict-dom/src/native/css/isAllowedStyleKey.js +++ b/packages/react-strict-dom/src/native/css/isAllowedStyleKey.js @@ -7,8 +7,6 @@ * @flow strict */ -import { version } from '../modules/version'; - const allowedStyleKeySet = new Set([ 'alignContent', 'alignItems', @@ -122,6 +120,10 @@ const allowedStyleKeySet = new Set([ 'mixBlendMode', 'objectFit', 'opacity', + 'outlineColor', + 'outlineOffset', + 'outlineStyle', + 'outlineWidth', 'overflow', 'padding', 'paddingBlock', @@ -167,13 +169,6 @@ const allowedStyleKeySet = new Set([ '::placeholder' ]); -if (version.experimental) { - allowedStyleKeySet.add('outlineColor'); - allowedStyleKeySet.add('outlineOffset'); - allowedStyleKeySet.add('outlineStyle'); - allowedStyleKeySet.add('outlineWidth'); -} - export function isAllowedStyleKey(key: string): boolean { return ( allowedStyleKeySet.has(key) || diff --git a/packages/react-strict-dom/src/native/css/isLengthStyleKey.js b/packages/react-strict-dom/src/native/css/isLengthStyleKey.js index e630c6ed..d28af8f5 100644 --- a/packages/react-strict-dom/src/native/css/isLengthStyleKey.js +++ b/packages/react-strict-dom/src/native/css/isLengthStyleKey.js @@ -7,8 +7,6 @@ * @flow strict */ -import { version } from '../modules/version'; - export const lengthStyleKeySet: Set = new Set([ 'blockSize', 'borderBottomLeftRadius', @@ -65,6 +63,8 @@ export const lengthStyleKeySet: Set = new Set([ 'minHeight', 'minInlineSize', 'minWidth', + 'outlineOffset', + 'outlineWidth', 'padding', 'paddingBlock', 'paddingBlockEnd', @@ -81,8 +81,3 @@ export const lengthStyleKeySet: Set = new Set([ 'top', 'width' ]); - -if (version.experimental) { - lengthStyleKeySet.add('outlineOffset'); - lengthStyleKeySet.add('outlineWidth'); -} diff --git a/packages/react-strict-dom/src/native/modules/version.js b/packages/react-strict-dom/src/native/modules/version.js deleted file mode 100644 index aeaaf67b..00000000 --- a/packages/react-strict-dom/src/native/modules/version.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow strict - */ - -// $FlowFixMe[nonstrict-import] -import * as ReactNative from '../react-native'; - -const reactNativeVersion = ReactNative.Platform.constants.reactNativeVersion; -const { major, minor, patch, prerelease } = reactNativeVersion; -// Main branch OSS build, or internal build -const isHead = major === 1000 && minor === 0 && patch === 0; -// Nightly NPM package -const isNightly = - (typeof prerelease === 'string' && prerelease.startsWith('nightly-')) || - false; - -type Version = { - major: number, - minor: number, - patch: number, - experimental: boolean -}; - -export const version: Version = { - major, - minor, - patch, - experimental: isHead || isNightly -}; diff --git a/packages/react-strict-dom/tests/__mocks__/react-native/index.js b/packages/react-strict-dom/tests/__mocks__/react-native/index.js index 65e14ca4..ae6cf098 100644 --- a/packages/react-strict-dom/tests/__mocks__/react-native/index.js +++ b/packages/react-strict-dom/tests/__mocks__/react-native/index.js @@ -68,9 +68,9 @@ export const Platform = { get constants() { return { reactNativeVersion: { - major: 1000, - minor: 0, - patch: 0, + major: 0, + minor: 79, + patch: 5, prerelease: undefined } }; From 9beb5e68fc82c9c4071ad69f429e886347484a57 Mon Sep 17 00:00:00 2001 From: Hoang Vo Date: Fri, 15 May 2026 20:48:22 +0700 Subject: [PATCH 2/8] Remove native inset style expansion --- .../react-strict-dom/src/native/css/index.js | 21 --------------- .../css-create-test.native.js.snap | 27 ++++++++----------- 2 files changed, 11 insertions(+), 37 deletions(-) diff --git a/packages/react-strict-dom/src/native/css/index.js b/packages/react-strict-dom/src/native/css/index.js index dc2b7dfe..e425b185 100644 --- a/packages/react-strict-dom/src/native/css/index.js +++ b/packages/react-strict-dom/src/native/css/index.js @@ -397,27 +397,6 @@ export function props( nativeProps.cursorColor = styleValue; } } - // inset - else if (styleProp === 'inset') { - nextStyle.top ??= styleValue; - nextStyle.start ??= styleValue; - nextStyle.end ??= styleValue; - nextStyle.bottom ??= styleValue; - } else if (styleProp === 'insetBlock') { - nextStyle.top ??= styleValue; - nextStyle.bottom ??= styleValue; - } else if (styleProp === 'insetBlockEnd') { - nextStyle.bottom = flatStyle.bottom ?? styleValue; - } else if (styleProp === 'insetBlockStart') { - nextStyle.top = flatStyle.top ?? styleValue; - } else if (styleProp === 'insetInline') { - nextStyle.end ??= styleValue; - nextStyle.start ??= styleValue; - } else if (styleProp === 'insetInlineEnd') { - nextStyle.end = flatStyle.end ?? styleValue; - } else if (styleProp === 'insetInlineStart') { - nextStyle.start = flatStyle.start ?? styleValue; - } // lineClamp polyfill else if (styleProp === 'lineClamp') { nativeProps.numberOfLines = styleValue; diff --git a/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap b/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap index c91419c5..a32eac0a 100644 --- a/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap +++ b/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap @@ -433,13 +433,10 @@ exports[`css.create() properties inlineSize: minInlineSize after minWidth 1`] = exports[`css.create() properties inset: inset 1`] = ` { - "bottom": 1, "boxSizing": "content-box", - "end": 1, + "inset": 1, "overflow": "visible", "position": "static", - "start": 1, - "top": 1, } `; @@ -447,23 +444,21 @@ exports[`css.create() properties inset: inset vs phys 1`] = ` { "bottom": 100, "boxSizing": "content-box", - "end": 1, + "inset": 1, "left": 10, "overflow": "visible", "position": "static", "right": 10, - "start": 1, "top": 100, } `; exports[`css.create() properties inset: insetBlock 1`] = ` { - "bottom": 2, "boxSizing": "content-box", + "insetBlock": 2, "overflow": "visible", "position": "static", - "top": 2, } `; @@ -471,6 +466,7 @@ exports[`css.create() properties inset: insetBlock vs phys 1`] = ` { "bottom": 100, "boxSizing": "content-box", + "insetBlock": 2, "overflow": "visible", "position": "static", "top": 100, @@ -479,8 +475,8 @@ exports[`css.create() properties inset: insetBlock vs phys 1`] = ` exports[`css.create() properties inset: insetBlockEnd 1`] = ` { - "bottom": 4, "boxSizing": "content-box", + "insetBlockEnd": 4, "overflow": "visible", "position": "static", } @@ -488,8 +484,8 @@ exports[`css.create() properties inset: insetBlockEnd 1`] = ` exports[`css.create() properties inset: insetBlockEnd vs phys 1`] = ` { - "bottom": 4, "boxSizing": "content-box", + "insetBlockEnd": 4, "overflow": "visible", "position": "static", "top": 100, @@ -499,9 +495,9 @@ exports[`css.create() properties inset: insetBlockEnd vs phys 1`] = ` exports[`css.create() properties inset: insetBlockStart 1`] = ` { "boxSizing": "content-box", + "insetBlockStart": 3, "overflow": "visible", "position": "static", - "top": 3, } `; @@ -509,26 +505,25 @@ exports[`css.create() properties inset: insetBlockStart vs phys 1`] = ` { "bottom": 100, "boxSizing": "content-box", + "insetBlockStart": 3, "overflow": "visible", "position": "static", - "top": 3, } `; exports[`css.create() properties inset: insetInline 1`] = ` { "boxSizing": "content-box", - "end": 5, + "insetInline": 5, "overflow": "visible", "position": "static", - "start": 5, } `; exports[`css.create() properties inset: insetInlineEnd 1`] = ` { "boxSizing": "content-box", - "end": 7, + "insetInlineEnd": 7, "overflow": "visible", "position": "static", } @@ -537,9 +532,9 @@ exports[`css.create() properties inset: insetInlineEnd 1`] = ` exports[`css.create() properties inset: insetInlineStart 1`] = ` { "boxSizing": "content-box", + "insetInlineStart": 6, "overflow": "visible", "position": "static", - "start": 6, } `; From 46d65de5035550ebe9a24cc0055ed56e4d7bdec2 Mon Sep 17 00:00:00 2001 From: Hoang Vo Date: Fri, 15 May 2026 20:49:52 +0700 Subject: [PATCH 3/8] Remove native margin logical prop expansion --- .../react-strict-dom/src/native/css/index.js | 16 ---------------- .../__snapshots__/css-create-test.native.js.snap | 12 ++++++------ packages/website/docs/api/02-css/index.md | 12 ++++++------ 3 files changed, 12 insertions(+), 28 deletions(-) diff --git a/packages/react-strict-dom/src/native/css/index.js b/packages/react-strict-dom/src/native/css/index.js index e425b185..a7b7c9e8 100644 --- a/packages/react-strict-dom/src/native/css/index.js +++ b/packages/react-strict-dom/src/native/css/index.js @@ -401,22 +401,6 @@ export function props( else if (styleProp === 'lineClamp') { nativeProps.numberOfLines = styleValue; } - // marginBlock - else if (styleProp === 'marginBlock') { - nextStyle.marginVertical = styleValue; - } else if (styleProp === 'marginBlockStart') { - nextStyle.marginTop ??= styleValue; - } else if (styleProp === 'marginBlockEnd') { - nextStyle.marginBottom ??= styleValue; - } - // marginInline - else if (styleProp === 'marginInline') { - nextStyle.marginHorizontal = styleValue; - } else if (styleProp === 'marginInlineStart') { - nextStyle.marginStart = styleValue; - } else if (styleProp === 'marginInlineEnd') { - nextStyle.marginEnd = styleValue; - } // paddingBlock else if (styleProp === 'paddingBlock') { nextStyle.paddingVertical = styleValue; diff --git a/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap b/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap index a32eac0a..73d5b6a1 100644 --- a/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap +++ b/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap @@ -615,7 +615,7 @@ exports[`css.create() properties margin (with multiple values) 1`] = ` exports[`css.create() properties margin*: marginBlock 1`] = ` { "boxSizing": "content-box", - "marginVertical": 1, + "marginBlock": 1, "position": "static", } `; @@ -623,7 +623,7 @@ exports[`css.create() properties margin*: marginBlock 1`] = ` exports[`css.create() properties margin*: marginBlockEnd 1`] = ` { "boxSizing": "content-box", - "marginBottom": 3, + "marginBlockEnd": 3, "position": "static", } `; @@ -631,7 +631,7 @@ exports[`css.create() properties margin*: marginBlockEnd 1`] = ` exports[`css.create() properties margin*: marginBlockStart 1`] = ` { "boxSizing": "content-box", - "marginTop": 2, + "marginBlockStart": 2, "position": "static", } `; @@ -639,7 +639,7 @@ exports[`css.create() properties margin*: marginBlockStart 1`] = ` exports[`css.create() properties margin*: marginInline 1`] = ` { "boxSizing": "content-box", - "marginHorizontal": 1, + "marginInline": 1, "position": "static", } `; @@ -647,7 +647,7 @@ exports[`css.create() properties margin*: marginInline 1`] = ` exports[`css.create() properties margin*: marginInlineEnd 1`] = ` { "boxSizing": "content-box", - "marginEnd": 3, + "marginInlineEnd": 3, "position": "static", } `; @@ -655,7 +655,7 @@ exports[`css.create() properties margin*: marginInlineEnd 1`] = ` exports[`css.create() properties margin*: marginInlineStart 1`] = ` { "boxSizing": "content-box", - "marginStart": 2, + "marginInlineStart": 2, "position": "static", } `; diff --git a/packages/website/docs/api/02-css/index.md b/packages/website/docs/api/02-css/index.md index 3209fad4..f15fbd56 100644 --- a/packages/website/docs/api/02-css/index.md +++ b/packages/website/docs/api/02-css/index.md @@ -177,13 +177,13 @@ The following tables represent the compatibility status of the strict CSS API fo | listStylePosition | ❌ | ❌ | | | listStyleType | ❌ | ❌ | | | margin | ✅ | ✅ | | -| marginBlock | 🟡 | 🟡 | | -| marginBlockEnd | 🟡 | 🟡 | | -| marginBlockStart | 🟡 | 🟡 | | +| marginBlock | ✅ | ✅ | | +| marginBlockEnd | ✅ | ✅ | | +| marginBlockStart | ✅ | ✅ | | | marginBottom | ✅ | ✅ | | -| marginInline | 🟡 | 🟡 | | -| marginInlineEnd | 🟡 | 🟡 | | -| marginInlineStart | 🟡 | 🟡 | | +| marginInline | ✅ | ✅ | | +| marginInlineEnd | ✅ | ✅ | | +| marginInlineStart | ✅ | ✅ | | | marginLeft | ✅ | ✅ | | | marginRight | ✅ | ✅ | | | marginTop | ✅ | ✅ | | From 12aec30a282104af8222c17cbadfdfd1657986f7 Mon Sep 17 00:00:00 2001 From: Hoang Vo Date: Fri, 15 May 2026 20:51:46 +0700 Subject: [PATCH 4/8] Remove native padding logical prop expansion --- .../react-strict-dom/src/native/css/index.js | 16 ---------------- .../__snapshots__/compat-test.native.js.snap | 6 +++--- .../__snapshots__/css-create-test.native.js.snap | 12 ++++++------ packages/website/docs/api/02-css/index.md | 12 ++++++------ 4 files changed, 15 insertions(+), 31 deletions(-) diff --git a/packages/react-strict-dom/src/native/css/index.js b/packages/react-strict-dom/src/native/css/index.js index a7b7c9e8..93e1d6f1 100644 --- a/packages/react-strict-dom/src/native/css/index.js +++ b/packages/react-strict-dom/src/native/css/index.js @@ -401,22 +401,6 @@ export function props( else if (styleProp === 'lineClamp') { nativeProps.numberOfLines = styleValue; } - // paddingBlock - else if (styleProp === 'paddingBlock') { - nextStyle.paddingVertical = styleValue; - } else if (styleProp === 'paddingBlockStart') { - nextStyle.paddingTop ??= styleValue; - } else if (styleProp === 'paddingBlockEnd') { - nextStyle.paddingBottom ??= styleValue; - } - // paddingInline - else if (styleProp === 'paddingInline') { - nextStyle.paddingHorizontal = styleValue; - } else if (styleProp === 'paddingInlineStart') { - nextStyle.paddingStart = styleValue; - } else if (styleProp === 'paddingInlineEnd') { - nextStyle.paddingEnd = styleValue; - } // '::placeholder' polyfill else if (styleProp === 'placeholderTextColor') { nativeProps.placeholderTextColor = styleValue; diff --git a/packages/react-strict-dom/tests/compat/__snapshots__/compat-test.native.js.snap b/packages/react-strict-dom/tests/compat/__snapshots__/compat-test.native.js.snap index 7e6b6b79..d3921dfc 100644 --- a/packages/react-strict-dom/tests/compat/__snapshots__/compat-test.native.js.snap +++ b/packages/react-strict-dom/tests/compat/__snapshots__/compat-test.native.js.snap @@ -6,7 +6,7 @@ exports[` "as" equals "div": as=div 1`] = ` ref={[Function]} style={ { - "paddingHorizontal": 32, + "paddingInline": 32, } } /> @@ -68,7 +68,7 @@ exports[` default: default 1`] = ` ref={[Function]} style={ { - "paddingHorizontal": 32, + "paddingInline": 32, } } /> @@ -106,7 +106,7 @@ exports[` styled: styled 1`] = ` "position": "absolute", }, { - "paddingHorizontal": 32, + "paddingInline": 32, }, ] } diff --git a/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap b/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap index 73d5b6a1..20bf4302 100644 --- a/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap +++ b/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap @@ -780,7 +780,7 @@ exports[`css.create() properties padding (with multiple values) 1`] = ` exports[`css.create() properties padding*: paddingBlock 1`] = ` { "boxSizing": "content-box", - "paddingVertical": 1, + "paddingBlock": 1, "position": "static", } `; @@ -788,7 +788,7 @@ exports[`css.create() properties padding*: paddingBlock 1`] = ` exports[`css.create() properties padding*: paddingBlockEnd 1`] = ` { "boxSizing": "content-box", - "paddingBottom": 3, + "paddingBlockEnd": 3, "position": "static", } `; @@ -796,7 +796,7 @@ exports[`css.create() properties padding*: paddingBlockEnd 1`] = ` exports[`css.create() properties padding*: paddingBlockStart 1`] = ` { "boxSizing": "content-box", - "paddingTop": 2, + "paddingBlockStart": 2, "position": "static", } `; @@ -804,7 +804,7 @@ exports[`css.create() properties padding*: paddingBlockStart 1`] = ` exports[`css.create() properties padding*: paddingInline 1`] = ` { "boxSizing": "content-box", - "paddingHorizontal": 1, + "paddingInline": 1, "position": "static", } `; @@ -812,7 +812,7 @@ exports[`css.create() properties padding*: paddingInline 1`] = ` exports[`css.create() properties padding*: paddingInlineEnd 1`] = ` { "boxSizing": "content-box", - "paddingEnd": 3, + "paddingInlineEnd": 3, "position": "static", } `; @@ -820,7 +820,7 @@ exports[`css.create() properties padding*: paddingInlineEnd 1`] = ` exports[`css.create() properties padding*: paddingInlineStart 1`] = ` { "boxSizing": "content-box", - "paddingStart": 2, + "paddingInlineStart": 2, "position": "static", } `; diff --git a/packages/website/docs/api/02-css/index.md b/packages/website/docs/api/02-css/index.md index f15fbd56..9394c1aa 100644 --- a/packages/website/docs/api/02-css/index.md +++ b/packages/website/docs/api/02-css/index.md @@ -210,13 +210,13 @@ The following tables represent the compatibility status of the strict CSS API fo | overflowX | ❌ | ❌ | | | overflowY | ❌ | ❌ | | | padding | ✅ | ✅ | | -| paddingBlock | 🟡 | 🟡 | | -| paddingBlockEnd | 🟡 | 🟡 | | -| paddingBlockStart | 🟡 | 🟡 | | +| paddingBlock | ✅ | ✅ | | +| paddingBlockEnd | ✅ | ✅ | | +| paddingBlockStart | ✅ | ✅ | | | paddingBottom | ✅ | ✅ | | -| paddingInline | 🟡 | 🟡 | | -| paddingInlineEnd | 🟡 | 🟡 | | -| paddingInlineStart | 🟡 | 🟡 | | +| paddingInline | ✅ | ✅ | | +| paddingInlineEnd | ✅ | ✅ | | +| paddingInlineStart | ✅ | ✅ | | | paddingLeft | ✅ | ✅ | | | paddingRight | ✅ | ✅ | | | paddingTop | ✅ | ✅ | | From f1c0df5e570dc24de15a9b5c2ffe43e7817e4074 Mon Sep 17 00:00:00 2001 From: Hoang Vo Date: Fri, 15 May 2026 20:56:39 +0700 Subject: [PATCH 5/8] Remove native logical corner radius expansion --- .../react-strict-dom/src/native/css/index.js | 10 --------- .../css-create-test.native.js.snap | 8 +++---- packages/website/docs/api/02-css/index.md | 22 +++++++++---------- 3 files changed, 15 insertions(+), 25 deletions(-) diff --git a/packages/react-strict-dom/src/native/css/index.js b/packages/react-strict-dom/src/native/css/index.js index 93e1d6f1..ec5bb713 100644 --- a/packages/react-strict-dom/src/native/css/index.js +++ b/packages/react-strict-dom/src/native/css/index.js @@ -373,16 +373,6 @@ export function props( } else if (styleProp === 'borderInlineStartWidth') { nextStyle.borderStartWidth = styleValue; } - // borderRadius - else if (styleProp === 'borderStartStartRadius') { - nextStyle.borderTopStartRadius = styleValue; - } else if (styleProp === 'borderEndStartRadius') { - nextStyle.borderBottomStartRadius = styleValue; - } else if (styleProp === 'borderStartEndRadius') { - nextStyle.borderTopEndRadius = styleValue; - } else if (styleProp === 'borderEndEndRadius') { - nextStyle.borderBottomEndRadius = styleValue; - } // borderStyle:"none" polyfill else if (styleProp === 'borderStyle' && styleValue === 'none') { nextStyle.borderWidth = 0; diff --git a/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap b/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap index 20bf4302..1bb469fe 100644 --- a/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap +++ b/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap @@ -200,7 +200,7 @@ exports[`css.create() properties borderInline: borderInlineStart 1`] = ` exports[`css.create() properties borderRadius: endend 1`] = ` { - "borderBottomEndRadius": 10, + "borderEndEndRadius": 10, "boxSizing": "content-box", "position": "static", } @@ -208,7 +208,7 @@ exports[`css.create() properties borderRadius: endend 1`] = ` exports[`css.create() properties borderRadius: endstart 1`] = ` { - "borderBottomStartRadius": 10, + "borderEndStartRadius": 10, "boxSizing": "content-box", "position": "static", } @@ -216,7 +216,7 @@ exports[`css.create() properties borderRadius: endstart 1`] = ` exports[`css.create() properties borderRadius: startend 1`] = ` { - "borderTopEndRadius": 10, + "borderStartEndRadius": 10, "boxSizing": "content-box", "position": "static", } @@ -224,7 +224,7 @@ exports[`css.create() properties borderRadius: startend 1`] = ` exports[`css.create() properties borderRadius: startstart 1`] = ` { - "borderTopStartRadius": 10, + "borderStartStartRadius": 10, "boxSizing": "content-box", "position": "static", } diff --git a/packages/website/docs/api/02-css/index.md b/packages/website/docs/api/02-css/index.md index 9394c1aa..f71b4d8b 100644 --- a/packages/website/docs/api/02-css/index.md +++ b/packages/website/docs/api/02-css/index.md @@ -95,8 +95,8 @@ The following tables represent the compatibility status of the strict CSS API fo | borderBottomStyle | ✅ | ✅ | | | borderBottomWidth | ✅ | ✅ | | | borderColor | ✅ | ✅ | | -| borderEndEndRadius | 🟡 | 🟡 | | -| borderEndStartRadius | 🟡 | 🟡 | | +| borderEndEndRadius | ✅ | ✅ | | +| borderEndStartRadius | ✅ | ✅ | | | borderInlineColor | 🟡 | 🟡 | | | borderInlineEndColor | 🟡 | 🟡 | | | borderInlineEndStyle | 🟡 | 🟡 | | @@ -114,8 +114,8 @@ The following tables represent the compatibility status of the strict CSS API fo | borderRightColor | ✅ | ✅ | | | borderRightStyle | ✅ | ✅ | | | borderRightWidth | ✅ | ✅ | | -| borderStartEndRadius | 🟡 | 🟡 | | -| borderStartStartRadius | 🟡 | 🟡 | | +| borderStartEndRadius | ✅ | ✅ | | +| borderStartStartRadius | ✅ | ✅ | | | borderStyle | ✅ | ✅ | | | borderTopColor | ✅ | ✅ | | | borderTopLeftRadius | ✅ | ✅ | | @@ -158,13 +158,13 @@ The following tables represent the compatibility status of the strict CSS API fo | gap | ✅ | ✅ | | | height | ✅ | ✅ | | | inlineSize | 🟡 | 🟡 | | -| inset | 🟡 | 🟡 | | -| insetBlock | 🟡 | 🟡 | | -| insetBlockEnd | 🟡 | 🟡 | | -| insetBlockStart | 🟡 | 🟡 | | -| insetInline | 🟡 | 🟡 | | -| insetInlineEnd | 🟡 | 🟡 | | -| insetInlineStart | 🟡 | 🟡 | | +| inset | ✅ | ✅ | | +| insetBlock | ✅ | ✅ | | +| insetBlockEnd | ✅ | ✅ | | +| insetBlockStart | ✅ | ✅ | | +| insetInline | ✅ | ✅ | | +| insetInlineEnd | ✅ | ✅ | | +| insetInlineStart | ✅ | ✅ | | | isolation | ✅ | ✅ | | | justifyContent | ✅ | ✅ | | | justifyItems | ❌ | ❌ | | From 7bbdafe9ef1ff690d70e05cd899b381ef72c1f02 Mon Sep 17 00:00:00 2001 From: Hoang Vo Date: Fri, 15 May 2026 20:58:05 +0700 Subject: [PATCH 6/8] Remove native border block color expansion --- packages/react-strict-dom/src/native/css/index.js | 9 +-------- .../__snapshots__/css-create-test.native.js.snap | 15 +++++++-------- packages/website/docs/api/02-css/index.md | 6 +++--- 3 files changed, 11 insertions(+), 19 deletions(-) diff --git a/packages/react-strict-dom/src/native/css/index.js b/packages/react-strict-dom/src/native/css/index.js index ec5bb713..1be8a56f 100644 --- a/packages/react-strict-dom/src/native/css/index.js +++ b/packages/react-strict-dom/src/native/css/index.js @@ -328,23 +328,16 @@ export function props( nextStyle.minWidth ??= styleValue; } // borderBlock - else if (styleProp === 'borderBlockColor') { - nextStyle.borderTopColor ??= styleValue; - nextStyle.borderBottomColor ??= styleValue; - } else if (styleProp === 'borderBlockStyle') { + else if (styleProp === 'borderBlockStyle') { nextStyle.borderTopStyle ??= styleValue; nextStyle.borderBottomStyle ??= styleValue; } else if (styleProp === 'borderBlockWidth') { nextStyle.borderTopWidth ??= styleValue; nextStyle.borderBottomWidth ??= styleValue; - } else if (styleProp === 'borderBlockEndColor') { - nextStyle.borderBottomColor = flatStyle.borderBottomColor ?? styleValue; } else if (styleProp === 'borderBlockEndStyle') { nextStyle.borderBottomStyle = flatStyle.borderBottomStyle ?? styleValue; } else if (styleProp === 'borderBlockEndWidth') { nextStyle.borderBottomWidth = flatStyle.borderBottomWidth ?? styleValue; - } else if (styleProp === 'borderBlockStartColor') { - nextStyle.borderTopColor = flatStyle.borderTopColor ?? styleValue; } else if (styleProp === 'borderBlockStartStyle') { nextStyle.borderTopStyle = flatStyle.borderTopStyle ?? styleValue; } else if (styleProp === 'borderBlockStartWidth') { diff --git a/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap b/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap index 1bb469fe..3f6ac90e 100644 --- a/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap +++ b/packages/react-strict-dom/tests/css/__snapshots__/css-create-test.native.js.snap @@ -74,10 +74,9 @@ exports[`css.create() properties blockSize: minBlockSize after minHeight 1`] = ` exports[`css.create() properties borderBlock: borderBlock 1`] = ` { - "borderBottomColor": "black", + "borderBlockColor": "black", "borderBottomStyle": "solid", "borderBottomWidth": 1, - "borderTopColor": "black", "borderTopStyle": "solid", "borderTopWidth": 1, "boxSizing": "content-box", @@ -87,10 +86,10 @@ exports[`css.create() properties borderBlock: borderBlock 1`] = ` exports[`css.create() properties borderBlock: borderBlock after borderBlockEnd 1`] = ` { - "borderBottomColor": "red", + "borderBlockColor": "black", + "borderBlockEndColor": "red", "borderBottomStyle": "dotted", "borderBottomWidth": 2, - "borderTopColor": "black", "borderTopStyle": "solid", "borderTopWidth": 1, "boxSizing": "content-box", @@ -100,10 +99,10 @@ exports[`css.create() properties borderBlock: borderBlock after borderBlockEnd 1 exports[`css.create() properties borderBlock: borderBlock after borderBlockStart 1`] = ` { - "borderBottomColor": "black", + "borderBlockColor": "black", + "borderBlockStartColor": "green", "borderBottomStyle": "solid", "borderBottomWidth": 1, - "borderTopColor": "green", "borderTopStyle": "dashed", "borderTopWidth": 3, "boxSizing": "content-box", @@ -113,7 +112,7 @@ exports[`css.create() properties borderBlock: borderBlock after borderBlockStart exports[`css.create() properties borderBlock: borderBlockEnd 1`] = ` { - "borderBottomColor": "red", + "borderBlockEndColor": "red", "borderBottomStyle": "dotted", "borderBottomWidth": 2, "boxSizing": "content-box", @@ -123,7 +122,7 @@ exports[`css.create() properties borderBlock: borderBlockEnd 1`] = ` exports[`css.create() properties borderBlock: borderBlockStart 1`] = ` { - "borderTopColor": "green", + "borderBlockStartColor": "green", "borderTopStyle": "dashed", "borderTopWidth": 3, "boxSizing": "content-box", diff --git a/packages/website/docs/api/02-css/index.md b/packages/website/docs/api/02-css/index.md index f71b4d8b..e9528f17 100644 --- a/packages/website/docs/api/02-css/index.md +++ b/packages/website/docs/api/02-css/index.md @@ -80,11 +80,11 @@ The following tables represent the compatibility status of the strict CSS API fo | backgroundRepeat | ❌ | ❌ | | | backgroundSize | ❌ | ❌ | | | blockSize | 🟡 | 🟡 | | -| borderBlockColor | 🟡 | 🟡 | | -| borderBlockEndColor | 🟡 | 🟡 | | +| borderBlockColor | ✅ | ✅ | | +| borderBlockEndColor | ✅ | ✅ | | | borderBlockEndStyle | 🟡 | 🟡 | | | borderBlockEndWidth | 🟡 | 🟡 | | -| borderBlockStartColor | 🟡 | 🟡 | | +| borderBlockStartColor | ✅ | ✅ | | | borderBlockStartStyle | 🟡 | 🟡 | | | borderBlockStartWidth | 🟡 | 🟡 | | | borderBlockStyle | 🟡 | 🟡 | | From 9f313cd2fcab54ce4d194458b8f796d151652c25 Mon Sep 17 00:00:00 2001 From: Hoang Vo Date: Fri, 15 May 2026 21:30:26 +0700 Subject: [PATCH 7/8] Use native TextInput readOnly prop --- .../createStrictDOMTextInputComponent.js | 2 +- .../src/types/renderer.native.js | 1 + .../__snapshots__/html-test.js.snap-native | 2 ++ .../__snapshots__/html-test.native.js.snap | 32 +++++++++++++++++++ .../tests/html/html-test.native.js | 16 ++++++++++ packages/website/docs/api/02-css/index.md | 13 +++----- packages/website/docs/api/03-html/index.md | 4 +-- 7 files changed, 59 insertions(+), 11 deletions(-) diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js b/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js index 64d99912..42dface0 100644 --- a/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js +++ b/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js @@ -221,7 +221,7 @@ export function createStrictDOMTextInputComponent< } if (readOnly != null) { // $FlowFixMe[react-rule-hook-mutation] - nativeProps.editable = !readOnly; + nativeProps.readOnly = readOnly; } if (spellCheck != null) { // $FlowFixMe[react-rule-hook-mutation] diff --git a/packages/react-strict-dom/src/types/renderer.native.js b/packages/react-strict-dom/src/types/renderer.native.js index 703cc602..843dfed4 100644 --- a/packages/react-strict-dom/src/types/renderer.native.js +++ b/packages/react-strict-dom/src/types/renderer.native.js @@ -111,6 +111,7 @@ type ReactNativeProps = { pointerEvents?: ViewProps['pointerEvents'], ref?: $FlowFixMe, referrerPolicy?: ImageProps['referrerPolicy'], + readOnly?: TextInputProps['readOnly'], renderToHardwareTextureAndroid?: ViewProps['renderToHardwareTextureAndroid'], role?: ?string, secureTextEntry?: TextInputProps['secureTextEntry'], diff --git a/packages/react-strict-dom/tests/html/__snapshots__/html-test.js.snap-native b/packages/react-strict-dom/tests/html/__snapshots__/html-test.js.snap-native index 1bcaa080..699852ed 100644 --- a/packages/react-strict-dom/tests/html/__snapshots__/html-test.js.snap-native +++ b/packages/react-strict-dom/tests/html/__snapshots__/html-test.js.snap-native @@ -3232,6 +3232,7 @@ exports[` "input" supports additional input attributes 1`] = ` onChange={[Function]} onSelectionChange={[Function]} placeholder="Placeholder" + readOnly={true} ref={[Function]} style={ { @@ -5569,6 +5570,7 @@ exports[` "textarea" supports additional textarea attributes 1`] = ` onChange={[Function]} onSelectionChange={[Function]} placeholder="Placeholder" + readOnly={true} ref={[Function]} style={ { diff --git a/packages/react-strict-dom/tests/html/__snapshots__/html-test.native.js.snap b/packages/react-strict-dom/tests/html/__snapshots__/html-test.native.js.snap index 26fc0ebc..03039df1 100644 --- a/packages/react-strict-dom/tests/html/__snapshots__/html-test.native.js.snap +++ b/packages/react-strict-dom/tests/html/__snapshots__/html-test.native.js.snap @@ -850,6 +850,21 @@ exports[` (native polyfills) polyfills: props "disabled" prop 1` /> `; +exports[` (native polyfills) polyfills: props "readOnly" prop 1`] = ` + +`; + exports[` (native polyfills) polyfills: props "style" prop 1`] = ` (native polyfills) polyfills: props