fix(parsetorgb): add 4 space-separated CSS color value support to parsetoRGB

Author: bhough

package.json

@@ -1,6 +1,6 @@
 {
   "name": "polished",
-  "version": "4.1.5",
+  "version": "4.2.0",
   "description": "A lightweight toolset for writing styles in Javascript.",
   "license": "MIT",
   "author": "Brian Hough <[email protected]> (https://polished.js.org)",
@@ -93,7 +93,7 @@
     "jest": "^27.5.1",
     "lint-staged": "^12.3.7",
     "npm-watch": "^0.11.0",
-    "prettier": "^2.6.1",
+    "prettier": "^2.6.2",
     "pushstate-server": "^3.1.0",
     "ramda": "^0.28.0",
     "rollup": "^2.70.1",

src/color/parseToRgb.js

@@ -10,9 +10,9 @@ 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 = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\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 = /^hsla\(\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 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
@@ -85,7 +85,6 @@ export default function parseToRgb(color: string): RgbColor | RgbaColor {
   }
   const hslMatched = hslRegex.exec(normalizedColor)
   if (hslMatched) {
-    console.log(hslMatched)
     const hue = parseInt(`${hslMatched[1]}`, 10)
     const saturation = parseInt(`${hslMatched[2]}`, 10) / 100
     const lightness = parseInt(`${hslMatched[3]}`, 10) / 100

src/color/test/parseToRgb.test.js

@@ -42,21 +42,22 @@ 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,
     })
-  })
-
-  it('should parse a rgb color representation', () => {
-    expect(parseToRgb('rgb(174,67,255)')).toEqual({
+    expect(parseToRgb('rgb(174,67,255 / 0.6)')).toEqual({
+      alpha: 0.6,
       blue: 255,
       green: 67,
       red: 174,
     })
-    expect(parseToRgb('rgb( 174 , 67 , 255 )')).toEqual({
+  })
+
+  it('should parse a rgb color representation', () => {
+    expect(parseToRgb('rgb(174,67,255)')).toEqual({
       blue: 255,
       green: 67,
       red: 174,
@@ -69,11 +70,6 @@ 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', () => {
@@ -82,11 +78,6 @@ 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', () => {
@@ -96,7 +87,7 @@ 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,
@@ -111,7 +102,7 @@ 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,

yarn.lock

@@ -9607,10 +9607,10 @@ prettier@^1.5.2:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
   integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
-prettier@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.1.tgz#d472797e0d7461605c1609808e27b80c0f9cfe17"
-  integrity sha512-8UVbTBYGwN37Bs9LERmxCPjdvPxlEowx2urIL6urHzdb3SDq4B/Z6xLFCblrSnE4iKWcS6ziJ3aOYrc1kz/E2A==
+prettier@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"
+  integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==
 
 pretty-format@^27.5.1:
   version "27.5.1"