Added slash of alpha support using rgb() (#50281)

Summary:
Fixes #50207

Added slash alpha support like `rgb(255 122 127 / 0.2);`, currently seems we don't support it.

## Changelog:

[GENERAL] [ADDED] - Added slash of alpha support using rgb()

Pull Request resolved: #50281

Test Plan: `rgb(255 122 127 / 0.2)` can shows correctly.

Reviewed By: cipolleschi

Differential Revision: D72009174

Pulled By: NickGerleman

fbshipit-source-id: f53e550cfdc8f481785a1fb134cd0fab810f8f38

Author: zhongwuzw

packages/normalize-color/__tests__/normalizeColor-test.js

@@ -85,6 +85,9 @@ it('handles rgb properly', () => {
   expect(normalizeColor('rgb(256, 256, 256)')).toBe(0xffffffff);
   expect(normalizeColor('rgb(0  0  0)')).toBe(0x000000ff);
   expect(normalizeColor('rgb(0 0 255)')).toBe(0x0000ffff);
+  expect(normalizeColor('rgb(0 0 0 / 0.5)')).toBe(0x00000080);
+  expect(normalizeColor('rgb(0 0 0 / 1)')).toBe(0x000000ff);
+  expect(normalizeColor('rgb(0, 0, 0, 0.5)')).toBe(0x00000080);
 });
 
 it('handles rgba properly', () => {
@@ -98,6 +101,7 @@ it('handles rgba properly', () => {
   expect(normalizeColor('rgba(0  0  0 / 0.0)')).toBe(0x00000000);
   expect(normalizeColor('rgba(0 0 0 / 1)')).toBe(0x000000ff);
   expect(normalizeColor('rgba(100 15 69 / 0.5)')).toBe(0x640f4580);
+  expect(normalizeColor('rgba(0, 0, 0)')).toBe(0x000000ff);
 });
 
 it('handles hsl properly', () => {

packages/normalize-color/index.js

@@ -37,34 +37,33 @@ function normalizeColor(color) {
     return colorFromKeyword;
   }
 
-  if ((match = matchers.rgb.exec(color))) {
-    return (
-      ((parse255(match[1]) << 24) | // r
-        (parse255(match[2]) << 16) | // g
-        (parse255(match[3]) << 8) | // b
-        0x000000ff) >>> // a
-      0
-    );
-  }
-
-  if ((match = matchers.rgba.exec(color))) {
-    // rgba(R G B / A) notation
-    if (match[6] !== undefined) {
+  if ((match = matchers.rgba.exec(color) || matchers.rgb.exec(color))) {
+    // rgb(R G B / A) / rgba(R G B / A) notation
+    if (match[9] !== undefined) {
       return (
-        ((parse255(match[6]) << 24) | // r
-          (parse255(match[7]) << 16) | // g
-          (parse255(match[8]) << 8) | // b
-          parse1(match[9])) >>> // a
+        ((parse255(match[9]) << 24) | // r
+          (parse255(match[10]) << 16) | // g
+          (parse255(match[11]) << 8) | // b
+          parse1(match[12])) >>> // a
         0
       );
     }
-
-    // rgba(R, G, B, A) notation
+    // rgb(R, G, B, A) / rgba(R, G, B, A) notation
+    else if (match[5] !== undefined) {
+      return (
+        ((parse255(match[5]) << 24) | // r
+          (parse255(match[6]) << 16) | // g
+          (parse255(match[7]) << 8) | // b
+          parse1(match[8])) >>> // a
+        0
+      );
+    }
+    // rgb(R, G, B) / rgba(R, G, B) notation
     return (
       ((parse255(match[2]) << 24) | // r
         (parse255(match[3]) << 16) | // g
         (parse255(match[4]) << 8) | // b
-        parse1(match[5])) >>> // a
+        0x000000ff) >>> // a
       0
     );
   }
@@ -238,15 +237,16 @@ let cachedMatchers;
 
 function getMatchers() {
   if (cachedMatchers === undefined) {
+    const rgbRegexPattern =
+      call(NUMBER, NUMBER, NUMBER) +
+      '|' +
+      commaSeparatedCall(NUMBER, NUMBER, NUMBER, NUMBER) +
+      '|' +
+      callWithSlashSeparator(NUMBER, NUMBER, NUMBER, NUMBER);
+
     cachedMatchers = {
-      rgb: new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER)),
-      rgba: new RegExp(
-        'rgba(' +
-          commaSeparatedCall(NUMBER, NUMBER, NUMBER, NUMBER) +
-          '|' +
-          callWithSlashSeparator(NUMBER, NUMBER, NUMBER, NUMBER) +
-          ')',
-      ),
+      rgb: new RegExp('rgb(' + rgbRegexPattern + ')'),
+      rgba: new RegExp('rgba(' + rgbRegexPattern + ')'),
       hsl: new RegExp('hsl' + call(NUMBER, PERCENTAGE, PERCENTAGE)),
       hsla: new RegExp(
         'hsla(' +