Repository: facebook/react
Pull request: Update CSS shorthand property list

## Summary

This list was created in #14181 on Nov 10, 2018. CSS has changed a lot since then.

This pull request updates the list, obtained via following code (a browser environment is required to load the test file):

```html
<textarea></textarea>
<script>
  function ok() {}
</script>
<script src="https://cdn.jsdelivr.net/gh/mozilla-firefox/firefox@58f365ba0eb5761a182f1925e4654cc75212b8ac/layout/style/test/property_database.js"></script>
<script>
  const camelCase = (string) =>
    string.replace(/-(.)/g, (_, char) => char.toUpperCase());
  const result = Object.fromEntries(
    Object.entries(gCSSProperties)
      .filter(
        ([name, value]) => !name.startsWith("-") && "subproperties" in value,
      )
      .map(([name, value]) => [
        camelCase(name),
        value.subproperties.map(camelCase).sort((a, b) => (a > b ? 1 : -1)),
      ])
      .sort(([a], [b]) => (a > b ? 1 : -1)),
  );
  document.querySelector("textarea").value = JSON.stringify(result, null, 2);
</script>
```

Other considerations:

- Bundle size: unchanged, since this is only used in the development build
- Compatibility: unchanged, same as above

## How did you test this change?

I modified existing test:

```diff
diff --git a/packages/react-dom/src/__tests__/ReactDOMShorthandCSSPropertyCollision-test.js b/packages/react-dom/src/__tests__/ReactDOMShorthandCSSPropertyCollision-test.js
index c03107e467..6ee01ec7fd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMShorthandCSSPropertyCollision-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMShorthandCSSPropertyCollision-test.js
@@ -30,14 +30,14 @@ describe('ReactDOMShorthandCSSPropertyCollision', () => {
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);
     await act(() => {
-      root.render(<div style={{font: 'foo', fontStyle: 'bar'}} />);
+      root.render(<div style={{inset: 42, top: 37}} />);
     });
     await act(() => {
-      root.render(<div style={{font: 'foo'}} />);
+      root.render(<div style={{inset: 42}} />);
     });
     assertConsoleErrorDev([
-      'Removing a style property during rerender (fontStyle) ' +
-        'when a conflicting property is set (font) can lead to styling ' +
+      'Removing a style property during rerender (top) ' +
+        'when a conflicting property is set (inset) can lead to styling ' +
         "bugs. To avoid this, don't mix shorthand and non-shorthand " +
         'properties for the same value; instead, replace the shorthand ' +
         'with separate values.' +
```

And checked the test still pass:

```shellsession
$ yarn test ReactDOMShorthandCSSPropertyCollision
yarn run v1.22.22
$ node ./scripts/jest/jest-cli.js ReactDOMShorthandCSSPropertyCollision
$ NODE_ENV=development RELEASE_CHANNEL=experimental compactConsole=false node ./scripts/jest/jest.js --config ./scripts/jest/config.source.js ReactDOMShorthandCSSPropertyCollision

Running tests for default (experimental)...
 PASS  packages/react-dom/src/__tests__/ReactDOMShorthandCSSPropertyCollision-test.js
  ReactDOMShorthandCSSPropertyCollision
    ✓ should warn for conflicting CSS shorthand updates (248 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.773 s, estimated 1 s
Ran all test suites matching /ReactDOMShorthandCSSPropertyCollision/i.
Done in 1.53s.
```


Changed files:
filename: packages/react-dom-bindings/src/client/CSSShorthandProperty.js
patch: @@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// List derived from Gecko source code:
-// https://github.com/mozilla/gecko-dev/blob/4e638efc71/layout/style/test/property_database.js
+// List derived from Firefox source code:
+// https://github.com/mozilla-firefox/firefox/blob/58f365ba0eb5761a182f1925e4654cc75212b8ac/layout/style/test/property_database.js
 export const shorthandToLonghand = {
   animation: [
     'animationDelay',
@@ -49,6 +49,15 @@ export const shorthandToLonghand = {
     'borderTopStyle',
     'borderTopWidth',
   ],
+  borderBlock: [
+    'borderBlockEndColor',
+    'borderBlockEndStyle',
+    'borderBlockEndWidth',
+    'borderBlockStartColor',
+    'borderBlockStartStyle',
+    'borderBlockStartWidth',
+  ],
+  borderBlockColor: ['borderBlockEndColor', 'borderBlockStartColor'],
   borderBlockEnd: [
     'borderBlockEndColor',
     'borderBlockEndStyle',
@@ -59,6 +68,8 @@ export const shorthandToLonghand = {
     'borderBlockStartStyle',
     'borderBlockStartWidth',
   ],
+  borderBlockStyle: ['borderBlockEndStyle', 'borderBlockStartStyle'],
+  borderBlockWidth: ['borderBlockEndWidth', 'borderBlockStartWidth'],
   borderBottom: ['borderBottomColor', 'borderBottomStyle', 'borderBottomWidth'],
   borderColor: [
     'borderBottomColor',
@@ -73,6 +84,15 @@ export const shorthandToLonghand = {
     'borderImageSource',
     'borderImageWidth',
   ],
+  borderInline: [
+    'borderInlineEndColor',
+    'borderInlineEndStyle',
+    'borderInlineEndWidth',
+    'borderInlineStartColor',
+    'borderInlineStartStyle',
+    'borderInlineStartWidth',
+  ],
+  borderInlineColor: ['borderInlineEndColor', 'borderInlineStartColor'],
   borderInlineEnd: [
     'borderInlineEndColor',
     'borderInlineEndStyle',
@@ -83,6 +103,8 @@ export const shorthandToLonghand = {
     'borderInlineStartStyle',
     'borderInlineStartWidth',
   ],
+  borderInlineStyle: ['borderInlineEndStyle', 'borderInlineStartStyle'],
+  borderInlineWidth: ['borderInlineEndWidth', 'borderInlineStartWidth'],
   borderLeft: ['borderLeftColor', 'borderLeftStyle', 'borderLeftWidth'],
   borderRadius: [
     'borderBottomLeftRadius',
@@ -104,8 +126,11 @@ export const shorthandToLonghand = {
     'borderRightWidth',
     'borderTopWidth',
   ],
+  colorAdjust: ['printColorAdjust'],
   columnRule: ['columnRuleColor', 'columnRuleStyle', 'columnRuleWidth'],
   columns: ['columnCount', 'columnWidth'],
+  containIntrinsicSize: ['containIntrinsicHeight', 'containIntrinsicWidth'],
+  container: ['containerName', 'containerType'],
   flex: ['flexBasis', 'flexGrow', 'flexShrink'],
   flexFlow: ['flexDirection', 'flexWrap'],
   font: [
@@ -127,6 +152,12 @@ export const shorthandToLonghand = {
     'fontWeight',
     'lineHeight',
   ],
+  fontSynthesis: [
+    'fontSynthesisPosition',
+    'fontSynthesisSmallCaps',
+    'fontSynthesisStyle',
+    'fontSynthesisWeight',
+  ],
   fontVariant: [
     'fontVariantAlternates',
     'fontVariantCaps',
@@ -155,8 +186,13 @@ export const shorthandToLonghand = {
     'gridTemplateColumns',
     'gridTemplateRows',
   ],
+  inset: ['bottom', 'left', 'right', 'top'],
+  insetBlock: ['insetBlockEnd', 'insetBlockStart'],
+  insetInline: ['insetInlineEnd', 'insetInlineStart'],
   listStyle: ['listStyleImage', 'listStylePosition', 'listStyleType'],
   margin: ['marginBottom', 'marginLeft', 'marginRight', 'marginTop'],
+  marginBlock: ['marginBlockEnd', 'marginBlockStart'],
+  marginInline: ['marginInlineEnd', 'marginInlineStart'],
   marker: ['markerEnd', 'markerMid', 'markerStart'],
   mask: [
     'maskClip',
@@ -170,23 +206,57 @@ export const shorthandToLonghand = {
     'maskSize',
   ],
   maskPosition: ['maskPositionX', 'maskPositionY'],
+  offset: [
+    'offsetAnchor',
+    'offsetDistance',
+    'offsetPath',
+    'offsetPosition',
+    'offsetRotate',
+  ],
   outline: ['outlineColor', 'outlineStyle', 'outlineWidth'],
   overflow: ['overflowX', 'overflowY'],
+  overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],
   padding: ['paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'],
+  paddingBlock: ['paddingBlockEnd', 'paddingBlockStart'],
+  paddingInline: ['paddingInlineEnd', 'paddingInlineStart'],
+  pageBreakAfter: ['breakAfter'],
+  pageBreakBefore: ['breakBefore'],
+  pageBreakInside: ['breakInside'],
   placeContent: ['alignContent', 'justifyContent'],
   placeItems: ['alignItems', 'justifyItems'],
   placeSelf: ['alignSelf', 'justifySelf'],
+  scrollMargin: [
+    'scrollMarginBottom',
+    'scrollMarginLeft',
+    'scrollMarginRight',
+    'scrollMarginTop',
+  ],
+  scrollMarginBlock: ['scrollMarginBlockEnd', 'scrollMarginBlockStart'],
+  scrollMarginInline: ['scrollMarginInlineEnd', 'scrollMarginInlineStart'],
+  scrollPadding: [
+    'scrollPaddingBottom',
+    'scrollPaddingLeft',
+    'scrollPaddingRight',
+    'scrollPaddingTop',
+  ],
+  scrollPaddingBlock: ['scrollPaddingBlockEnd', 'scrollPaddingBlockStart'],
+  scrollPaddingInline: ['scrollPaddingInlineEnd', 'scrollPaddingInlineStart'],
   textDecoration: [
     'textDecorationColor',
     'textDecorationLine',
     'textDecorationStyle',
+    'textDecorationThickness',
   ],
   textEmphasis: ['textEmphasisColor', 'textEmphasisStyle'],
+  textWrap: ['textWrapMode', 'textWrapStyle'],
   transition: [
+    'transitionBehavior',
     'transitionDelay',
     'transitionDuration',
     'transitionProperty',
     'transitionTimingFunction',
   ],
+  verticalAlign: ['alignmentBaseline', 'baselineShift', 'baselineSource'],
+  whiteSpace: ['textWrapMode', 'whiteSpaceCollapse'],
   wordWrap: ['overflowWrap'],
 };