Update CSS shorthand property list

[kidonng]

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):

<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 --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:

$ 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.