From 22b4305c2a3cd1f60f2ed52a8d18b88ff4b08c7d Mon Sep 17 00:00:00 2001
From: Brian Hough <brian.r.hough@gmail.com>
Date: Sat, 2 Apr 2022 22:48:15 -0400
Subject: [PATCH] chore(hsl/rgb): update space-separated color tests

---
 src/color/parseToRgb.js           |  8 ++---
 src/color/test/parseToHsl.test.js | 49 ++++++++++++++++++++++++++++---
 src/color/test/parseToRgb.test.js | 35 +++++++++++++++++++---
 3 files changed, 80 insertions(+), 12 deletions(-)

diff --git a/src/color/parseToRgb.js b/src/color/parseToRgb.js
index 3bad77a1..17b55bec 100644
--- a/src/color/parseToRgb.js
+++ b/src/color/parseToRgb.js
@@ -9,10 +9,10 @@ const hexRegex = /^#[a-fA-F0-9]{6}$/
 const hexRgbaRegex = /^#[a-fA-F0-9]{8}$/
 const reducedHexRegex = /^#[a-fA-F0-9]{3}$/
 const reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/
-const rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i
-const rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i
-const hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*[,]?\s*(\d{1,3}[.]?[0-9]?)%\s*[,]?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i
-const hslaRegex = /^hsl(?:a)\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*[,]?\s*(\d{1,3}[.]?[0-9]?)%\s*[,]?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i
+const rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i
+const rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i
+const hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i
+const hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*[,]?\s*(\d{1,3}[.]?[0-9]?)%\s*[,]?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i
 
 /**
  * Returns an RgbColor or RgbaColor object. This utility function is only useful
diff --git a/src/color/test/parseToHsl.test.js b/src/color/test/parseToHsl.test.js
index cf258408..9bd171be 100644
--- a/src/color/test/parseToHsl.test.js
+++ b/src/color/test/parseToHsl.test.js
@@ -42,6 +42,18 @@ describe('parseToHsl', () => {
       lightness: 0.6313725490196078,
       saturation: 1,
     })
+    expect(parseToHsl('rgba(174 67 255 / 0.6)')).toEqual({
+      alpha: 0.6,
+      hue: 274.1489361702128,
+      lightness: 0.6313725490196078,
+      saturation: 1,
+    })
+    expect(parseToHsl('rgb(174 67 255 / 0.6)')).toEqual({
+      alpha: 0.6,
+      hue: 274.1489361702128,
+      lightness: 0.6313725490196078,
+      saturation: 1,
+    })
   })
 
   it('should parse a rgb color representation', () => {
@@ -50,6 +62,11 @@ describe('parseToHsl', () => {
       lightness: 0.6313725490196078,
       saturation: 1,
     })
+    expect(parseToHsl('rgb(174 67 255)')).toEqual({
+      hue: 274.1489361702128,
+      lightness: 0.6313725490196078,
+      saturation: 1,
+    })
   })
 
   it('should parse a hsl color representation', () => {
@@ -58,7 +75,7 @@ describe('parseToHsl', () => {
       lightness: 0.0392156862745098,
       saturation: 0.1,
     })
-    expect(parseToHsl('hsl(210deg,10%,4%)')).toEqual({
+    expect(parseToHsl('hsl(210deg 10% 4%)')).toEqual({
       hue: 210,
       lightness: 0.0392156862745098,
       saturation: 0.1,
@@ -71,7 +88,7 @@ describe('parseToHsl', () => {
       lightness: 0.0392156862745098,
       saturation: 0.1,
     })
-    expect(parseToHsl('hsl(210.99deg,10%,4%)')).toEqual({
+    expect(parseToHsl('hsl(210.99deg 10% 4%)')).toEqual({
       hue: 210,
       lightness: 0.0392156862745098,
       saturation: 0.1,
@@ -111,7 +128,13 @@ describe('parseToHsl', () => {
       lightness: 0.4,
       saturation: 0.09803921568627451,
     })
-    expect(parseToHsl('hsla(210deg,10%,40%,0.75)')).toEqual({
+    expect(parseToHsl('hsla(210deg 10% 40% / 0.75)')).toEqual({
+      alpha: 0.75,
+      hue: 209.99999999999997,
+      lightness: 0.4,
+      saturation: 0.09803921568627451,
+    })
+    expect(parseToHsl('hsl(210deg 10% 40% / 0.75)')).toEqual({
       alpha: 0.75,
       hue: 209.99999999999997,
       lightness: 0.4,
@@ -126,7 +149,13 @@ describe('parseToHsl', () => {
       lightness: 0.4,
       saturation: 0.09803921568627451,
     })
-    expect(parseToHsl('hsla(210.99deg,10%,40%,0.75)')).toEqual({
+    expect(parseToHsl('hsla(210.99deg 10% 40% / 0.75)')).toEqual({
+      alpha: 0.75,
+      hue: 209.99999999999997,
+      lightness: 0.4,
+      saturation: 0.09803921568627451,
+    })
+    expect(parseToHsl('hsl(210.99deg 10% 40% / 0.75)')).toEqual({
       alpha: 0.75,
       hue: 209.99999999999997,
       lightness: 0.4,
@@ -147,6 +176,12 @@ describe('parseToHsl', () => {
       lightness: 0.4,
       saturation: 0.09803921568627451,
     })
+    expect(parseToHsl('hsl(210deg 10% 40% / 0.75)')).toEqual({
+      alpha: 0.75,
+      hue: 209.99999999999997,
+      lightness: 0.4,
+      saturation: 0.09803921568627451,
+    })
   })
 
   it('should parse a hsla 4 space-separated color representation with a float', () => {
@@ -162,6 +197,12 @@ describe('parseToHsl', () => {
       lightness: 0.4,
       saturation: 0.09803921568627451,
     })
+    expect(parseToHsl('hsl(210.99deg 10% 40% / 0.75)')).toEqual({
+      alpha: 0.75,
+      hue: 209.99999999999997,
+      lightness: 0.4,
+      saturation: 0.09803921568627451,
+    })
   })
 
   it('should throw an error if an invalid color string is provided', () => {
diff --git a/src/color/test/parseToRgb.test.js b/src/color/test/parseToRgb.test.js
index fe8b2879..4fc59763 100644
--- a/src/color/test/parseToRgb.test.js
+++ b/src/color/test/parseToRgb.test.js
@@ -42,13 +42,13 @@ describe('parseToRgb', () => {
       green: 67,
       red: 174,
     })
-    expect(parseToRgb('rgba(174, 67, 255 / 0.6)')).toEqual({
+    expect(parseToRgb('rgba(174 67 255 / 0.6)')).toEqual({
       alpha: 0.6,
       blue: 255,
       green: 67,
       red: 174,
     })
-    expect(parseToRgb('rgb(174,67,255 / 0.6)')).toEqual({
+    expect(parseToRgb('rgb(174 67 255 / 0.6)')).toEqual({
       alpha: 0.6,
       blue: 255,
       green: 67,
@@ -62,6 +62,11 @@ describe('parseToRgb', () => {
       green: 67,
       red: 174,
     })
+    expect(parseToRgb('rgb(174 67 255)')).toEqual({
+      blue: 255,
+      green: 67,
+      red: 174,
+    })
   })
 
   it('should parse a hsl color representation', () => {
@@ -70,6 +75,11 @@ describe('parseToRgb', () => {
       green: 10,
       red: 9,
     })
+    expect(parseToRgb('hsl(210 10% 4%)')).toEqual({
+      blue: 11,
+      green: 10,
+      red: 9,
+    })
   })
 
   it('should parse a hsl color representation with decimal values', () => {
@@ -78,6 +88,11 @@ describe('parseToRgb', () => {
       green: 33,
       red: 28,
     })
+    expect(parseToRgb('hsl(210 16.4% 13.2%)')).toEqual({
+      blue: 38,
+      green: 33,
+      red: 28,
+    })
   })
 
   it('should parse a hsla color representation', () => {
@@ -87,7 +102,13 @@ describe('parseToRgb', () => {
       green: 102,
       red: 92,
     })
-    expect(parseToRgb('hsla(210, 10%, 40% / 0.75)')).toEqual({
+    expect(parseToRgb('hsla(210 10% 40% / 0.75)')).toEqual({
+      alpha: 0.75,
+      blue: 112,
+      green: 102,
+      red: 92,
+    })
+    expect(parseToRgb('hsl(210 10% 40% / 0.75)')).toEqual({
       alpha: 0.75,
       blue: 112,
       green: 102,
@@ -102,7 +123,13 @@ describe('parseToRgb', () => {
       green: 0,
       red: 0,
     })
-    expect(parseToRgb('hsla(210, 0.5%, 0.5% / 1.0)')).toEqual({
+    expect(parseToRgb('hsla(210 0.5% 0.5% / 1.0)')).toEqual({
+      alpha: 1,
+      blue: 0,
+      green: 0,
+      red: 0,
+    })
+    expect(parseToRgb('hsl(210 0.5% 0.5% / 1.0)')).toEqual({
       alpha: 1,
       blue: 0,
       green: 0,