1 | import postcss from 'postcss';
|
---|
2 | import valueParser from 'postcss-values-parser';
|
---|
3 |
|
---|
4 | var index = postcss.plugin('postcss-color-hex-alpha', opts => {
|
---|
5 | // whether to preserve the original hexa
|
---|
6 | const preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false;
|
---|
7 | return root => {
|
---|
8 | // for each declaration with a hexa
|
---|
9 | root.walkDecls(decl => {
|
---|
10 | if (hasAlphaHex(decl)) {
|
---|
11 | // replace instances of hexa with rgba()
|
---|
12 | const ast = valueParser(decl.value).parse();
|
---|
13 | walk(ast, node => {
|
---|
14 | if (isAlphaHex(node)) {
|
---|
15 | node.replaceWith(hexa2rgba(node));
|
---|
16 | }
|
---|
17 | }); // conditionally update the declaration
|
---|
18 |
|
---|
19 | const modifiedValue = String(ast);
|
---|
20 |
|
---|
21 | if (decl.value !== modifiedValue) {
|
---|
22 | if (preserve) {
|
---|
23 | decl.cloneBefore({
|
---|
24 | value: modifiedValue
|
---|
25 | });
|
---|
26 | } else {
|
---|
27 | decl.value = modifiedValue;
|
---|
28 | }
|
---|
29 | }
|
---|
30 | }
|
---|
31 | });
|
---|
32 | };
|
---|
33 | }); // match any hexa
|
---|
34 |
|
---|
35 | const alphaHexRegExp = /#([0-9A-Fa-f]{4}(?:[0-9A-Fa-f]{4})?)\b/; // whether a node has a hexa
|
---|
36 |
|
---|
37 | const hasAlphaHex = node => alphaHexRegExp.test(node.value); // match an exact hexa
|
---|
38 |
|
---|
39 |
|
---|
40 | const alphaHexValueRegExp = /^#([0-9A-Fa-f]{4}(?:[0-9A-Fa-f]{4})?)$/; // walk all nodes in a value
|
---|
41 |
|
---|
42 | const walk = (node, fn) => {
|
---|
43 | if (Object(node.nodes).length) {
|
---|
44 | node.nodes.slice().forEach(child => {
|
---|
45 | fn(child);
|
---|
46 | walk(child, fn);
|
---|
47 | });
|
---|
48 | }
|
---|
49 | }; // decimal precision
|
---|
50 |
|
---|
51 |
|
---|
52 | const alphaDecimalPrecision = 100000; // match a hexa node
|
---|
53 |
|
---|
54 | const isAlphaHex = node => node.type === 'word' && alphaHexValueRegExp.test(node.value);
|
---|
55 |
|
---|
56 | const hexa2rgba = node => {
|
---|
57 | // hex is the node value
|
---|
58 | const hex = node.value; // conditionally expand a hex
|
---|
59 |
|
---|
60 | const hex8 = `0x${hex.length === 5 ? hex.slice(1).replace(/[0-9A-f]/g, '$&$&') : hex.slice(1)}`; // extract the red, blue, green, and alpha values from the hex
|
---|
61 |
|
---|
62 | const _ref = [parseInt(hex8.slice(2, 4), 16), parseInt(hex8.slice(4, 6), 16), parseInt(hex8.slice(6, 8), 16), Math.round(parseInt(hex8.slice(8, 10), 16) / 255 * alphaDecimalPrecision) / alphaDecimalPrecision],
|
---|
63 | r = _ref[0],
|
---|
64 | g = _ref[1],
|
---|
65 | b = _ref[2],
|
---|
66 | a = _ref[3]; // return a new rgba function, preserving the whitespace of the original node
|
---|
67 |
|
---|
68 | const rgbaFunc = valueParser.func({
|
---|
69 | value: 'rgba',
|
---|
70 | raws: Object.assign({}, node.raws)
|
---|
71 | });
|
---|
72 | rgbaFunc.append(valueParser.paren({
|
---|
73 | value: '('
|
---|
74 | }));
|
---|
75 | rgbaFunc.append(valueParser.number({
|
---|
76 | value: r
|
---|
77 | }));
|
---|
78 | rgbaFunc.append(valueParser.comma({
|
---|
79 | value: ','
|
---|
80 | }));
|
---|
81 | rgbaFunc.append(valueParser.number({
|
---|
82 | value: g
|
---|
83 | }));
|
---|
84 | rgbaFunc.append(valueParser.comma({
|
---|
85 | value: ','
|
---|
86 | }));
|
---|
87 | rgbaFunc.append(valueParser.number({
|
---|
88 | value: b
|
---|
89 | }));
|
---|
90 | rgbaFunc.append(valueParser.comma({
|
---|
91 | value: ','
|
---|
92 | }));
|
---|
93 | rgbaFunc.append(valueParser.number({
|
---|
94 | value: a
|
---|
95 | }));
|
---|
96 | rgbaFunc.append(valueParser.paren({
|
---|
97 | value: ')'
|
---|
98 | }));
|
---|
99 | return rgbaFunc;
|
---|
100 | };
|
---|
101 |
|
---|
102 | export default index;
|
---|
103 | //# sourceMappingURL=index.es.mjs.map
|
---|