diff --git a/index.js b/index.js index 44e1e1f..f04ae8a 100644 --- a/index.js +++ b/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) diff --git a/test/basic.css b/test/basic.css index aa52e7f..bd0450f 100644 --- a/test/basic.css +++ b/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 { diff --git a/test/basic.preserve-true.expect.css b/test/basic.preserve-true.expect.css index 88b381d..3ef20b2 100644 --- a/test/basic.preserve-true.expect.css +++ b/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 {