-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
90 lines (78 loc) · 2.31 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
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
/**
* @type {import('postcss').PluginCreator}
*/
module.exports = () => {
return {
postcssPlugin: "postcss-stepped-font-size",
Declaration: {
"stepped-font-size": (decl) => {
const splitValuAndUnit = (size) => ({
_: size,
value: parseFloat(/[.0-9]+/.exec(size)[0]),
unit: /[a-z]+/i.exec(size)[0],
});
const selector = decl.parent.selector;
const fontSizes = /(.*?)\(/
.exec(decl.value)[1]
.replace(/(\s)/g, "")
.split(",")
.filter((_) => !!_)
.map(splitValuAndUnit);
const breakpoints = /\((.*?)\)/
.exec(decl.value)[1]
.replace(/(\s)/g, "")
.split(",")
.map(splitValuAndUnit)
.sort((x, y) => x.value - y.value);
const maxWidth = breakpoints[breakpoints.length - 1];
const minWidth = breakpoints.shift();
const maxFontSize = fontSizes[0];
const minFontSize = fontSizes[1];
decl.parent.before(`
${selector} {
min-width: 0vw;
line-height: normal;
}
`);
decl.parent.before(`
@media (max-width: ${minWidth._}) {
${selector} {
font-size: ${minFontSize._};
}
}
`);
var prevStep = minWidth;
breakpoints.forEach((breakpoint) => {
const targetStep = breakpoint;
let size =
Math.round(
(minFontSize.value +
((maxFontSize.value - minFontSize.value) /
(maxWidth.value - minWidth.value)) *
(targetStep.value - minWidth.value)) *
10
) / 10;
decl.parent.before(`
@media (min-width: ${prevStep._}) and (max-width: ${targetStep._}) {
${selector} {
font-size: ${size}${minFontSize.unit};
}
}
`);
prevStep = targetStep;
});
decl.parent.before(`
@media (min-width: ${maxWidth._}) {
${selector} {
font-size: ${maxFontSize._};
}
}
`);
const parent = decl.parent;
decl.remove();
if (!parent.nodes.length) parent.remove();
},
},
};
};
module.exports.postcss = true;