1 | const { colord, extend } = require('colord');
|
2 | const valueParser = require('postcss-value-parser');
|
3 |
|
4 | const namesPlugin = require('colord/plugins/names');
|
5 | const hwbPlugin = require('colord/plugins/hwb');
|
6 | const labPlugin = require('colord/plugins/lab');
|
7 | const lchPlugin = require('colord/plugins/lch');
|
8 |
|
9 | extend([
|
10 |
|
11 | (namesPlugin),
|
12 | (hwbPlugin),
|
13 | (labPlugin),
|
14 | (lchPlugin),
|
15 |
|
16 |
|
17 |
|
18 |
|
19 | (_colordClass, parsers) => {
|
20 | parsers.string.push([parseHwbWithCommaString, ('hwb-with-comma')]);
|
21 | },
|
22 |
|
23 | (_colordClass, parsers) => {
|
24 | parsers.string.push([parseGrayString, ('gray')]);
|
25 | },
|
26 | ]);
|
27 |
|
28 | module.exports = {
|
29 | colord,
|
30 | };
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 | function parseHwbWithCommaString(input) {
|
38 | input = input.toLowerCase();
|
39 |
|
40 | if (!input.startsWith('hwb(') || !input.endsWith(')') || input.includes('/')) {
|
41 | return null;
|
42 | }
|
43 |
|
44 | const [hue, whiteness = '', blackness = '', alpha, ...extraArgs] = input.slice(4, -1).split(',');
|
45 |
|
46 | if (!hue.trim() || !whiteness.trim() || !blackness.trim() || extraArgs.length > 0) {
|
47 | return null;
|
48 | }
|
49 |
|
50 |
|
51 | const colordInstance = colord(
|
52 | `hwb(${hue} ${whiteness} ${blackness}${alpha ? ` / ${alpha}` : ''})`,
|
53 | );
|
54 |
|
55 | if (!colordInstance.isValid()) {
|
56 | return null;
|
57 | }
|
58 |
|
59 | return colordInstance.rgba;
|
60 | }
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 | function parseGrayString(input) {
|
67 | input = input.toLowerCase();
|
68 |
|
69 | if (!input.startsWith('gray(') || !input.endsWith(')')) {
|
70 | return null;
|
71 | }
|
72 |
|
73 | const [lightness, alpha, ...extraArgs] = input.slice(5, -1).split(',');
|
74 |
|
75 | if (extraArgs.length > 0) {
|
76 | return null;
|
77 | }
|
78 |
|
79 | const lightnessWithUnit = valueParser.unit(lightness.trim());
|
80 |
|
81 | if (!lightnessWithUnit || !['', '%'].includes(lightnessWithUnit.unit)) {
|
82 | return null;
|
83 | }
|
84 |
|
85 | |
86 |
|
87 |
|
88 | let colorObject = {
|
89 | l: Number(lightnessWithUnit.number),
|
90 | a: 0,
|
91 | b: 0,
|
92 | };
|
93 |
|
94 | if (alpha) {
|
95 | const alphaWithUnit = valueParser.unit(alpha.trim());
|
96 |
|
97 | if (!alphaWithUnit || !['', '%'].includes(alphaWithUnit.unit)) {
|
98 | return null;
|
99 | }
|
100 |
|
101 | colorObject = {
|
102 | ...colorObject,
|
103 | alpha: Number(alphaWithUnit.number) / (alphaWithUnit.unit ? 100 : 1),
|
104 | };
|
105 | }
|
106 |
|
107 | return colord(colorObject).rgba;
|
108 | }
|