From 058b2cf0641b5720f403b016986dca0c5dc108b9 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Wed, 8 Apr 2020 23:35:04 -0700 Subject: [PATCH 1/3] updated tests to a failing state for #2 --- test/basic.css | 24 ++++++++++++------------ test/basic.preserve-true.expect.css | 24 ++++++++++++------------ 2 files changed, 24 insertions(+), 24 deletions(-) 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 { From 9703ee1791569d9e22b0b20d1ef6a0333d921125 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Wed, 8 Apr 2020 23:35:43 -0700 Subject: [PATCH 2/3] updates lab and lch matchers --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 44e1e1f..930b80f 100644 --- a/index.js +++ b/index.js @@ -135,8 +135,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) From a3b3df17bc8c8305b91449a792e2fb8ddbc841fd Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Thu, 9 Apr 2020 20:57:53 -0700 Subject: [PATCH 3/3] strip unit from first value so it's not passed on --- index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/index.js b/index.js index 930b80f..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]);