collapseAdjacentRules.js
1.5 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
let comparisonMap = {
atrule: ['name', 'params'],
rule: ['selector'],
}
let types = new Set(Object.keys(comparisonMap))
export default function collapseAdjacentRules() {
function collapseRulesIn(root) {
let currentRule = null
root.each((node) => {
if (!types.has(node.type)) {
currentRule = null
return
}
if (currentRule === null) {
currentRule = node
return
}
let properties = comparisonMap[node.type]
if (node.type === 'atrule' && node.name === 'font-face') {
currentRule = node
} else if (
properties.every(
(property) =>
(node[property] ?? '').replace(/\s+/g, ' ') ===
(currentRule[property] ?? '').replace(/\s+/g, ' ')
)
) {
// An AtRule may not have children (for example if we encounter duplicate @import url(…) rules)
if (node.nodes) {
currentRule.append(node.nodes)
}
node.remove()
} else {
currentRule = node
}
})
// After we've collapsed adjacent rules & at-rules, we need to collapse
// adjacent rules & at-rules that are children of at-rules.
// We do not care about nesting rules because Tailwind CSS
// explicitly does not handle rule nesting on its own as
// the user is expected to use a nesting plugin
root.each((node) => {
if (node.type === 'atrule') {
collapseRulesIn(node)
}
})
}
return (root) => {
collapseRulesIn(root)
}
}