Skip to content
This repository was archived by the owner on Dec 21, 2021. It is now read-only.

Percentage syntax #3

Merged
merged 3 commits into from
Apr 10, 2020
Merged

Percentage syntax #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
058b2cf
updated tests to a failing state for #2
argyleink Apr 9, 2020
9703ee1
updates lab and lch matchers
argyleink Apr 9, 2020
a3b3df1
strip unit from first value so it's not passed on
argyleink Apr 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]);

Expand Down Expand Up @@ -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)
Expand Down
24 changes: 12 additions & 12 deletions test/basic.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
24 changes: 12 additions & 12 deletions test/basic.preserve-true.expect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down