chore(parsergb): fix support for percentage based opacity

styled-components · Apr 4, 2022 · bee4d68 · bee4d68
1 parent 22b4305
commit bee4d68
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "polished",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "A lightweight toolset for writing styles in Javascript.",
   "license": "MIT",
   "author": "Brian Hough <hello@brianhough.co> (https://polished.js.org)",

diff --git a/src/color/parseToRgb.js b/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 = /^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 rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?[0-9]*[.]?[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 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]?[0-9]?[%]?)\s*\)$/i
 
 /**
  * Returns an RgbColor or RgbaColor object. This utility function is only useful
@@ -80,7 +80,10 @@ export default function parseToRgb(color: string): RgbColor | RgbaColor {
       red: parseInt(`${rgbaMatched[1]}`, 10),
       green: parseInt(`${rgbaMatched[2]}`, 10),
       blue: parseInt(`${rgbaMatched[3]}`, 10),
-      alpha: parseFloat(`${rgbaMatched[4]}`),
+      alpha:
+        parseFloat(`${rgbaMatched[4]}`) > 1
+          ? parseFloat(`${rgbaMatched[4]}`) / 100
+          : parseFloat(`${rgbaMatched[4]}`),
     }
   }
   const hslMatched = hslRegex.exec(normalizedColor)
@@ -113,7 +116,10 @@ export default function parseToRgb(color: string): RgbColor | RgbaColor {
       red: parseInt(`${hslRgbMatched[1]}`, 10),
       green: parseInt(`${hslRgbMatched[2]}`, 10),
       blue: parseInt(`${hslRgbMatched[3]}`, 10),
-      alpha: parseFloat(`${hslaMatched[4]}`),
+      alpha:
+        parseFloat(`${hslaMatched[4]}`) > 1
+          ? parseFloat(`${hslaMatched[4]}`) / 100
+          : parseFloat(`${hslaMatched[4]}`),
     }
   }
   throw new PolishedError(5)

diff --git a/src/color/test/parseToHsl.test.js b/src/color/test/parseToHsl.test.js
@@ -48,7 +48,7 @@ describe('parseToHsl', () => {
       lightness: 0.6313725490196078,
       saturation: 1,
     })
-    expect(parseToHsl('rgb(174 67 255 / 0.6)')).toEqual({
+    expect(parseToHsl('rgb(174 67 255 / 60%)')).toEqual({
       alpha: 0.6,
       hue: 274.1489361702128,
       lightness: 0.6313725490196078,
@@ -134,7 +134,7 @@ describe('parseToHsl', () => {
       lightness: 0.4,
       saturation: 0.09803921568627451,
     })
-    expect(parseToHsl('hsl(210deg 10% 40% / 0.75)')).toEqual({
+    expect(parseToHsl('hsl(210deg 10% 40% / 75%)')).toEqual({
       alpha: 0.75,
       hue: 209.99999999999997,
       lightness: 0.4,
@@ -155,7 +155,7 @@ describe('parseToHsl', () => {
       lightness: 0.4,
       saturation: 0.09803921568627451,
     })
-    expect(parseToHsl('hsl(210.99deg 10% 40% / 0.75)')).toEqual({
+    expect(parseToHsl('hsl(210.99deg 10% 40% / 75%)')).toEqual({
       alpha: 0.75,
       hue: 209.99999999999997,
       lightness: 0.4,
@@ -176,7 +176,7 @@ describe('parseToHsl', () => {
       lightness: 0.4,
       saturation: 0.09803921568627451,
     })
-    expect(parseToHsl('hsl(210deg 10% 40% / 0.75)')).toEqual({
+    expect(parseToHsl('hsl(210deg 10% 40% / 75%)')).toEqual({
       alpha: 0.75,
       hue: 209.99999999999997,
       lightness: 0.4,
@@ -197,7 +197,7 @@ describe('parseToHsl', () => {
       lightness: 0.4,
       saturation: 0.09803921568627451,
     })
-    expect(parseToHsl('hsl(210.99deg 10% 40% / 0.75)')).toEqual({
+    expect(parseToHsl('hsl(210.99deg 10% 40% / 75%)')).toEqual({
       alpha: 0.75,
       hue: 209.99999999999997,
       lightness: 0.4,

diff --git a/src/color/test/parseToRgb.test.js b/src/color/test/parseToRgb.test.js
@@ -48,7 +48,7 @@ describe('parseToRgb', () => {
       green: 67,
       red: 174,
     })
-    expect(parseToRgb('rgb(174 67 255 / 0.6)')).toEqual({
+    expect(parseToRgb('rgb(174 67 255 / 60%)')).toEqual({
       alpha: 0.6,
       blue: 255,
       green: 67,
@@ -108,7 +108,7 @@ describe('parseToRgb', () => {
       green: 102,
       red: 92,
     })
-    expect(parseToRgb('hsl(210 10% 40% / 0.75)')).toEqual({
+    expect(parseToRgb('hsl(210 10% 40% / 75%)')).toEqual({
       alpha: 0.75,
       blue: 112,
       green: 102,
@@ -129,7 +129,7 @@ describe('parseToRgb', () => {
       green: 0,
       red: 0,
     })
-    expect(parseToRgb('hsl(210 0.5% 0.5% / 1.0)')).toEqual({
+    expect(parseToRgb('hsl(210 0.5% 0.5% / 100%)')).toEqual({
       alpha: 1,
       blue: 0,
       green: 0,