transform.js
3.25 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
'use strict';
const selectorParser = require('postcss-selector-parser');
const valueParser = require('postcss-value-parser');
const { parser } = require('../parser.js');
const reducer = require('./reducer.js');
const stringifier = require('./stringifier.js');
const MATCH_CALC = /((?:-(moz|webkit)-)?calc)/i;
/**
* @param {string} value
* @param {{precision: number, warnWhenCannotResolve: boolean}} options
* @param {import("postcss").Result} result
* @param {import("postcss").ChildNode} item
*/
function transformValue(value, options, result, item) {
return valueParser(value)
.walk((node) => {
// skip anything which isn't a calc() function
if (node.type !== 'function' || !MATCH_CALC.test(node.value)) {
return;
}
// stringify calc expression and produce an AST
const contents = valueParser.stringify(node.nodes);
const ast = parser.parse(contents);
// reduce AST to its simplest form, that is, either to a single value
// or a simplified calc expression
const reducedAst = reducer(ast, options.precision);
// stringify AST and write it back
/** @type {valueParser.Node} */ (node).type = 'word';
node.value = stringifier(
node.value,
reducedAst,
value,
options,
result,
item
);
return false;
})
.toString();
}
/**
* @param {import("postcss-selector-parser").Selectors} value
* @param {{precision: number, warnWhenCannotResolve: boolean}} options
* @param {import("postcss").Result} result
* @param {import("postcss").ChildNode} item
*/
function transformSelector(value, options, result, item) {
return selectorParser((selectors) => {
selectors.walk((node) => {
// attribute value
// e.g. the "calc(3*3)" part of "div[data-size="calc(3*3)"]"
if (node.type === 'attribute' && node.value) {
node.setValue(transformValue(node.value, options, result, item));
}
// tag value
// e.g. the "calc(3*3)" part of "div:nth-child(2n + calc(3*3))"
if (node.type === 'tag') {
node.value = transformValue(node.value, options, result, item);
}
return;
});
}).processSync(value);
}
/**
* @param {any} node
* @param {{precision: number, preserve: boolean, warnWhenCannotResolve: boolean}} options
* @param {'value'|'params'|'selector'} property
* @param {import("postcss").Result} result
*/
module.exports = (node, property, options, result) => {
let value = node[property];
try {
value =
property === 'selector'
? transformSelector(node[property], options, result, node)
: transformValue(node[property], options, result, node);
} catch (error) {
if (error instanceof Error) {
result.warn(error.message, { node });
} else {
result.warn('Error', { node });
}
return;
}
// if the preserve option is enabled and the value has changed, write the
// transformed value into a cloned node which is inserted before the current
// node, preserving the original value. Otherwise, overwrite the original
// value.
if (options.preserve && node[property] !== value) {
const clone = node.clone();
clone[property] = value;
node.parent.insertBefore(node, clone);
} else {
node[property] = value;
}
};