[w3c] ☂️ Web Styles (Part 1) umbrella issue

Add support for Web styles to components

This is the umbrella issue for basic React DOM / Web style additions to React Native components, as described in this proposal: “RFC: Reduce fragmentation across platforms”.

Each of the tasks listed below can be tackled with individual PRs that link back to this issue. Not every task has a known solution or implementation yet, so feel free to discuss implementation details in the comments. Each new style property should take priority over any existing equivalents.

Styles

Basic extensions

• aspectRatio support for string values, i.e., '16 / 9', to align with CSS. https://github.com/facebook/react-native/pull/34629
• fontVariant support for space-separated string values, i.e., 'small-caps common-ligatures'. https://github.com/facebook/react-native/pull/34641
• fontWeight support for number values, i.e., 900. https://github.com/facebook/react-native/pull/34598
• transform support for string values, i.e., 'scaleX(2) translateX(20px)'. https://github.com/facebook/react-native/pull/34660#pullrequestreview-1104804653

Examples:

<View
  style={{
    aspectRatio: '16 / 9',
    transform: 'scaleX(2) translateX(20px)'
  }}
>

<Text
  style={{
    fontVariant: 'small-caps common-ligatures',
    fontWeight: 900
  }}
>

Equivalents

• direction.
• Add CSS Logical Properties.
  • https://github.com/facebook/react-native/pull/35342
  • https://github.com/facebook/react-native/pull/35572
  • borderEndEndRadius is equivalent to borderBottomEndRadius.
  • borderEndStartRadius is equivalent to borderBottomStartRadius.
  • borderStartEndRadius is equivalent to borderTopEndRadius.
  • borderStartStartRadius is equivalent to borderTopStartRadius.
  • borderBlockColor is equivalent to borderTopColor & borderBottomColor.
  • borderBlockEndColor is equivalent to borderBottomColor.
  • borderBlockStartColor is equivalent to borderTopColor.
  • borderInlineColor is equivalent to borderEndColor & borderStartColor.
  • borderInlineEndColor is equivalent to borderEndColor.
  • borderInlineStartColor is equivalent to borderStartColor.
  • borderBlockStyle is equivalent to borderTopStyle & borderBottomStyle.
  • borderBlockEndStyle is equivalent to borderBottomStyle.
  • borderBlockStartStyle is equivalent to borderTopStyle.
  • borderInlineStyle is equivalent to borderEndStyle & borderStartStyle.
  • borderInlineEndStyle is equivalent to borderEndStyle.
  • borderInlineStartStyle is equivalent to borderStartStyle.
  • borderBlockWidth is equivalent to borderTopWidth & borderBottomWidth.
  • borderBlockEndWidth is equivalent to borderBottomWidth.
  • borderBlockStartWidth is equivalent to borderTopWidth.
  • borderInlineWidth is equivalent to borderEndWidth & borderStartWidth.
  • borderInlineEndWidth is equivalent to borderEndWidth.
  • borderInlineStartWidth is equivalent to borderStartWidth.
  • Map marginInlineStart to marginStart.
  • Map marginInlineEnd to marginEnd.
  • Map marginBlockStart to marginTop.
  • Map marginBlockEnd to marginBottom.
  • Map marginBlock to marginVertical.
  • Map marginInline to marginHorizontal.
  • Map paddingInlineStart to paddingStart.
  • Map paddingInlineEnd to paddingEnd.
  • Map paddingBlockStart to paddingTop.
  • Map paddingBlockEnd to paddingBottom.
  • Map paddingBlock to paddingVertical.
  • Map paddingInline to paddingHorizontal.
  • inset is equivalent to top & bottom & right & left.
  • insetBlock is equivalent to top & bottom.
  • insetBlockEnd is equivalent to bottom.
  • insetBlockStart is equivalent to top.
  • insetInline is equivalent to right & left.
  • insetInlineEnd is equivalent to right or left.
  • insetInlineStart is equivalent to right or left.
• Add objectFit. Partial equivalent to the resizeMode style and prop of <Image>. https://github.com/facebook/react-native/pull/34576
  • Map objectFit === 'contain' to resizeMode = 'contain'.
  • Map objectFit === 'cover' to resizeMode = 'cover'
  • Map objectFit === 'fill' to resizeMode = 'stretch'
  • Map objectFit === 'scale-down' to resizeMode = 'contain'
• Add pointerEvents. Equivalent to the pointerEvents prop of <View>. https://github.com/facebook/react-native/pull/34586/
  • Retain the React Native specific box-none and box-only values.
• Add userSelect. Equivalent to using selectable prop on <Text>. https://github.com/facebook/react-native/pull/34575
• Add verticalAlign. https://github.com/facebook/react-native/pull/34567
  • Map verticalAlign to textAlignVertical.
  • Map verticalAlign === 'middle' to textAlignVertical = 'center';

Examples:

<View
  style={{
    pointerEvents: 'none'
  }}
>

<Text
  style={{
    userSelect: 'none',
    verticalAlign: 'middle'
  }}
>

<Image
  style={{
    objectFit: 'cover'
  }}
>

New features

• Add expanded support for CSS Colors, e.g., hsla(). Potentially via Colorjs.io. https://github.com/facebook/react-native/pull/34600
• Add gap. https://github.com/facebook/yoga/pull/1116
• Add textShadow. https://github.com/facebook/react-native/pull/34645
  • Similar to React Native textShadow props

<View
  style={{
    boxShadow: '1px 1px 1px 1px #eee',
    backgroundColor: 'hsla(50,50,50,0.5)',
    backgroundImage: 'url(https://image.png)',
    pointerEvents: 'none',
    transform: 'scale(0.9)',
    width: '5rem'
  }}
>

<Text
  style={{
    textShadow: '1px 1px 1px #eee',
    userSelect: 'none',
    verticalAlign: 'middle'
  }}
>

<Image
  style={{
    objectFit: 'cover'
  }}
>

[meftunca]

please support for ‘transform-origin’ and ‘display:grid’

[sarulathadurai]

Hi @necolas I will be taking this

 Add native support for single/multiple CSS box shadows.
 Cross-platform shadows to replace Android elevation style, and buggy iOS shadow* styles.```