-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
39 lines (32 loc) · 1.2 KB
/
index.js
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
const valueParser = require('postcss-value-parser');
module.exports = () => {
return {
postcssPlugin: 'postcss-pxv',
Once(root) {
root.walkDecls((decl) => {
const basis = 'var(--siteBasis)';
const max = 'var(--siteMax)';
const min = '1px';
const convertValue = (value) => {
const parsedValue = valueParser(value);
parsedValue.walk((node) => {
if (node.type === 'word' && /^[0-9.-]+pxv$/i.test(node.value)) {
const pxvValue = parseFloat(node.value.replace('pxv', ''));
if (pxvValue === 0) {
node.value = '0';
} else if (pxvValue > 0) {
node.value = `clamp(${min}, calc(${pxvValue}vw * (100 / ${basis})), calc(${pxvValue}px * ${max} / ${basis}))`;
} else {
const absPxvValue = Math.abs(pxvValue);
node.value = `clamp(calc(-${absPxvValue} * (100 / ${basis}) * 1vw), calc(-${absPxvValue}px * ${max} / ${basis}), -${min})`;
}
}
});
return parsedValue.toString();
};
decl.value = convertValue(decl.value);
});
},
};
};
module.exports.postcss = true;