1 | import postcss from 'postcss';
|
---|
2 | import valuesParser from 'postcss-values-parser';
|
---|
3 |
|
---|
4 | var index = postcss.plugin('postcss-color-functional-notation', opts => {
|
---|
5 | const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false;
|
---|
6 | return root => {
|
---|
7 | root.walkDecls(decl => {
|
---|
8 | const originalValue = decl.value;
|
---|
9 |
|
---|
10 | if (colorAnyRegExp.test(originalValue)) {
|
---|
11 | const valueAST = valuesParser(originalValue).parse();
|
---|
12 | valueAST.walkType('func', node => {
|
---|
13 | if (colorRegExp.test(node.value)) {
|
---|
14 | const children = node.nodes.slice(1, -1);
|
---|
15 | const isFunctionalHSL = matchFunctionalHSL(node, children);
|
---|
16 | const isFunctionalRGB1 = matchFunctionalRGB1(node, children);
|
---|
17 | const isFunctionalRGB2 = matchFunctionalRGB2(node, children);
|
---|
18 |
|
---|
19 | if (isFunctionalHSL || isFunctionalRGB1 || isFunctionalRGB2) {
|
---|
20 | const slashNode = children[3];
|
---|
21 | const alphaNode = children[4];
|
---|
22 |
|
---|
23 | if (alphaNode) {
|
---|
24 | if (isPercentage(alphaNode) && !isCalc(alphaNode)) {
|
---|
25 | alphaNode.unit = '';
|
---|
26 | alphaNode.value = String(alphaNode.value / 100);
|
---|
27 | }
|
---|
28 |
|
---|
29 | if (isHslRgb(node)) {
|
---|
30 | node.value += 'a';
|
---|
31 | }
|
---|
32 | } else if (isHslaRgba(node)) {
|
---|
33 | node.value = node.value.slice(0, -1);
|
---|
34 | }
|
---|
35 |
|
---|
36 | if (slashNode && isSlash(slashNode)) {
|
---|
37 | slashNode.replaceWith(newComma());
|
---|
38 | }
|
---|
39 |
|
---|
40 | if (isFunctionalRGB2) {
|
---|
41 | children[0].unit = children[1].unit = children[2].unit = '';
|
---|
42 | children[0].value = String(Math.floor(children[0].value * 255 / 100));
|
---|
43 | children[1].value = String(Math.floor(children[1].value * 255 / 100));
|
---|
44 | children[2].value = String(Math.floor(children[2].value * 255 / 100));
|
---|
45 | }
|
---|
46 |
|
---|
47 | node.nodes.splice(3, 0, [newComma()]);
|
---|
48 | node.nodes.splice(2, 0, [newComma()]);
|
---|
49 | }
|
---|
50 | }
|
---|
51 | });
|
---|
52 | const modifiedValue = String(valueAST);
|
---|
53 |
|
---|
54 | if (modifiedValue !== originalValue) {
|
---|
55 | if (preserve) {
|
---|
56 | decl.cloneBefore({
|
---|
57 | value: modifiedValue
|
---|
58 | });
|
---|
59 | } else {
|
---|
60 | decl.value = modifiedValue;
|
---|
61 | }
|
---|
62 | }
|
---|
63 | }
|
---|
64 | });
|
---|
65 | };
|
---|
66 | });
|
---|
67 | const alphaUnitMatch = /^%?$/i;
|
---|
68 | const calcFuncMatch = /^calc$/i;
|
---|
69 | const colorAnyRegExp = /(^|[^\w-])(hsla?|rgba?)\(/i;
|
---|
70 | const colorRegExp = /^(hsla?|rgba?)$/i;
|
---|
71 | const hslishRegExp = /^hsla?$/i;
|
---|
72 | const hslRgbFuncMatch = /^(hsl|rgb)$/i;
|
---|
73 | const hslaRgbaFuncMatch = /^(hsla|rgba)$/i;
|
---|
74 | const hueUnitMatch = /^(deg|grad|rad|turn)?$/i;
|
---|
75 | const rgbishRegExp = /^rgba?$/i;
|
---|
76 |
|
---|
77 | const isAlphaValue = node => isCalc(node) || node.type === 'number' && alphaUnitMatch.test(node.unit);
|
---|
78 |
|
---|
79 | const isCalc = node => node.type === 'func' && calcFuncMatch.test(node.value);
|
---|
80 |
|
---|
81 | const isHue = node => isCalc(node) || node.type === 'number' && hueUnitMatch.test(node.unit);
|
---|
82 |
|
---|
83 | const isNumber = node => isCalc(node) || node.type === 'number' && node.unit === '';
|
---|
84 |
|
---|
85 | const isPercentage = node => isCalc(node) || node.type === 'number' && (node.unit === '%' || node.unit === '' && node.value === '0');
|
---|
86 |
|
---|
87 | const isHslish = node => node.type === 'func' && hslishRegExp.test(node.value);
|
---|
88 |
|
---|
89 | const isHslRgb = node => node.type === 'func' && hslRgbFuncMatch.test(node.value);
|
---|
90 |
|
---|
91 | const isHslaRgba = node => node.type === 'func' && hslaRgbaFuncMatch.test(node.value);
|
---|
92 |
|
---|
93 | const isRgbish = node => node.type === 'func' && rgbishRegExp.test(node.value);
|
---|
94 |
|
---|
95 | const isSlash = node => node.type === 'operator' && node.value === '/';
|
---|
96 |
|
---|
97 | const functionalHSLMatch = [isHue, isPercentage, isPercentage, isSlash, isAlphaValue];
|
---|
98 | const functionalRGB1Match = [isNumber, isNumber, isNumber, isSlash, isAlphaValue];
|
---|
99 | const functionalRGB2Match = [isPercentage, isPercentage, isPercentage, isSlash, isAlphaValue];
|
---|
100 |
|
---|
101 | const matchFunctionalHSL = (node, children) => isHslish(node) && children.every((child, index) => typeof functionalHSLMatch[index] === 'function' && functionalHSLMatch[index](child));
|
---|
102 |
|
---|
103 | const matchFunctionalRGB1 = (node, children) => isRgbish(node) && children.every((child, index) => typeof functionalRGB1Match[index] === 'function' && functionalRGB1Match[index](child));
|
---|
104 |
|
---|
105 | const matchFunctionalRGB2 = (node, children) => isRgbish(node) && children.every((child, index) => typeof functionalRGB2Match[index] === 'function' && functionalRGB2Match[index](child));
|
---|
106 |
|
---|
107 | const newComma = () => valuesParser.comma({
|
---|
108 | value: ','
|
---|
109 | });
|
---|
110 |
|
---|
111 | export default index;
|
---|
112 | //# sourceMappingURL=index.es.mjs.map
|
---|