{
{
"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 888de2624e..e0586a57a5 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/StyleSheet/__tests__/preprocess-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/preprocess-test.js
index 06bfd14d24..4cf324117b 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 6274527512..91a87b2af4 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 0000000000..0381d99dc8
--- /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 32652289e0..523b817ddb 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;
+ }
}
}
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 7410a86716..c18de5711a 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 fc51f17e91..9c70cedf1d 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`] = `
`;