From 5ada9076b4522d2bd82d32e2b9520a23db0d13ee Mon Sep 17 00:00:00 2001 From: Roman Melnyk Date: Fri, 11 Oct 2024 13:10:54 +0300 Subject: [PATCH 1/3] Remove misleading fake http status code. --- packages/react-native-web/src/exports/Image/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js index 5a81b0b46..389a3023e 100644 --- a/packages/react-native-web/src/exports/Image/index.js +++ b/packages/react-native-web/src/exports/Image/index.js @@ -298,7 +298,7 @@ const Image: React.AbstractComponent< if (onError) { onError({ nativeEvent: { - error: `Failed to load resource ${uri} (404)` + error: `Failed to load resource ${uri}` } }); } From 0440b25243e34ce7e8cd00ab8e50f3cdead07e25 Mon Sep 17 00:00:00 2001 From: Roman Melnyk Date: Fri, 13 Dec 2024 14:00:41 +0200 Subject: [PATCH 2/3] [fix] Respect longform and shortform style values order in original provided style value. --- .../StyleSheet/__tests__/preprocess-test.js | 194 +++++++++++++++--- .../compiler/createReactDOMStyle.js | 90 +------- .../constants/shortFormExpansions.js | 72 +++++++ .../src/exports/StyleSheet/preprocess.js | 23 ++- 4 files changed, 274 insertions(+), 105 deletions(-) create mode 100644 packages/react-native-web/src/exports/StyleSheet/constants/shortFormExpansions.js diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/preprocess-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/preprocess-test.js index 06bfd14d2..4cf324117 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/preprocess-test.js +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/preprocess-test.js @@ -25,15 +25,15 @@ describe('StyleSheet/preprocess', () => { }) ).toEqual({ insetInlineEnd: 1, - insetInlineStart: 1, - marginBlock: 1, - marginInline: 1, - marginInlineEnd: 1, - marginInlineStart: 1, - paddingBlock: 1, - paddingInline: 1, - paddingInlineEnd: 1, - paddingInlineStart: 1 + marginTop: 1, + marginBottom: 1, + marginLeft: 1, + marginRight: 1, + paddingTop: 1, + paddingBottom: 1, + paddingLeft: 1, + paddingRight: 1, + insetInlineStart: 1 }); }); @@ -53,26 +53,26 @@ describe('StyleSheet/preprocess', () => { // standard insetInlineEnd: 2, insetInlineStart: 2, - marginBlock: 2, - marginInline: 2, - marginInlineEnd: 2, - marginInlineStart: 2, - paddingBlock: 2, - paddingInline: 2, - paddingInlineEnd: 2, - paddingInlineStart: 2 + marginTop: 2, + marginBottom: 2, + marginLeft: 2, + marginRight: 2, + paddingTop: 2, + paddingBottom: 2, + paddingLeft: 2, + paddingRight: 2 }) ).toEqual({ insetInlineEnd: 2, insetInlineStart: 2, - marginBlock: 2, - marginInline: 2, - marginInlineEnd: 2, - marginInlineStart: 2, - paddingBlock: 2, - paddingInline: 2, - paddingInlineEnd: 2, - paddingInlineStart: 2 + marginTop: 2, + marginBottom: 2, + marginLeft: 2, + marginRight: 2, + paddingTop: 2, + paddingBottom: 2, + paddingLeft: 2, + paddingRight: 2 }); }); @@ -255,4 +255,148 @@ describe('StyleSheet/preprocess', () => { }); }); }); + + describe('preprocesses multiple padding styles with different order', () => { + test('padding first', () => { + expect( + preprocess({ + padding: 0, + paddingTop: 1, + paddingBottom: 2, + paddingRight: 3, + paddingLeft: 4 + }) + ).toEqual({ + paddingTop: 1, + paddingBottom: 2, + paddingRight: 3, + paddingLeft: 4 + }); + }); + + test('padding last', () => { + expect( + preprocess({ + paddingTop: 0, + paddingBottom: 1, + paddingRight: 2, + paddingLeft: 3, + padding: 4 + }) + ).toEqual({ + paddingTop: 4, + paddingBottom: 4, + paddingRight: 4, + paddingLeft: 4 + }); + }); + + test('paddingVertical/paddingHorizontal (paddingBlock/paddingInline) first', () => { + expect( + preprocess({ + paddingVertical: 0, + paddingTop: 1, + paddingBottom: 2, + paddingHorizontal: 3, + paddingRight: 4, + paddingLeft: 5 + }) + ).toEqual({ + paddingTop: 1, + paddingBottom: 2, + paddingRight: 4, + paddingLeft: 5 + }); + }); + + test('paddingVertical/paddingHorizontal (paddingBlock/paddingInline) last', () => { + expect( + preprocess({ + paddingTop: 0, + paddingBottom: 1, + paddingVertical: 2, + paddingRight: 3, + paddingLeft: 4, + paddingHorizontal: 5 + }) + ).toEqual({ + paddingTop: 2, + paddingBottom: 2, + paddingRight: 5, + paddingLeft: 5 + }); + }); + }); + + describe('preprocesses multiple margin styles with different order', () => { + test('margin first', () => { + expect( + preprocess({ + margin: 0, + marginTop: 1, + marginBottom: 2, + marginRight: 3, + marginLeft: 4 + }) + ).toEqual({ + marginTop: 1, + marginBottom: 2, + marginRight: 3, + marginLeft: 4 + }); + }); + + test('margin last', () => { + expect( + preprocess({ + marginTop: 0, + marginBottom: 1, + marginRight: 2, + marginLeft: 3, + margin: 4 + }) + ).toEqual({ + marginTop: 4, + marginBottom: 4, + marginRight: 4, + marginLeft: 4 + }); + }); + + test('marginVertical/marginHorizontal (marginBlock/marginInline) first', () => { + expect( + preprocess({ + marginVertical: 0, + marginTop: 1, + marginBottom: 2, + marginHorizontal: 3, + marginRight: 4, + marginLeft: 5 + }) + ).toEqual({ + marginTop: 1, + marginBottom: 2, + marginRight: 4, + marginLeft: 5 + }); + }); + + test('marginVertical/marginHorizontal (marginBlock/marginInline) last', () => { + expect( + preprocess({ + marginTop: 0, + marginBottom: 1, + marginVertical: 2, + marginRight: 3, + marginLeft: 4, + marginHorizontal: 5 + }) + ).toEqual({ + marginTop: 2, + marginBottom: 2, + marginRight: 5, + marginLeft: 5 + }); + }); + }); }); diff --git a/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js b/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js index 627452751..91a87b2af 100644 --- a/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js +++ b/packages/react-native-web/src/exports/StyleSheet/compiler/createReactDOMStyle.js @@ -8,6 +8,7 @@ */ import normalizeValueWithProperty from './normalizeValueWithProperty'; +import STYLE_SHORT_FORM_EXPANSIONS from '../constants/shortFormExpansions'; import canUseDOM from '../../../modules/canUseDom'; type Style = { [key: string]: any }; @@ -37,75 +38,6 @@ const MONOSPACE_FONT_STACK = 'monospace,monospace'; const SYSTEM_FONT_STACK = '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif'; -const STYLE_SHORT_FORM_EXPANSIONS = { - borderColor: [ - 'borderTopColor', - 'borderRightColor', - 'borderBottomColor', - 'borderLeftColor' - ], - borderBlockColor: ['borderTopColor', 'borderBottomColor'], - borderInlineColor: ['borderRightColor', 'borderLeftColor'], - borderRadius: [ - 'borderTopLeftRadius', - 'borderTopRightRadius', - 'borderBottomRightRadius', - 'borderBottomLeftRadius' - ], - borderStyle: [ - 'borderTopStyle', - 'borderRightStyle', - 'borderBottomStyle', - 'borderLeftStyle' - ], - borderBlockStyle: ['borderTopStyle', 'borderBottomStyle'], - borderInlineStyle: ['borderRightStyle', 'borderLeftStyle'], - borderWidth: [ - 'borderTopWidth', - 'borderRightWidth', - 'borderBottomWidth', - 'borderLeftWidth' - ], - borderBlockWidth: ['borderTopWidth', 'borderBottomWidth'], - borderInlineWidth: ['borderRightWidth', 'borderLeftWidth'], - insetBlock: ['top', 'bottom'], - insetInline: ['left', 'right'], - marginBlock: ['marginTop', 'marginBottom'], - marginInline: ['marginRight', 'marginLeft'], - paddingBlock: ['paddingTop', 'paddingBottom'], - paddingInline: ['paddingRight', 'paddingLeft'], - overflow: ['overflowX', 'overflowY'], - overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'], - borderBlockStartColor: ['borderTopColor'], - borderBlockStartStyle: ['borderTopStyle'], - borderBlockStartWidth: ['borderTopWidth'], - borderBlockEndColor: ['borderBottomColor'], - borderBlockEndStyle: ['borderBottomStyle'], - borderBlockEndWidth: ['borderBottomWidth'], - //borderInlineStartColor: ['borderLeftColor'], - //borderInlineStartStyle: ['borderLeftStyle'], - //borderInlineStartWidth: ['borderLeftWidth'], - //borderInlineEndColor: ['borderRightColor'], - //borderInlineEndStyle: ['borderRightStyle'], - //borderInlineEndWidth: ['borderRightWidth'], - borderEndStartRadius: ['borderBottomLeftRadius'], - borderEndEndRadius: ['borderBottomRightRadius'], - borderStartStartRadius: ['borderTopLeftRadius'], - borderStartEndRadius: ['borderTopRightRadius'], - insetBlockEnd: ['bottom'], - insetBlockStart: ['top'], - //insetInlineEnd: ['right'], - //insetInlineStart: ['left'], - marginBlockStart: ['marginTop'], - marginBlockEnd: ['marginBottom'], - //marginInlineStart: ['marginLeft'], - //marginInlineEnd: ['marginRight'], - paddingBlockStart: ['paddingTop'], - paddingBlockEnd: ['paddingBottom'] - //paddingInlineStart: ['marginLeft'], - //paddingInlineEnd: ['marginRight'], -}; - /** * Reducer */ @@ -166,7 +98,7 @@ const createReactDOMStyle = (style: Style, isInline?: boolean): Style => { resolvedStyle.direction = value; } else { const value = normalizeValueWithProperty(style[prop], prop); - const longFormProperties = STYLE_SHORT_FORM_EXPANSIONS[prop]; + if (isInline && prop === 'inset') { if (style.insetInline == null) { resolvedStyle.left = value; @@ -194,16 +126,16 @@ const createReactDOMStyle = (style: Style, isInline?: boolean): Style => { resolvedStyle.paddingTop = value; resolvedStyle.paddingBottom = value; } - } else if (longFormProperties) { - longFormProperties.forEach((longForm, i) => { - // The value of any longform property in the original styles takes - // precedence over the shortform's value. - if (style[longForm] == null) { - resolvedStyle[longForm] = value; - } - }); } else { - resolvedStyle[prop] = value; + const longFormProperties = STYLE_SHORT_FORM_EXPANSIONS[prop]; + + if (Array.isArray(longFormProperties)) { + for (let i = 0, len = longFormProperties.length; i < len; i++) { + resolvedStyle[longFormProperties[i]] = value; + } + } else { + resolvedStyle[prop] = value; + } } } } diff --git a/packages/react-native-web/src/exports/StyleSheet/constants/shortFormExpansions.js b/packages/react-native-web/src/exports/StyleSheet/constants/shortFormExpansions.js new file mode 100644 index 000000000..0381d99dc --- /dev/null +++ b/packages/react-native-web/src/exports/StyleSheet/constants/shortFormExpansions.js @@ -0,0 +1,72 @@ +const STYLE_SHORT_FORM_EXPANSIONS = { + borderColor: [ + 'borderTopColor', + 'borderRightColor', + 'borderBottomColor', + 'borderLeftColor' + ], + borderBlockColor: ['borderTopColor', 'borderBottomColor'], + borderInlineColor: ['borderRightColor', 'borderLeftColor'], + borderRadius: [ + 'borderTopLeftRadius', + 'borderTopRightRadius', + 'borderBottomRightRadius', + 'borderBottomLeftRadius' + ], + borderStyle: [ + 'borderTopStyle', + 'borderRightStyle', + 'borderBottomStyle', + 'borderLeftStyle' + ], + borderBlockStyle: ['borderTopStyle', 'borderBottomStyle'], + borderInlineStyle: ['borderRightStyle', 'borderLeftStyle'], + borderWidth: [ + 'borderTopWidth', + 'borderRightWidth', + 'borderBottomWidth', + 'borderLeftWidth' + ], + borderBlockWidth: ['borderTopWidth', 'borderBottomWidth'], + borderInlineWidth: ['borderRightWidth', 'borderLeftWidth'], + insetBlock: ['top', 'bottom'], + insetInline: ['left', 'right'], + margin: ['marginTop', 'marginBottom', 'marginRight', 'marginLeft'], + marginBlock: ['marginTop', 'marginBottom'], + marginInline: ['marginRight', 'marginLeft'], + padding: ['paddingTop', 'paddingBottom', 'paddingRight', 'paddingLeft'], + paddingBlock: ['paddingTop', 'paddingBottom'], + paddingInline: ['paddingRight', 'paddingLeft'], + overflow: ['overflowX', 'overflowY'], + overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'], + borderBlockStartColor: ['borderTopColor'], + borderBlockStartStyle: ['borderTopStyle'], + borderBlockStartWidth: ['borderTopWidth'], + borderBlockEndColor: ['borderBottomColor'], + borderBlockEndStyle: ['borderBottomStyle'], + borderBlockEndWidth: ['borderBottomWidth'], + //borderInlineStartColor: ['borderLeftColor'], + //borderInlineStartStyle: ['borderLeftStyle'], + //borderInlineStartWidth: ['borderLeftWidth'], + //borderInlineEndColor: ['borderRightColor'], + //borderInlineEndStyle: ['borderRightStyle'], + //borderInlineEndWidth: ['borderRightWidth'], + borderEndStartRadius: ['borderBottomLeftRadius'], + borderEndEndRadius: ['borderBottomRightRadius'], + borderStartStartRadius: ['borderTopLeftRadius'], + borderStartEndRadius: ['borderTopRightRadius'], + insetBlockEnd: ['bottom'], + insetBlockStart: ['top'], + //insetInlineEnd: ['right'], + //insetInlineStart: ['left'], + marginBlockStart: ['marginTop'], + marginBlockEnd: ['marginBottom'], + marginInlineStart: ['marginLeft'], + marginInlineEnd: ['marginRight'], + paddingBlockStart: ['paddingTop'], + paddingBlockEnd: ['paddingBottom'], + paddingInlineStart: ['paddingLeft'], + paddingInlineEnd: ['paddingRight'] +}; + +export default STYLE_SHORT_FORM_EXPANSIONS; diff --git a/packages/react-native-web/src/exports/StyleSheet/preprocess.js b/packages/react-native-web/src/exports/StyleSheet/preprocess.js index 32652289e..523b817dd 100644 --- a/packages/react-native-web/src/exports/StyleSheet/preprocess.js +++ b/packages/react-native-web/src/exports/StyleSheet/preprocess.js @@ -9,6 +9,7 @@ import normalizeColor from './compiler/normalizeColor'; import normalizeValueWithProperty from './compiler/normalizeValueWithProperty'; +import STYLE_SHORT_FORM_EXPANSIONS from './constants/shortFormExpansions'; import { warnOnce } from '../../modules/warnOnce'; const emptyObject = {}; @@ -156,6 +157,8 @@ export const preprocess = ( } } + const isStyle = style.$$css !== true; + for (const originalProp in style) { if ( // Ignore some React Native styles @@ -211,7 +214,25 @@ export const preprocess = ( } nextStyle.transform = value; } else { - nextStyle[prop] = value; + const longFormProperties = STYLE_SHORT_FORM_EXPANSIONS[prop]; + + if (isStyle && Array.isArray(longFormProperties)) { + for (let i = 0, len = longFormProperties.length; i < len; i++) { + /*if (nextStyle[property]) { + console.warn('Duplicated style properties overwrite detected', { + longForm: prop, + longFormValue: value, + shortForm: longFormProperties[i], + shortFormValue: nextStyle[longFormProperties[i]], + style + }); + } + */ + nextStyle[longFormProperties[i]] = value; + } + } else { + nextStyle[prop] = value; + } } } From 5ccd0c4030c301d205d85009472118f17eaa5520 Mon Sep 17 00:00:00 2001 From: Roman Melnyk Date: Fri, 13 Dec 2024 14:01:10 +0200 Subject: [PATCH 3/3] [fix] Update test snapshots. --- .../__snapshots__/index-test.js.snap | 4 +- .../AppRegistry/__tests__/index-test.node.js | 32 ++++++----- .../__snapshots__/index-test.js.snap | 28 +++++----- .../__snapshots__/index-test.js.snap | 54 +++++++++---------- .../compiler-createReactDOMStyle-test.js | 6 +-- .../StyleSheet/__tests__/index-test.js | 13 ++--- .../__snapshots__/index-test.js.snap | 12 ++--- .../__snapshots__/index-test.js.snap | 4 +- 8 files changed, 80 insertions(+), 73 deletions(-) diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap index a0eb656e6..b82f89e55 100644 --- a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap @@ -8,7 +8,7 @@ exports[`AppRegistry runApplication styles roots in different documents 1`] = ` "html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0);}", "input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration {display: none;}", "[stylesheet-group="1"] {}", - ".css-view-175oi2r {align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}", + ".css-view-175oi2r {align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 0px; min-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; text-decoration: none; z-index: 0;}", "[stylesheet-group="2"] {}", ".r-display-xoduu5 {display: inline-flex;}", ".r-flex-13awgt0 {flex: 1;}", @@ -35,7 +35,7 @@ exports[`AppRegistry runApplication styles roots in different documents 2`] = ` "html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0);}", "input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration {display: none;}", "[stylesheet-group="1"] {}", - ".css-view-175oi2r {align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}", + ".css-view-175oi2r {align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 0px; min-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; text-decoration: none; z-index: 0;}", "[stylesheet-group="2"] {}", ".r-display-xoduu5 {display: inline-flex;}", ".r-flex-13awgt0 {flex: 1;}", diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js index 336662745..654c25c6c 100644 --- a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js +++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js @@ -45,20 +45,21 @@ describe('AppRegistry', () => { html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);} input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;} [stylesheet-group="1"]{} - .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;} - .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;} - .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;} + .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;} + .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;} + .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-height:0px;min-width:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;position:relative;text-decoration:none;z-index:0;} [stylesheet-group="2"]{} .r-display-krxsd3{display:-webkit-box;} .r-display-xoduu5{display:inline-flex;} .r-flex-13awgt0{flex:1;} - .r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;} [stylesheet-group="3"]{} .r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;} .r-bottom-1p0dtai{bottom:0px;} .r-cursor-1loqt21{cursor:pointer;} .r-left-1d2f490{left:0px;} .r-maxWidth-dnmrzs{max-width:100%;} + .r-overflowX-11yh6sk{overflow-x:hidden;} + .r-overflowY-buy8e9{overflow-y:hidden;} .r-pointerEvents-105ug2t{pointer-events:auto!important;} .r-pointerEvents-12vffkv>*{pointer-events:auto;} .r-pointerEvents-12vffkv{pointer-events:none!important;} @@ -102,20 +103,21 @@ describe('AppRegistry', () => { html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);} input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;} [stylesheet-group="1"]{} - .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;} - .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;} - .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;} + .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;} + .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;} + .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-height:0px;min-width:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;position:relative;text-decoration:none;z-index:0;} [stylesheet-group="2"]{} .r-display-krxsd3{display:-webkit-box;} .r-display-xoduu5{display:inline-flex;} .r-flex-13awgt0{flex:1;} - .r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;} [stylesheet-group="3"]{} .r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;} .r-bottom-1p0dtai{bottom:0px;} .r-cursor-1loqt21{cursor:pointer;} .r-left-1d2f490{left:0px;} .r-maxWidth-dnmrzs{max-width:100%;} + .r-overflowX-11yh6sk{overflow-x:hidden;} + .r-overflowY-buy8e9{overflow-y:hidden;} .r-pointerEvents-105ug2t{pointer-events:auto!important;} .r-pointerEvents-12vffkv>*{pointer-events:auto;} .r-pointerEvents-12vffkv{pointer-events:none!important;} @@ -150,22 +152,26 @@ describe('AppRegistry', () => { html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);} input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;} [stylesheet-group="1"]{} - .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;} - .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;} - .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;} + .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;} + .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;} + .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-height:0px;min-width:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;position:relative;text-decoration:none;z-index:0;} [stylesheet-group="2"]{} - .r-borderWidth-1bee2fs{border-bottom-width:1234px;border-left-width:1234px;border-right-width:1234px;border-top-width:1234px;} .r-display-krxsd3{display:-webkit-box;} .r-display-xoduu5{display:inline-flex;} .r-flex-13awgt0{flex:1;} - .r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;} [stylesheet-group="3"]{} .r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;} .r-backgroundColor-aot4c7{background-color:rgba(128,0,128,1.00);} + .r-borderBottomWidth-98wxn4{border-bottom-width:1234px;} + .r-borderLeftWidth-150mub4{border-left-width:1234px;} + .r-borderRightWidth-1y24uml{border-right-width:1234px;} + .r-borderTopWidth-10pzpfo{border-top-width:1234px;} .r-bottom-1p0dtai{bottom:0px;} .r-cursor-1loqt21{cursor:pointer;} .r-left-1d2f490{left:0px;} .r-maxWidth-dnmrzs{max-width:100%;} + .r-overflowX-11yh6sk{overflow-x:hidden;} + .r-overflowY-buy8e9{overflow-y:hidden;} .r-pointerEvents-105ug2t{pointer-events:auto!important;} .r-pointerEvents-12vffkv>*{pointer-events:auto;} .r-pointerEvents-12vffkv{pointer-events:none!important;} diff --git a/packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap index f80cca9c3..ec6234cd9 100644 --- a/packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/CheckBox/__tests__/__snapshots__/index-test.js.snap @@ -6,10 +6,10 @@ exports[`CheckBox prop "accessibilityLabel" value is set 1`] = ` class="css-view-175oi2r r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz" >
@@ -21,10 +21,10 @@ exports[`CheckBox prop "accessibilityReadOnly" value is set 1`] = ` class="css-view-175oi2r r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz" >
@@ -36,12 +36,12 @@ exports[`CheckBox prop "color" value is set 1`] = ` class="css-view-175oi2r r-cursor-1loqt21 r-height-10ptun7 r-userSelect-lrvibr r-width-1janqcz" >
@@ -54,10 +54,10 @@ exports[`CheckBox prop "dataSet" value is set 1`] = ` data-two="two" >
@@ -69,10 +69,10 @@ exports[`CheckBox prop "nativeID" value is set 1`] = ` id="123" >
@@ -84,10 +84,10 @@ exports[`CheckBox prop "style" value is set 1`] = ` style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;" >
@@ -99,10 +99,10 @@ exports[`CheckBox prop "testID" value is set 1`] = ` data-testid="123" >
diff --git a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap index 35541817a..17e89725b 100644 --- a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap @@ -3,7 +3,7 @@ exports[`components/Image prop "aria-label" 1`] = `
{ { "borderBottomColor": "rgba(255,255,255,1.00)", "borderBottomStyle": "solid", - "borderBottomWidth": "1px", + "borderBottomWidth": "0px", "borderLeftStyle": "solid", "borderLeftWidth": "0px", "borderRightStyle": "solid", @@ -59,13 +59,13 @@ describe('compiler/createReactDOMStyle', () => { "marginBottom": "25px", "marginLeft": "10px", "marginRight": "10px", - "marginTop": "50px", + "marginTop": "25px", "overflowX": "hidden", "overflowY": "hidden", "overscrollBehaviorX": "contain", "overscrollBehaviorY": "contain", "paddingBottom": "10px", - "paddingLeft": "50px", + "paddingLeft": "25px", "paddingRight": "25px", "paddingTop": "10px", } diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js index 888de2624..e0586a57a 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js @@ -317,7 +317,7 @@ describe('StyleSheet', () => { [ "", { - "marginLeft": "10px", + "marginRight": "10px", "right": "12.34%", "textAlign": "right", }, @@ -329,13 +329,14 @@ describe('StyleSheet', () => { inlineStyle, { marginLeft: 1, marginEnd: 0, marginStart: 0, marginRight: 11 } ], + { writingDirection } ) ).toMatchInlineSnapshot(` [ "", { - "marginLeft": "1px", + "marginLeft": "0px", "marginRight": "11px", "right": "12.34%", "textAlign": "right", @@ -361,21 +362,21 @@ describe('StyleSheet', () => { const staticStyle = [a, b, c]; expect(StyleSheet(staticStyle)).toMatchInlineSnapshot(` [ - "r-insetInlineStart-1xn1m1p r-textAlign-fdjqy7 r-marginInlineEnd-1l8l4mf", + "r-insetInlineStart-1xn1m1p r-textAlign-fdjqy7 r-marginRight-zso239", null, ] `); expect(StyleSheet(staticStyle, { writingDirection })) .toMatchInlineSnapshot(` [ - "r-insetInlineStart-1y2vi53 r-textAlign-1ff274t r-marginInlineEnd-t1sew1", + "r-insetInlineStart-1y2vi53 r-textAlign-1ff274t r-marginRight-zso239", null, ] `); const z = StyleSheet.create({ x: { marginRight: 33 } }).x; expect(StyleSheet([staticStyle, z])).toMatchInlineSnapshot(` [ - "r-insetInlineStart-1xn1m1p r-textAlign-fdjqy7 r-marginInlineEnd-1l8l4mf r-marginRight-j4vy6k", + "r-insetInlineStart-1xn1m1p r-textAlign-fdjqy7 r-marginRight-j4vy6k", null, ] `); @@ -394,7 +395,7 @@ describe('StyleSheet', () => { [ "r-insetInlineStart-1y2vi53 r-textAlign-1ff274t", { - "marginLeft": "1px", + "marginLeft": "0px", "marginRight": "11px", }, ] diff --git a/packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap index 7410a8671..c18de5711 100644 --- a/packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap @@ -2,42 +2,42 @@ exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided false value of trackColor 1`] = `
`; exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided thumbColor 1`] = `
`; exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided trackColor 1`] = `
`; exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided activeThumbColor 1`] = `
`; exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided activeTrackColor 1`] = `
`; exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided true value of trackColor 1`] = `
`; diff --git a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap index fc51f17e9..9c70cedf1 100644 --- a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap @@ -150,14 +150,14 @@ exports[`components/Text prop "nativeID" value is set 1`] = ` exports[`components/Text prop "numberOfLines" value is set 1`] = `
`; exports[`components/Text prop "numberOfLines" value is set to one 1`] = `
`;