fix: not round for hsl2rgb (#344)

* fix: not `round` for `hsl2rgb`

* chore: update

Author: zyyv

src/io/css/css2rgb.js

@@ -71,6 +71,9 @@ const css2rgb = (css) => {
         hsl[1] *= 0.01;
         hsl[2] *= 0.01;
         const rgb = hsl2rgb(hsl);
+        for (let i = 0; i < 3; i++) {
+            rgb[i] = round(rgb[i]);
+        }
         rgb[3] = 1;
         return rgb;
     }
@@ -81,6 +84,9 @@ const css2rgb = (css) => {
         hsl[1] *= 0.01;
         hsl[2] *= 0.01;
         const rgb = hsl2rgb(hsl);
+        for (let i = 0; i < 3; i++) {
+            rgb[i] = round(rgb[i]);
+        }
         rgb[3] = +m[4]; // default alpha = 1
         return rgb;
     }

src/io/hsl/hsl2rgb.js

@@ -1,5 +1,4 @@
 import { unpack } from '../../utils/index.js';
-const { round } = Math;
 
 const hsl2rgb = (...args) => {
     args = unpack(args, 'hsl');
@@ -24,7 +23,7 @@ const hsl2rgb = (...args) => {
             else if (3 * t3[i] < 2) c[i] = t1 + (t2 - t1) * (2 / 3 - t3[i]) * 6;
             else c[i] = t1;
         }
-        [r, g, b] = [round(c[0] * 255), round(c[1] * 255), round(c[2] * 255)];
+        [r, g, b] = [c[0] * 255, c[1] * 255, c[2] * 255];
     }
     if (args.length > 3) {
         // keep alpha channel

test/css2rgb.test.js

@@ -12,7 +12,7 @@ describe('Testing CSS2RGB color conversions', () => {
         'RGBA(255, 0, 0  , 0.5)': [255, 0, 0, 0.5],
         'RGBA (255, 0, 0  , 0.5)': undefined,
         'rgba(0%,100%,0%,.5)': [0, 255, 0, 0.5],
-        ' hsl(240,100%,50%) ': [0, 0, 255, 1],
+        'hsl(240,100%,50%) ': [0, 0, 255, 1],
         'hsl(60,100%,50%)': [255, 255, 0, 1],
         'hsla(180,100%,50%,1)': [0, 255, 255, 1],
         'hsla(300,100%,50%,.25)': [255, 0, 255, 0.25],

test/hsl2rgb.test.js

@@ -1,53 +1,3 @@
-// const vows = require('vows');
-// const assert = require('assert');
-// require('es6-shim');
-
-// import hsl2rgb from '../src/io/hsl/hsl2rgb.js';
-
-// vows.describe('Testing CMYK color conversions')
-//     .addBatch({
-//         'parse simple HSL colors': {
-//             topic: {
-//                 black: { in: [0, 0, 0], out: [0, 0, 0, 1] },
-//                 white: { in: [0, 0, 1], out: [255, 255, 255, 1] },
-//                 gray: { in: [0, 0, 0.5], out: [127.5, 127.5, 127.5, 1] },
-//                 red: { in: [0, 1, 0.5], out: [255, 0, 0, 1] },
-//                 yellow: { in: [60, 1, 0.5], out: [255, 255, 0, 1] },
-//                 green: { in: [120, 1, 0.5], out: [0, 255, 0, 1] },
-//                 cyan: { in: [180, 1, 0.5], out: [0, 255, 255, 1] },
-//                 blue: { in: [240, 1, 0.5], out: [0, 0, 255, 1] },
-//                 magenta: { in: [300, 1, 0.5], out: [255, 0, 255, 1] },
-//                 red_again: { in: [360, 1, 0.5], out: [255, 0, 0, 1] }
-//             },
-//             hsl_arr(topic) {
-//                 Object.keys(topic).forEach((key) => {
-//                     assert.deepEqual(
-//                         hsl2rgb(topic[key].in),
-//                         topic[key].out,
-//                         key
-//                     );
-//                 });
-//             },
-//             hsl_args(topic) {
-//                 Object.keys(topic).forEach((key) => {
-//                     assert.deepEqual(
-//                         hsl2rgb.apply(null, topic[key].in),
-//                         topic[key].out,
-//                         key
-//                     );
-//                 });
-//             },
-//             hsl_obj(topic) {
-//                 Object.keys(topic).forEach((key) => {
-//                     const [h, s, l] = topic[key].in;
-//                     assert.deepEqual(hsl2rgb({ h, s, l }), topic[key].out, key);
-//                 });
-//             }
-//         },
-//         'make sure that alpha is 1': {}
-//     })
-//     .export(module);
-
 import { describe, it, expect } from 'vitest';
 import hsl2rgb from '../src/io/hsl/hsl2rgb.js';
 
@@ -57,11 +7,11 @@ describe('Testing HSL to RGB color conversions', () => {
         { name: 'white', hsl: [0, 0, 1], rgb: [255, 255, 255, 1] },
         { name: 'gray', hsl: [0, 0, 0.5], rgb: [127.5, 127.5, 127.5, 1] },
         { name: 'red', hsl: [0, 1, 0.5], rgb: [255, 0, 0, 1] },
-        { name: 'yellow', hsl: [60, 1, 0.5], rgb: [255, 255, 0, 1] },
+        { name: 'yellow', hsl: [60, 1, 0.5], rgb: [254.99999999999994, 255, 0, 1] },
         { name: 'green', hsl: [120, 1, 0.5], rgb: [0, 255, 0, 1] },
-        { name: 'cyan', hsl: [180, 1, 0.5], rgb: [0, 255, 255, 1] },
+        { name: 'cyan', hsl: [180, 1, 0.5], rgb: [0, 254.99999999999994, 255, 1] },
         { name: 'blue', hsl: [240, 1, 0.5], rgb: [0, 0, 255, 1] },
-        { name: 'magenta', hsl: [300, 1, 0.5], rgb: [255, 0, 255, 1] },
+        { name: 'magenta', hsl: [300, 1, 0.5], rgb: [255, 0, 254.99999999999994, 1] },
         { name: 'red again', hsl: [360, 1, 0.5], rgb: [255, 0, 0, 1] }
     ];