feat(core): support RGB alpha notation (#9699)

Functional notation: rgb[a](R G B[ / A])
CSS Colors Level 4 adds support for space-separated values in the functional notation.
See https://www.w3.org/TR/css-color-4/#rgb-functions

Co-authored-by: Nathan Walker <walkerrunpdx@gmail.com>

apps/automated/src/color/color-tests.ts

@@ -72,6 +72,24 @@ export var test_rgb_Color_CSS = function () {
 	TKUnit.assertEqual(color.argb, 0xffff6464, 'Color.argb not properly parsed');
 };
 
+export var test_rgb_Color_CSS_lvl4 = function () {
+	var alpha = 0.5;
+	var expected = 0x80;
+	// <snippet module="color" title="color">
+	// ### Creating a Color from four RGB values
+	// ``` JavaScript
+	// Creates the color with 255 red, 100 green, 100 blue
+	var color = new Color(`rgb(255 100 100 / ${alpha})`);
+	// ```
+	// </snippet>
+	TKUnit.assertEqual(color.a, expected, 'Color.a not properly parsed');
+	TKUnit.assertEqual(color.r, 255, 'Color.r not properly parsed');
+	TKUnit.assertEqual(color.g, 100, 'Color.g not properly parsed');
+	TKUnit.assertEqual(color.b, 100, 'Color.b not properly parsed');
+	TKUnit.assertEqual(color.hex, '#FF646480', 'Color.hex not properly parsed');
+	TKUnit.assertEqual(color.argb, 0x80ff6464, 'Color.argb not properly parsed');
+};
+
 export var test_rgba_Color_CSS = function () {
 	var alpha = 0.5;
 	var expected = 0x80;

apps/automated/src/ui/styling/style-properties-tests.ts

@@ -59,6 +59,10 @@ export function test_setting_borderColorRGB_property_from_CSS_is_applied_to_Styl
 	test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgb(255, 0, 0)');
 }
 
+export function test_setting_borderColorRGBLvl4_property_from_CSS_is_applied_to_Style() {
+	test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgb(255 0 0 / 1)');
+}
+
 export function test_setting_borderColorRGBA_property_from_CSS_is_applied_to_Style() {
 	test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgba(255,0,0,1)');
 }

packages/core/__tests__/css/parser.ts

@@ -44,6 +44,8 @@ describe('css', () => {
 				test(parseColor, '  #456789 ', { start: 0, end: 10, value: new Color(0xff456789) });
 				test(parseColor, '  #45678985 ', { start: 0, end: 12, value: new Color(0x45678985) });
 				test(parseColor, '  rgb(255, 8, 128) ', { start: 0, end: 18, value: new Color(0xffff0880) });
+				test(parseColor, '  rgb(255 8 128 / .5) ', { start: 0, end: 22, value: new Color(0x80ff0880) });
+				test(parseColor, '  rgb(255 8 128/0.5)', { start: 0, end: 20, value: new Color(0x80ff0880) });
 				test(parseColor, '  rgba(255, 8, 128, 0.5) ', { start: 0, end: 24, value: new Color(0x80ff0880) });
 				test(parseColor, '  hsl(330.9, 100%, 51.6%) ', { start: 0, end: 25, value: new Color(0xffff0880) });
 				test(parseColor, '  hsla(330.9, 100%, 51.6%, 0.5) ', { start: 0, end: 31, value: new Color(0x80ff0880) });

packages/core/__tests__/tsconfig.json

@@ -1,45 +1,23 @@
 {
-    "compilerOptions": {
+	"compilerOptions": {
-        "noEmitOnError": false,
+		"noEmitOnError": false,
-        "noEmitHelpers": true,
+		"noEmitHelpers": true,
-        "target": "es5",
+		"target": "es5",
-        "module": "commonjs",
+		"module": "commonjs",
-        "noImplicitUseStrict": true,
+		"noImplicitUseStrict": true,
-        "removeComments": true,
+		"removeComments": true,
-        "experimentalDecorators": true,
+		"experimentalDecorators": true,
-        "diagnostics": true,
+		"diagnostics": true,
-        "sourceMap": true,
+		"sourceMap": true,
-        "inlineSourceMap": false,
+		"inlineSourceMap": false,
-        "lib": [
+		"lib": ["es6", "dom"],
-            "es6",
+		"types": ["node", "chai", "mocha"],
-            "dom"
+		"baseUrl": ".",
-        ],
+		"paths": {
-        "types": [
+			"@nativescript/core": ["../index.ts"],
-            "node",
+			"@nativescript/core/*": ["../*"]
-            "chai",
+		}
-            "mocha"
+	},
-        ],
+	"include": ["../global-types.d.ts", "./**/*.ts"],
-        "baseUrl": ".",
+	"exclude": ["../**/*.android.ts", "../**/*.android.d.ts", "../**/*.ios.ts", "../**/*.ios.d.ts", "../node-modules", "../references.d.ts", "../platforms"]
-        "paths": {
+}
-            "@nativescript/core": [
-              "../index.ts"
-            ],
-            "@nativescript/core/*": [
-                "../*"
-            ],  
-        }
-    },
-    "include": [
-        "../global-types.d.ts",
-        "./**/*.ts"
-    ],
-    "exclude": [
-        "../**/*.android.ts",
-        "../**/*.android.d.ts",
-        "../**/*.ios.ts",
-        "../**/*.ios.d.ts",
-        "../node-modules",
-        "../references.d.ts",
-        "../platforms"
-    ]
-}

packages/core/color/color-common.ts

@@ -406,12 +406,14 @@ function isHsvOrHsva(value: string): boolean {
 }
 
 function parseColorWithAlpha(value: string): any {
+	const separator = value.indexOf(',') !== -1 ? ',' : ' ';
 	const parts = value
 		.replace(/(rgb|hsl|hsv)a?\(/, '')
 		.replace(')', '')
+		.replace(/\//, ' ')
 		.replace(/%/g, '')
-		.trim()
+		.split(separator)
-		.split(',');
+		.filter((part) => Boolean(part.length));
 
 	let f = 255;
 	let s = 255;

packages/core/css/parser.ts

@@ -135,7 +135,6 @@ export function parseColorKeyword(value, start: number, keyword = parseKeyword(v
 	const parseColor = keyword && getKnownColor(keyword.value);
 	if (parseColor != null) {
 		const end = keyword.end;
-		const value = parseColor;
 		return { start, end, value: new Color(parseColor) };
 	}
 	return null;