fix: hsla parsing with an alpha value of 0 (#464)

* fix: hsla parsing with an alpha value of 0

* test: add test explictly for hsla with zero alpha

Co-authored-by: Rico Kahler <[email protected]>

src/parseToRgba.test.ts

@@ -328,6 +328,26 @@ describe('parseToRgb', () => {
     `);
   });
 
+  it('parses should parse an hsla color with an alpha value of zero', () => {
+    expect(parseToRgba('hsla(210,0.5%,0.5%,0)')).toMatchInlineSnapshot(`
+      [
+        1,
+        1,
+        1,
+        0,
+      ]
+    `);
+    expect(parseToRgba('hsla( 210 , 0.5% , 0.5% , 0.01 )'))
+      .toMatchInlineSnapshot(`
+      [
+        1,
+        1,
+        1,
+        0.01,
+      ]
+    `);
+  });
+
   it('throws an error if an invalid color string is provided', () => {
     expect(() => {
       parseToRgba('(174,67,255)');

src/parseToRgba.ts

@@ -45,7 +45,12 @@ function parseToRgba(color: string): [number, number, number, number] {
     const [h, s, l, a] = Array.from(hslaMatch).slice(1).map(parseFloat);
     if (guard(0, 100, s) !== s) throw new ColorError(color);
     if (guard(0, 100, l) !== l) throw new ColorError(color);
-    return [...hslToRgb(h, s, l), a || 1] as [number, number, number, number];
+    return [...hslToRgb(h, s, l), Number.isNaN(a) ? 1 : a] as [
+      number,
+      number,
+      number,
+      number
+    ];
   }
 
   throw new ColorError(color);
@@ -67,22 +72,23 @@ function hash(str: string) {
 
 const colorToInt = (x: string) => parseInt(x.replace(/_/g, ''), 36);
 
-const compressedColorMap = '1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm'
-  .split(' ')
-  .reduce((acc, next) => {
-    const key = colorToInt(next.substring(0, 3));
-    const hex = colorToInt(next.substring(3)).toString(16);
+const compressedColorMap =
+  '1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm'
+    .split(' ')
+    .reduce((acc, next) => {
+      const key = colorToInt(next.substring(0, 3));
+      const hex = colorToInt(next.substring(3)).toString(16);
 
-    // NOTE: padStart could be used here but it breaks Node 6 compat
-    // https://github.com/ricokahler/color2k/issues/351
-    let prefix = '';
-    for (let i = 0; i < 6 - hex.length; i++) {
-      prefix += '0';
-    }
+      // NOTE: padStart could be used here but it breaks Node 6 compat
+      // https://github.com/ricokahler/color2k/issues/351
+      let prefix = '';
+      for (let i = 0; i < 6 - hex.length; i++) {
+        prefix += '0';
+      }
 
-    acc[key] = `${prefix}${hex}`;
-    return acc;
-  }, {} as { [key: string]: string });
+      acc[key] = `${prefix}${hex}`;
+      return acc;
+    }, {} as { [key: string]: string });
 
 /**
  * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
@@ -108,7 +114,8 @@ const rgbaRegex = new RegExp(
   )}(?:,\\s*([\\d.]+))?\\s*\\)$`,
   'i'
 );
-const hslaRegex = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;
+const hslaRegex =
+  /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;
 const namedColorRegex = /^[a-z]+$/i;
 
 const roundColor = (color: number): number => {

src/toHex.test.ts

@@ -25,3 +25,7 @@ test('https://github.com/ricokahler/color2k/issues/235', () => {
 
   expect(toHex('#03dac5')).toMatchInlineSnapshot(`"#03dac5"`);
 });
+
+test('https://github.com/ricokahler/color2k/issues/463', () => {
+  expect(toHex('hsla(15, 50%, 50%, 0)')).toMatchInlineSnapshot(`"#bf604000"`);
+});