Skip to content

Commit 8ef420d

Browse files
authored
Use percentage syntax (csstools#3)
1 parent 325c378 commit 8ef420d

File tree

3 files changed

+27
-26
lines changed

3 files changed

+27
-26
lines changed

index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ export default postcss.plugin('postcss-lab-function', opts => {
6060
)
6161

6262
children[0].value = String(rgbValues[0]);
63+
children[0].unit = '';
6364
children[1].value = String(rgbValues[1]);
6465
children[2].value = String(rgbValues[2]);
6566

@@ -135,8 +136,8 @@ const isHue = node => isCalc(node) || node.type === 'number' && hueUnitMatch.tes
135136
const isNumber = node => isCalc(node) || node.type === 'number' && node.unit === '';
136137
const isPercentage = node => isCalc(node) || node.type === 'number' && node.unit === '%';
137138
const isSlash = node => node.type === 'operator' && node.value === '/';
138-
const functionalLABMatch = [isNumber, isNumber, isNumber, isSlash, isAlphaValue];
139-
const functionalLCHMatch = [isNumber, isNumber, isHue, isSlash, isAlphaValue];
139+
const functionalLABMatch = [isPercentage, isNumber, isNumber, isSlash, isAlphaValue];
140+
const functionalLCHMatch = [isPercentage, isNumber, isHue, isSlash, isAlphaValue];
140141
const functionalGrayMatch = [isNumber, isSlash, isAlphaValue];
141142
const matchFunctionalLAB = children => children.every(
142143
(child, index) => typeof functionalLABMatch[index] === 'function' && functionalLABMatch[index](child)

test/basic.css

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
.test-lab {
2-
color: lab(40 56.6 39);
3-
color: lab(40 56.6 39 / 1);
4-
color: lab(40 56.6 39 / .5);
5-
color: lab(40 56.6 39 / 100%);
6-
color: lab(40 56.6 39 / 50%);
7-
color: lab(100 50 0);
2+
color: lab(40% 56.6 39);
3+
color: lab(40% 56.6 39 / 1);
4+
color: lab(40% 56.6 39 / .5);
5+
color: lab(40% 56.6 39 / 100%);
6+
color: lab(40% 56.6 39 / 50%);
7+
color: lab(100% 50 0);
88
}
99

1010
.test-lch {
11-
color: lch(40 68.8 34.5);
12-
color: lch(40 68.8 34.5 / 1);
13-
color: lch(40 68.8 34.5 / .5);
14-
color: lch(40 68.8 34.5 / 100%);
15-
color: lch(40 68.8 34.5 / 50%);
16-
color: lch(100 50 0);
11+
color: lch(40% 68.8 34.5);
12+
color: lch(40% 68.8 34.5 / 1);
13+
color: lch(40% 68.8 34.5 / .5);
14+
color: lch(40% 68.8 34.5 / 100%);
15+
color: lch(40% 68.8 34.5 / 50%);
16+
color: lch(100% 50 0);
1717
}
1818

1919
.test-gray {

test/basic.preserve-true.expect.css

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
11
.test-lab {
22
color: rgb(178, 34, 34);
3-
color: lab(40 56.6 39);
3+
color: lab(40% 56.6 39);
44
color: rgb(178, 34, 34);
5-
color: lab(40 56.6 39 / 1);
5+
color: lab(40% 56.6 39 / 1);
66
color: rgba(178, 34, 34, .5);
7-
color: lab(40 56.6 39 / .5);
7+
color: lab(40% 56.6 39 / .5);
88
color: rgb(178, 34, 34);
9-
color: lab(40 56.6 39 / 100%);
9+
color: lab(40% 56.6 39 / 100%);
1010
color: rgba(178, 34, 34, 0.5);
11-
color: lab(40 56.6 39 / 50%);
11+
color: lab(40% 56.6 39 / 50%);
1212
color: rgb(255, 216, 255);
13-
color: lab(100 50 0);
13+
color: lab(100% 50 0);
1414
}
1515

1616
.test-lch {
1717
color: rgb(178, 34, 34);
18-
color: lch(40 68.8 34.5);
18+
color: lch(40% 68.8 34.5);
1919
color: rgb(178, 34, 34);
20-
color: lch(40 68.8 34.5 / 1);
20+
color: lch(40% 68.8 34.5 / 1);
2121
color: rgba(178, 34, 34, .5);
22-
color: lch(40 68.8 34.5 / .5);
22+
color: lch(40% 68.8 34.5 / .5);
2323
color: rgb(178, 34, 34);
24-
color: lch(40 68.8 34.5 / 100%);
24+
color: lch(40% 68.8 34.5 / 100%);
2525
color: rgba(178, 34, 34, 0.5);
26-
color: lch(40 68.8 34.5 / 50%);
26+
color: lch(40% 68.8 34.5 / 50%);
2727
color: rgb(255, 216, 255);
28-
color: lch(100 50 0);
28+
color: lch(100% 50 0);
2929
}
3030

3131
.test-gray {

0 commit comments

Comments
 (0)