fix(parsetorgb): fix rgba/hsla alpha precision

styled-components · Apr 6, 2022 · b928cdb · b928cdb
1 parent bee4d68
commit b928cdb
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 2 deletions.
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]?[0-9]?[%]?)\s*\)$/i
+const rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\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]?[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*([-+]?\d*[.]?\d+[%]?)\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
@@ -56,6 +56,21 @@ describe('parseToHsl', () => {
     })
   })
 
+  it('should parse a rgba color representation with a precise alpha', () => {
+    expect(parseToHsl('rgba(174,67,255,.12345)')).toEqual({
+      alpha: 0.12345,
+      hue: 274.1489361702128,
+      lightness: 0.6313725490196078,
+      saturation: 1,
+    })
+    expect(parseToHsl('rgba(174,67,255,12.345%)')).toEqual({
+      alpha: 0.12345,
+      hue: 274.1489361702128,
+      lightness: 0.6313725490196078,
+      saturation: 1,
+    })
+  })
+
   it('should parse a rgb color representation', () => {
     expect(parseToHsl('rgb(174,67,255)')).toEqual({
       hue: 274.1489361702128,
@@ -163,6 +178,21 @@ describe('parseToHsl', () => {
     })
   })
 
+  it('should parse a hsla color representation with a precise alpha', () => {
+    expect(parseToHsl('hsla(210,10%,40%,.12345)')).toEqual({
+      alpha: 0.12345,
+      hue: 209.99999999999997,
+      lightness: 0.4,
+      saturation: 0.09803921568627451,
+    })
+    expect(parseToHsl('hsla(210,10%,40%,12.345%)')).toEqual({
+      alpha: 0.12345,
+      hue: 209.99999999999997,
+      lightness: 0.4,
+      saturation: 0.09803921568627451,
+    })
+  })
+
   it('should parse a hsla 4 space-separated color representation', () => {
     expect(parseToHsl('hsla(210 10% 40% / 0.75)')).toEqual({
       alpha: 0.75,

diff --git a/src/color/test/parseToRgb.test.js b/src/color/test/parseToRgb.test.js
@@ -56,6 +56,21 @@ describe('parseToRgb', () => {
     })
   })
 
+  it('should parse a rgba color representation with a precise alpha', () => {
+    expect(parseToRgb('rgba(174,67,255,.12345)')).toEqual({
+      alpha: 0.12345,
+      blue: 255,
+      green: 67,
+      red: 174,
+    })
+    expect(parseToRgb('rgba(174,67,255,12.345%)')).toEqual({
+      alpha: 0.12345,
+      blue: 255,
+      green: 67,
+      red: 174,
+    })
+  })
+
   it('should parse a rgb color representation', () => {
     expect(parseToRgb('rgb(174,67,255)')).toEqual({
       blue: 255,
@@ -137,6 +152,21 @@ describe('parseToRgb', () => {
     })
   })
 
+  it('should parse a hsla color representation with a precise alpha', () => {
+    expect(parseToRgb('hsla(210,10%,40%,.12345)')).toEqual({
+      alpha: 0.12345,
+      blue: 112,
+      green: 102,
+      red: 92,
+    })
+    expect(parseToRgb('hsla(210,10%,40%,12.345%)')).toEqual({
+      alpha: 0.12345,
+      blue: 112,
+      green: 102,
+      red: 92,
+    })
+  })
+
   it('should throw an error if an invalid color string is provided', () => {
     expect(() => {
       parseToRgb('(174,67,255)')
@@ -153,6 +183,38 @@ describe('parseToRgb', () => {
     )
   })
 
+  it('should throw an error if an invalid rgba string is provided', () => {
+    const colors = [
+      'rgba(174,67,255,)',
+      'rgba(174,67,255,%)',
+      'rgba(174,67,255,.)',
+      'rgba(174,67,255,1.)',
+    ]
+    colors.forEach(color => {
+      expect(() => {
+        parseToRgb(color)
+      }).toThrow(
+        "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.",
+      )
+    })
+  })
+
+  it('should throw an error if an invalid hsla string is provided', () => {
+    const colors = [
+      'hsla(210,10%,40%,)',
+      'hsla(210,10%,40%,%)',
+      'hsla(210,10%,40%,.)',
+      'hsla(210,10%,40%,1.)',
+    ]
+    colors.forEach(color => {
+      expect(() => {
+        parseToRgb(color)
+      }).toThrow(
+        "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.",
+      )
+    })
+  })
+
   it('should throw an error if an invalid hsl string is provided', () => {
     expect(() => {
       parseToRgb('hsl(210,120%,4%)')