feat(core): support RGB alpha notation

lekhmanrus · lekhmanrus · commit 5ab0e773143c · 2021-12-14T15:44:06.000-07:00
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
diff --git a/apps/automated/src/color/color-tests.ts b/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;
diff --git a/apps/automated/src/ui/styling/style-properties-tests.ts b/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)');
 }
diff --git a/packages/core/__tests__/css/parser.ts b/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: 24, value: new Color(0x80ff0880) });
+				test(parseColor, '  rgb(255 8 128/0.5) ', { start: 0, end: 24, 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) });
diff --git a/packages/core/color/color-common.ts b/packages/core/color/color-common.ts
@@ -406,12 +406,15 @@ 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(',');
+		.split(separator)
+		.filter((part) => Boolean(part.length));
 
 	let f = 255;
 	let s = 255;
diff --git a/packages/core/css/parser.ts b/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;

Original file line number	Diff line number	Diff line change
`@@ -59,6 +59,10 @@ export function test_setting_borderColorRGB_property_from_CSS_is_applied_to_Styl`
`59`	`59`	`test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgb(255, 0, 0)');`
`60`	`60`	`}`
`61`	`61`
	`62`	`+export function test_setting_borderColorRGBLvl4_property_from_CSS_is_applied_to_Style() {`
	`63`	`+ test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgb(255 0 0 / 1)');`
	`64`	`+}`
	`65`	`+`
`62`	`66`	`export function test_setting_borderColorRGBA_property_from_CSS_is_applied_to_Style() {`
`63`	`67`	`test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgba(255,0,0,1)');`
`64`	`68`	`}`
Original file line number	Diff line number	Diff line change
`@@ -135,7 +135,6 @@ export function parseColorKeyword(value, start: number, keyword = parseKeyword(v`
`135`	`135`	`const parseColor = keyword && getKnownColor(keyword.value);`
`136`	`136`	`if (parseColor != null) {`
`137`	`137`	`const end = keyword.end;`
`138`		`- const value = parseColor;`
`139`	`138`	`return { start, end, value: new Color(parseColor) };`
`140`	`139`	`}`
`141`	`140`	`return null;`