Skip to content

Commit 45b3bf5

Browse files
romainmenkeromainmenke
authored
packages & css-color-parser : improve docs and a few extra tests (#899)
1 parent e97686a commit 45b3bf5

File tree

11 files changed

+153
-8
lines changed

11 files changed

+153
-8
lines changed

‎packages/cascade-layer-name-parser/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
Add [Cascade Layer Name Parser] to your project:
1010

1111
```bash
12-
npm install postcss @csstools/cascade-layer-name-parser @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev
12+
npm install @csstools/cascade-layer-name-parser @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev
1313
```
1414

1515
[Cascade Layer Name Parser] depends on our CSS tokenizer and parser algorithms.

‎packages/color-helpers/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
Add [Color Helpers] to your project:
1010

1111
```bash
12-
npm install postcss @csstools/color-helpers --save-dev
12+
npm install @csstools/color-helpers --save-dev
1313
```
1414

1515
This package exists to join all the different color functions scattered among the Colors 4 and Colors 5 plugins we maintain such as:

‎packages/css-calc/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Implemented from : https://drafts.csswg.org/css-values-4/ on 2023-02-17
1111
Add [CSS calc] to your project:
1212

1313
```bash
14-
npm install postcss @csstools/css-calc @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev
14+
npm install @csstools/css-calc @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev
1515
```
1616

1717
### With string values :

‎packages/css-color-parser/README.md

+19-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,25 @@
99
Add [CSS Color Parser] to your project:
1010

1111
```bash
12-
npm install postcss @csstools/css-color-parser @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev
12+
npm install @csstools/css-color-parser @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev
13+
```
14+
15+
```ts
16+
import { color } from '@csstools/css-color-parser';
17+
import { isFunctionNode, parseComponentValue } from '@csstools/css-parser-algorithms';
18+
import { serializeRGB } from '@csstools/css-color-parser';
19+
import { tokenize } from '@csstools/css-tokenizer';
20+
21+
// color() expects a parsed component value.
22+
const hwbComponentValue = parseComponentValue(tokenize({ css: 'hwb(10deg 10% 20%)' }));
23+
const colorData = color(hwbComponentValue);
24+
if (colorData) {
25+
console.log(colorData);
26+
27+
// serializeRGB() returns a component value.
28+
const rgbComponentValue = serializeRGB(colorData);
29+
console.log(rgbComponentValue.toString());
30+
}
1331
```
1432

1533
[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test

‎packages/css-color-parser/test/basic/color-function.mjs

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { color } from '@csstools/css-color-parser';
2+
import assert from 'assert';
3+
import { parse } from '../util/parse.mjs';
4+
import { serialize_sRGB_data } from '../util/serialize.mjs';
5+
6+
const tests = [
7+
['color(srgb 0.81388 0.43646 0.57322)', 'rgb(208, 111, 146)'],
8+
['color(display-p3 0.81388 0.43646 0.57322)', 'rgb(222, 105, 147)'],
9+
['color(srgb-linear 0.435 0.017 0.055)', 'rgb(176, 35, 66)'],
10+
['color(xyz 0.21661 0.14602 0.59452)', 'rgb(118, 84, 205)'],
11+
['color(xyz-d65 0.21661 0.14602 0.59452)', 'rgb(118, 84, 205)'],
12+
['color(xyz-d50 0.2005 0.14089 0.4472)', 'rgb(118, 84, 205)'],
13+
['color(a98-rgb 0.7 0.5 0.3)', 'rgb(196, 129, 72)'],
14+
['color(prophoto-rgb 0.7 0.5 0.3)', 'rgb(234, 133, 82)'],
15+
16+
['color(srgb 0.0005556487875468122 0.9999999999999999 -0.00220276712790066)', 'rgb(0, 255, 0)'],
17+
['color(srgb-linear 0.000043006872101146454 0.9999999999999999 -0.00017049281175701703)', 'rgb(0, 255, 0)'],
18+
['color(a98-rgb 0.565 1 0.234)', 'rgb(0, 255, 0)'],
19+
['color(prophoto-rgb 0.5402796954751572 0.9275945561561767 0.30435477084804174)', 'rgb(0, 255, 0)'],
20+
['color(display-p3 0.45844420720487417 0.9852652233445233 0.29798036139719497)', 'rgb(0, 255, 0)'],
21+
['color(rec2020 0.5675603321833232 0.9592792129938423 0.2686829491074993)', 'rgb(0, 255, 0)'],
22+
['color(xyz-d50 0.3851458288094242 0.7168862873215868 0.09696013568183873)', 'rgb(0, 255, 0)'],
23+
['color(xyz-d65 0.35757130434515494 0.7151655154354521 0.11903355225337156)', 'rgb(0, 255, 0)'],
24+
['color(xyz 0.35757130434515494 0.7151655154354521 0.11903355225337156)', 'rgb(0, 255, 0)'],
25+
26+
['color(srgb -0.13610556145124594 0.5177053690420603 0.540031109817831)', 'rgb(0, 132, 138)'],
27+
['color(srgb-linear -0.01656723676661187 0.23079644121427306 0.25298181882824156)', 'rgb(0, 132, 138)'],
28+
['color(a98-rgb 0.265 0.5134 0.5344)', 'rgb(0, 132, 138)'],
29+
['color(prophoto-rgb 0.28284813138491105 0.41695332740189284 0.4586239337463392)', 'rgb(0, 132, 138)'],
30+
['color(display-p3 0.18049383596973329 0.5091259470889726 0.5339002129941044)', 'rgb(0, 132, 138)'],
31+
['color(rec2020 0.24657637908526203 0.44994210472189566 0.486194553499425)', 'rgb(0, 132, 138)'],
32+
['color(xyz-d50 0.11786343156307554 0.1771045882551784 0.2028294891298204)', 'rgb(0, 132, 138)'],
33+
['color(xyz-d65 0.12135537506539545 0.1797988884168019 0.2676568254682071)', 'rgb(0, 132, 138)'],
34+
['color(xyz 0.12135537506539545 0.1797988884168019 0.2676568254682071)', 'rgb(0, 132, 138)'],
35+
36+
['color(srgb 0.8978862558205767 0.4885001647805462 0.9594359763905097)', 'rgb(229, 125, 245)'],
37+
['color(srgb-linear 0.7832360124544266 0.2035510416163499 0.9101924728483531)', 'rgb(229, 125, 245)'],
38+
['color(a98-rgb 0.8035122804301492 0.484896415622613 0.9440692746539695)', 'rgb(229, 125, 245)'],
39+
['color(prophoto-rgb 0.7596595159204217 0.4934889951894072 0.8985832663171222)', 'rgb(229, 125, 245)'],
40+
['color(display-p3 0.843565234 0.509345345 0.9342344435)', 'rgb(229, 125, 245)'],
41+
['color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224)', 'rgb(229, 125, 245)'],
42+
['color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199)', 'rgb(229, 125, 245)'],
43+
['color(xyz-d65 0.5600582450343325 0.37782875858447507 0.904570025128693)', 'rgb(229, 125, 245)'],
44+
['color(xyz 0.5600582450343325 0.37782875858447507 0.904570025128693)', 'rgb(229, 125, 245)'],
45+
];
46+
47+
for (const test of tests) {
48+
assert.deepStrictEqual(
49+
serialize_sRGB_data(color(parse(test[0]))),
50+
test[1],
51+
);
52+
}

‎packages/css-color-parser/test/basic/color-mix-function.mjs

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { color } from '@csstools/css-color-parser';
2+
import assert from 'assert';
3+
import { parse } from '../util/parse.mjs';
4+
import { serialize_sRGB_data } from '../util/serialize.mjs';
5+
6+
const tests = [
7+
['color-mix(in srgb, green 40%, color(srgb 0.8978862558205767 0.4885001647805462 0.9594359763905097))', 'rgb(137, 126, 147)'],
8+
['color-mix(in srgb, green 40%, color(srgb-linear 0.7832360124544266 0.2035510416163499 0.9101924728483531))', 'rgb(137, 126, 147)'],
9+
['color-mix(in srgb, green 40%, color(a98-rgb 0.8035122804301492 0.484896415622613 0.9440692746539695))', 'rgb(137, 126, 147)'],
10+
['color-mix(in srgb, green 40%, color(prophoto-rgb 0.7596595159204217 0.4934889951894072 0.8985832663171222))', 'rgb(137, 126, 147)'],
11+
['color-mix(in srgb, green 40%, color(display-p3 0.843565234 0.509345345 0.9342344435))', 'rgb(137, 126, 147)'],
12+
['color-mix(in srgb, green 40%, color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224))', 'rgb(137, 126, 147)'],
13+
['color-mix(in srgb, green 40%, color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199))', 'rgb(137, 126, 147)'],
14+
['color-mix(in srgb, green 40%, color(xyz-d65 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(137, 126, 147)'],
15+
['color-mix(in srgb, green 40%, color(xyz 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(137, 126, 147)'],
16+
['color-mix(in srgb, green 40%, oklch(0.747 0.196 322.2))', 'rgb(137, 126, 147)'],
17+
['color-mix(in srgb, green 40%, hsl(292deg 85.71% 72.55%))', 'rgb(137, 126, 147)'],
18+
19+
['color-mix(in srgb-linear, green 40%, color(srgb 0.8978862558205767 0.4885001647805462 0.9594359763905097))', 'rgb(182, 126, 195)'],
20+
['color-mix(in srgb-linear, green 40%, color(srgb-linear 0.7832360124544266 0.2035510416163499 0.9101924728483531))', 'rgb(182, 126, 195)'],
21+
['color-mix(in srgb-linear, green 40%, color(a98-rgb 0.8035122804301492 0.484896415622613 0.9440692746539695))', 'rgb(182, 126, 195)'],
22+
['color-mix(in srgb-linear, green 40%, color(prophoto-rgb 0.7596595159204217 0.4934889951894072 0.8985832663171222))', 'rgb(182, 126, 195)'],
23+
['color-mix(in srgb-linear, green 40%, color(display-p3 0.843565234 0.509345345 0.9342344435))', 'rgb(182, 126, 195)'],
24+
['color-mix(in srgb-linear, green 40%, color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224))', 'rgb(182, 126, 195)'],
25+
['color-mix(in srgb-linear, green 40%, color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199))', 'rgb(182, 126, 195)'],
26+
['color-mix(in srgb-linear, green 40%, color(xyz-d65 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(182, 126, 195)'],
27+
['color-mix(in srgb-linear, green 40%, color(xyz 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(182, 126, 195)'],
28+
['color-mix(in srgb-linear, green 40%, oklch(0.747 0.196 322.2))', 'rgb(182, 126, 195)'],
29+
['color-mix(in srgb-linear, green 40%, hsl(292deg 85.71% 72.55%))', 'rgb(182, 126, 195)'],
30+
31+
['color-mix(in xyz-d50, green 40%, color(srgb 0.8978862558205767 0.4885001647805462 0.9594359763905097))', 'rgb(182, 126, 195)'],
32+
['color-mix(in xyz-d50, green 40%, color(srgb-linear 0.7832360124544266 0.2035510416163499 0.9101924728483531))', 'rgb(182, 126, 195)'],
33+
['color-mix(in xyz-d50, green 40%, color(a98-rgb 0.8035122804301492 0.484896415622613 0.9440692746539695))', 'rgb(182, 126, 195)'],
34+
['color-mix(in xyz-d50, green 40%, color(prophoto-rgb 0.7596595159204217 0.4934889951894072 0.8985832663171222))', 'rgb(182, 126, 195)'],
35+
['color-mix(in xyz-d50, green 40%, color(display-p3 0.843565234 0.509345345 0.9342344435))', 'rgb(182, 126, 195)'],
36+
['color-mix(in xyz-d50, green 40%, color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224))', 'rgb(182, 126, 195)'],
37+
['color-mix(in xyz-d50, green 40%, color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199))', 'rgb(182, 126, 195)'],
38+
['color-mix(in xyz-d50, green 40%, color(xyz-d65 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(182, 126, 195)'],
39+
['color-mix(in xyz-d50, green 40%, color(xyz 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(182, 126, 195)'],
40+
['color-mix(in xyz-d50, green 40%, oklch(0.747 0.196 322.2))', 'rgb(182, 126, 195)'],
41+
['color-mix(in xyz-d50, green 40%, hsl(292deg 85.71% 72.55%))', 'rgb(182, 126, 195)'],
42+
43+
['color-mix(in hsl, green 40%, color(srgb 0.8978862558205767 0.4885001647805462 0.9594359763905097))', 'rgb(28, 88, 245)'],
44+
['color-mix(in hsl, green 40%, color(srgb-linear 0.7832360124544266 0.2035510416163499 0.9101924728483531))', 'rgb(28, 88, 245)'],
45+
['color-mix(in hsl, green 40%, color(a98-rgb 0.8035122804301492 0.484896415622613 0.9440692746539695))', 'rgb(28, 88, 245)'],
46+
['color-mix(in hsl, green 40%, color(prophoto-rgb 0.7596595159204217 0.4934889951894072 0.8985832663171222))', 'rgb(28, 88, 245)'],
47+
['color-mix(in hsl, green 40%, color(display-p3 0.843565234 0.509345345 0.9342344435))', 'rgb(28, 88, 245)'],
48+
['color-mix(in hsl, green 40%, color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224))', 'rgb(28, 88, 245)'],
49+
['color-mix(in hsl, green 40%, color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199))', 'rgb(28, 88, 245)'],
50+
['color-mix(in hsl, green 40%, color(xyz-d65 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(28, 88, 245)'],
51+
['color-mix(in hsl, green 40%, color(xyz 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(28, 88, 245)'],
52+
['color-mix(in hsl, green 40%, oklch(0.747 0.196 322.2))', 'rgb(28, 89, 245)'],
53+
['color-mix(in hsl, green 40%, hsl(292deg 85.71% 72.55%))', 'rgb(28, 89, 245)'],
54+
55+
['color-mix(in oklch, green 40%, color(srgb 0.8978862558205767 0.4885001647805462 0.9594359763905097))', 'rgb(0, 148, 254)'],
56+
['color-mix(in oklch, green 40%, color(srgb-linear 0.7832360124544266 0.2035510416163499 0.9101924728483531))', 'rgb(0, 148, 254)'],
57+
['color-mix(in oklch, green 40%, color(a98-rgb 0.8035122804301492 0.484896415622613 0.9440692746539695))', 'rgb(0, 148, 254)'],
58+
['color-mix(in oklch, green 40%, color(prophoto-rgb 0.7596595159204217 0.4934889951894072 0.8985832663171222))', 'rgb(0, 148, 254)'],
59+
['color-mix(in oklch, green 40%, color(display-p3 0.843565234 0.509345345 0.9342344435))', 'rgb(0, 148, 254)'],
60+
['color-mix(in oklch, green 40%, color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224))', 'rgb(0, 148, 254)'],
61+
['color-mix(in oklch, green 40%, color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199))', 'rgb(0, 148, 254)'],
62+
['color-mix(in oklch, green 40%, color(xyz-d65 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(0, 148, 254)'],
63+
['color-mix(in oklch, green 40%, color(xyz 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(0, 148, 254)'],
64+
['color-mix(in oklch, green 40%, oklch(0.747 0.196 322.2))', 'rgb(0, 148, 254)'],
65+
['color-mix(in oklch, green 40%, hsl(292deg 85.71% 72.55%))', 'rgb(0, 148, 254)'],
66+
];
67+
68+
for (const test of tests) {
69+
assert.deepStrictEqual(
70+
serialize_sRGB_data(color(parse(test[0]))),
71+
test[1],
72+
);
73+
}

‎packages/css-color-parser/test/test.mjs

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import './basic/basic.mjs';
2+
import './basic/color-function.mjs';
3+
import './basic/color-mix-function.mjs';
24
import './basic/keywords.mjs';
35
import './basic/lab.mjs';
46
import './basic/lch.mjs';

‎packages/css-parser-algorithms/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Implemented from : https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/
1111
Add [CSS Parser Algorithms] to your project:
1212

1313
```bash
14-
npm install postcss @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev
14+
npm install @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev
1515
```
1616

1717
[CSS Parser Algorithms] only accepts tokenized CSS.

‎packages/css-tokenizer/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Implemented from : https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/
1111
Add [CSS Tokenizer] to your project:
1212

1313
```bash
14-
npm install postcss @csstools/css-tokenizer --save-dev
14+
npm install @csstools/css-tokenizer --save-dev
1515
```
1616

1717
```js

‎packages/media-query-list-parser/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Implemented from : https://www.w3.org/TR/mediaqueries-5/
1111
Add [Media Query List Parser] to your project:
1212

1313
```bash
14-
npm install postcss @csstools/media-query-list-parser @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev
14+
npm install @csstools/media-query-list-parser @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev
1515
```
1616

1717
[Media Query List Parser] depends on our CSS tokenizer and parser algorithms.

‎packages/selector-specificity/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
Add [Selector Specificity] to your project:
1010

1111
```bash
12-
npm install postcss @csstools/selector-specificity --save-dev
12+
npm install @csstools/selector-specificity --save-dev
1313
```
1414

1515
```js

0 commit comments

Comments
 (0)