formatCss(): handle undefined hue for hsl() / hwb() / lch() serializa…

…tion
Evercoder · Aug 5, 2021 · f2795a5 · f2795a5
1 parent 7f9d27f
commit f2795a5
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 7 deletions.
diff --git a/docs/api.md b/docs/api.md
@@ -1041,10 +1041,7 @@ Defines a new color space through a _definition_ object. Here's the full definit
 		h: [0, 360]
 	},
 	parsers: [parseHsl],
-  serialize: c =>
-    `hsl(${c.h} ${c.s * 100}% ${c.l * 100}%${
-      c.alpha < 1 ? ` / ${c.alpha}` : ''
-    })`,
+  serialize: serializeHsl,
 	interpolate: {
 		h: {
 			use: interpolatorLinear,

diff --git a/src/hsl/definition.js b/src/hsl/definition.js
@@ -26,7 +26,7 @@ const definition = {
 
 	parsers: [parseHsl],
 	serialize: c =>
-		`hsl(${c.h} ${c.s * 100}% ${c.l * 100}%${
+		`hsl(${c.h || 0} ${c.s * 100}% ${c.l * 100}%${
 			c.alpha < 1 ? ` / ${c.alpha}` : ''
 		})`,
 

diff --git a/src/hwb/definition.js b/src/hwb/definition.js
@@ -26,7 +26,7 @@ const definition = {
 
 	parsers: [parseHwb],
 	serialize: c =>
-		`hwb(${c.h} ${c.w * 100}% ${c.b * 100}%${
+		`hwb(${c.h || 0} ${c.w * 100}% ${c.b * 100}%${
 			c.alpha < 1 ? ` / ${c.alpha}` : ''
 		})`,
 

diff --git a/src/lch/definition.js b/src/lch/definition.js
@@ -32,7 +32,7 @@ const definition = {
 
 	parsers: [parseLch],
 	serialize: c =>
-		`lch(${c.l}% ${c.c} ${c.h}${c.alpha < 1 ? ` / ${c.alpha}` : ''})`,
+		`lch(${c.l}% ${c.c} ${c.h || 0}${c.alpha < 1 ? ` / ${c.alpha}` : ''})`,
 
 	interpolate: {
 		h: { use: interpolatorLinear, fixup: fixupHueShorter },

diff --git a/test/hsl.test.js b/test/hsl.test.js
@@ -145,5 +145,6 @@ tape('formatCss', t => {
 	t.equal(formatCss('hsl(.5turn 40% 20% / 50%)'), 'hsl(180 40% 20% / 0.5)');
 	t.equal(formatCss('hsl(.5turn 40% 20%)'), 'hsl(180 40% 20%)');
 	t.equal(formatCss('hsl(.5turn 40% 20% / 100%)'), 'hsl(180 40% 20%)');
+	t.equal(formatCss(hsl('#ffffff00')), 'hsl(0 0% 100% / 0)');
 	t.end();
 });
diff --git a/test/hwb.test.js b/test/hwb.test.js
@@ -33,5 +33,6 @@ tape('formatCss', t => {
 	t.equal(formatCss('hwb(200 150% 150% / .5)'), 'hwb(200 50% 50% / 0.5)');
 	t.equal(formatCss('hwb(200 150% 150% / 100%)'), 'hwb(200 50% 50%)');
 	t.equal(formatCss('hwb(200 150% 150%)'), 'hwb(200 50% 50%)');
+	t.equal(formatCss(hwb('#ffffff00')), 'hwb(0 100% 0% / 0)');
 	t.end();
 });
diff --git a/test/lch.test.js b/test/lch.test.js
@@ -26,5 +26,6 @@ tape('formatCss', t => {
 	t.equal(formatCss('lch(40 10 30 / 50%)'), 'lch(40% 10 30 / 0.5)');
 	t.equal(formatCss('lch(40 10 30 / 100%)'), 'lch(40% 10 30)');
 	t.equal(formatCss('lch(40 10 30)'), 'lch(40% 10 30)');
+	t.equal(formatCss(lch('#ffffff00')), 'lch(100% 0 0 / 0)');
 	t.end();
 });