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.

[fayadabbasi3-MOR]

🤖 CodeGuard Review

Summary: 2 issues found
• ⚠️ 1 warnings • 💡 1 suggestions

⚠️ Warnings

• packages/react-dom-bindings/src/client/CSSShorthandProperty.js (line 9)
  Outdated source reference URL
  The comment references 'mozilla-firefox/firefox' repository which appears to be incorrect. The official Firefox repository is 'mozilla/gecko-dev'.
  Why: An incorrect repository reference could mislead future developers trying to understand the source of this data or verify updates against the upstream source.
  Fix: Verify the correct repository URL. The original 'mozilla/gecko-dev' reference was likely correct, or update to the current official Firefox source repository.

💡 Suggestions

• packages/react-dom-bindings/src/client/CSSShorthandProperty.js (line 244)
  Consider verifying CSS property mappings
  Several new CSS shorthand properties have been added (e.g., verticalAlign, whiteSpace) with mappings that may not align with standard CSS specifications.
  Why: Some of the new mappings like 'verticalAlign' to alignment properties and 'whiteSpace' to text-wrap properties appear non-standard and could cause issues with CSS property handling.
  Fix: Double-check these mappings against the CSS specifications and browser implementations to ensure they accurately represent the actual longhand properties that each shorthand expands to.

---

Powered by CodeGuard • React with 👍 or 👎 to help me learn