forked from mantinedev/postcss-preset-mantine
-
Notifications
You must be signed in to change notification settings - Fork 0
/
postcss-rem-em.js
55 lines (45 loc) · 1.51 KB
/
postcss-rem-em.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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
function scaleRem(remValue) {
return `calc(${remValue} * var(--mantine-scale))`;
}
function createConverter(units, { shouldScale = false } = {}) {
return (value) => {
if (typeof value === 'number') {
const val = `${value / 16}${units}`;
return shouldScale ? scaleRem(val) : val;
}
if (typeof value === 'string') {
if (value.includes(units)) {
return shouldScale ? scaleRem(value) : value;
}
const replaced = value.replace('px', '');
if (!Number.isNaN(Number(replaced))) {
const val = `${Number(replaced) / 16}${units}`;
return shouldScale ? scaleRem(val) : val;
}
}
return value;
};
}
const rem = createConverter('rem', { shouldScale: true });
const remNoScale = createConverter('rem');
const em = createConverter('em');
const getRegExp = (units) => new RegExp('(?!\\W+)' + units + '\\(([^()]+)\\)', 'g');
const emRegExp = getRegExp('em');
const remRegExp = getRegExp('rem');
module.exports = () => {
return {
postcssPlugin: 'postcss-rem-em',
Once(root) {
root.replaceValues(remRegExp, { fast: `rem(` }, (_, values) => rem(values));
root.replaceValues(emRegExp, { fast: `em(` }, (_, values) => em(values));
},
AtRule: {
media: (atRule) => {
atRule.params = atRule.params
.replace(remRegExp, (value) => remNoScale(value.replace(/rem\((.*?)\)/g, '$1')))
.replace(emRegExp, (value) => em(value.replace(/em\((.*?)\)/g, '$1')));
},
},
};
};
module.exports.postcss = true;