Use percentage syntax (csstools#3)

Author: argyleink

index.js

@@ -60,6 +60,7 @@ export default postcss.plugin('postcss-lab-function', opts => {
 							)
 
 							children[0].value = String(rgbValues[0]);
+							children[0].unit = '';
 							children[1].value = String(rgbValues[1]);
 							children[2].value = String(rgbValues[2]);
 
@@ -135,8 +136,8 @@ const isHue = node => isCalc(node) || node.type === 'number' && hueUnitMatch.tes
 const isNumber = node => isCalc(node) || node.type === 'number' && node.unit === '';
 const isPercentage = node => isCalc(node) || node.type === 'number' && node.unit === '%';
 const isSlash = node => node.type === 'operator' && node.value === '/';
-const functionalLABMatch = [isNumber, isNumber, isNumber, isSlash, isAlphaValue];
-const functionalLCHMatch = [isNumber, isNumber, isHue, isSlash, isAlphaValue];
+const functionalLABMatch = [isPercentage, isNumber, isNumber, isSlash, isAlphaValue];
+const functionalLCHMatch = [isPercentage, isNumber, isHue, isSlash, isAlphaValue];
 const functionalGrayMatch = [isNumber, isSlash, isAlphaValue];
 const matchFunctionalLAB = children => children.every(
 	(child, index) => typeof functionalLABMatch[index] === 'function' && functionalLABMatch[index](child)

test/basic.css

@@ -1,19 +1,19 @@
 .test-lab {
-	color: lab(40 56.6 39);
-	color: lab(40 56.6 39 / 1);
-	color: lab(40 56.6 39 / .5);
-	color: lab(40 56.6 39 / 100%);
-	color: lab(40 56.6 39 / 50%);
-	color: lab(100 50 0);
+	color: lab(40% 56.6 39);
+	color: lab(40% 56.6 39 / 1);
+	color: lab(40% 56.6 39 / .5);
+	color: lab(40% 56.6 39 / 100%);
+	color: lab(40% 56.6 39 / 50%);
+	color: lab(100% 50 0);
 }
 
 .test-lch {
-	color: lch(40 68.8 34.5);
-	color: lch(40 68.8 34.5 / 1);
-	color: lch(40 68.8 34.5 / .5);
-	color: lch(40 68.8 34.5 / 100%);
-	color: lch(40 68.8 34.5 / 50%);
-	color: lch(100 50 0);
+	color: lch(40% 68.8 34.5);
+	color: lch(40% 68.8 34.5 / 1);
+	color: lch(40% 68.8 34.5 / .5);
+	color: lch(40% 68.8 34.5 / 100%);
+	color: lch(40% 68.8 34.5 / 50%);
+	color: lch(100% 50 0);
 }
 
 .test-gray {

test/basic.preserve-true.expect.css

@@ -1,31 +1,31 @@
 .test-lab {
 	color: rgb(178, 34, 34);
-	color: lab(40 56.6 39);
+	color: lab(40% 56.6 39);
 	color: rgb(178, 34, 34);
-	color: lab(40 56.6 39 / 1);
+	color: lab(40% 56.6 39 / 1);
 	color: rgba(178, 34, 34, .5);
-	color: lab(40 56.6 39 / .5);
+	color: lab(40% 56.6 39 / .5);
 	color: rgb(178, 34, 34);
-	color: lab(40 56.6 39 / 100%);
+	color: lab(40% 56.6 39 / 100%);
 	color: rgba(178, 34, 34, 0.5);
-	color: lab(40 56.6 39 / 50%);
+	color: lab(40% 56.6 39 / 50%);
 	color: rgb(255, 216, 255);
-	color: lab(100 50 0);
+	color: lab(100% 50 0);
 }
 
 .test-lch {
 	color: rgb(178, 34, 34);
-	color: lch(40 68.8 34.5);
+	color: lch(40% 68.8 34.5);
 	color: rgb(178, 34, 34);
-	color: lch(40 68.8 34.5 / 1);
+	color: lch(40% 68.8 34.5 / 1);
 	color: rgba(178, 34, 34, .5);
-	color: lch(40 68.8 34.5 / .5);
+	color: lch(40% 68.8 34.5 / .5);
 	color: rgb(178, 34, 34);
-	color: lch(40 68.8 34.5 / 100%);
+	color: lch(40% 68.8 34.5 / 100%);
 	color: rgba(178, 34, 34, 0.5);
-	color: lch(40 68.8 34.5 / 50%);
+	color: lch(40% 68.8 34.5 / 50%);
 	color: rgb(255, 216, 255);
-	color: lch(100 50 0);
+	color: lch(100% 50 0);
 }
 
 .test-gray {