From 999a2b2f505fc1e0437def9437188cd72feebeb2 Mon Sep 17 00:00:00 2001
From: Gregor Aisch <gka@users.noreply.github.com>
Date: Sun, 8 Sep 2024 09:27:12 +0200
Subject: [PATCH] fix: css output for hue-less colors in lch() and oklch()

resolves https://github.com/gka/chroma.js/issues/357
---
 src/io/css/lch2css.js   |  2 +-
 src/io/css/oklch2css.js | 20 ++++++++++----------
 test/io/rgb2css.test.js | 23 ++++++++++++++++++++++-
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/io/css/lch2css.js b/src/io/css/lch2css.js
index 1bc52e25..6822a7c9 100644
--- a/src/io/css/lch2css.js
+++ b/src/io/css/lch2css.js
@@ -12,7 +12,7 @@ const lch2css = (...args) => {
     let mode = last(args) || 'lab';
     lcha[0] = rnd2(lcha[0]) + '%';
     lcha[1] = rnd2(lcha[1]);
-    lcha[2] = rnd2(lcha[2]) + 'deg'; // add deg unit to hue
+    lcha[2] = isNaN(lcha[2]) ? 'none' : rnd2(lcha[2]) + 'deg'; // add deg unit to hue
     if (mode === 'lcha' || (lcha.length > 3 && lcha[3] < 1)) {
         lcha[3] = '/ ' + (lcha.length > 3 ? lcha[3] : 1);
     } else {
diff --git a/src/io/css/oklch2css.js b/src/io/css/oklch2css.js
index a1ed7a23..ebad6a28 100644
--- a/src/io/css/oklch2css.js
+++ b/src/io/css/oklch2css.js
@@ -1,16 +1,16 @@
 import { unpack, rnd2, rnd3 } from '../../utils/index.js';
 
-const oklab2css = (...args) => {
-    const laba = unpack(args, 'lab');
-    laba[0] = rnd2(laba[0] * 100) + '%';
-    laba[1] = rnd3(laba[1]);
-    laba[2] = rnd2(laba[2]) + 'deg';
-    if (laba.length > 3 && laba[3] < 1) {
-        laba[3] = '/ ' + (laba.length > 3 ? laba[3] : 1);
+const oklch2css = (...args) => {
+    const lcha = unpack(args, 'lch');
+    lcha[0] = rnd2(lcha[0] * 100) + '%';
+    lcha[1] = rnd3(lcha[1]);
+    lcha[2] = isNaN(lcha[2]) ? 'none' : rnd2(lcha[2]) + 'deg'; // add deg unit to hue
+    if (lcha.length > 3 && lcha[3] < 1) {
+        lcha[3] = '/ ' + (lcha.length > 3 ? lcha[3] : 1);
     } else {
-        laba.length = 3;
+        lcha.length = 3;
     }
-    return `oklch(${laba.join(' ')})`;
+    return `oklch(${lcha.join(' ')})`;
 };
 
-export default oklab2css;
+export default oklch2css;
diff --git a/test/io/rgb2css.test.js b/test/io/rgb2css.test.js
index 64b36bd2..96f48521 100644
--- a/test/io/rgb2css.test.js
+++ b/test/io/rgb2css.test.js
@@ -48,7 +48,28 @@ const tests = {
         rgb: [212, 248, 128, 0.6],
         mode: 'oklch',
         css: 'oklch(92.83% 0.15 123.12deg / 0.6)'
-    }
+    },
+    white_rgb: { rgb: [255, 255, 255], css: 'rgb(255 255 255)' },
+    white_lab: { rgb: [255, 255, 255], mode: 'lab', css: 'lab(100% 0 0)' },
+    white_lch: { rgb: [255, 255, 255], mode: 'lch', css: 'lch(100% 0 none)' },
+    gray_lch: { rgb: [120, 120, 120], mode: 'lch', css: 'lch(50.43% 0 none)' },
+    black_lch: { rgb: [0, 0, 0], mode: 'lch', css: 'lch(0% 0 none)' },
+    white_oklab: {
+        rgb: [255, 255, 255],
+        mode: 'oklab',
+        css: 'oklab(100% 0 0)'
+    },
+    white_oklch: {
+        rgb: [255, 255, 255],
+        mode: 'oklch',
+        css: 'oklch(100% 0 none)'
+    },
+    gray_oklch: {
+        rgb: [120, 120, 120],
+        mode: 'oklch',
+        css: 'oklch(57.27% 0 none)'
+    },
+    black_oklch: { rgb: [0, 0, 0], mode: 'oklch', css: 'oklch(0% 0 none)' }
 };
 
 describe('Testing rgb2css color conversions', () => {