-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
72 lines (56 loc) · 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
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
const vwh = /(?<=\d)vwh/g;
//const vwh = 'vwh';
const landscapeParam = /^(?:all\sand\s)*\(orientation:\s*landscape\)$/;
const portraitParam = /^(?:all\sand\s)*\(orientation:\s*portrait\)$/;
const mergeRules = (node) => {
const walked = { rules: [], selectors: [] };
node.walkRules(rule => {
let i = walked.selectors.indexOf(rule.selector);
if (i > -1) {
walked.rules[i].append(rule.nodes);
rule.remove();
} else {
walked.rules.push(rule);
walked.selectors.push(rule.selector);
}
});
}
module.exports = () => {
// Work with options here
return {
postcssPlugin: 'postcss-vwh',
Root (root, postcss) {
//create landscape & portrait rule
//fill them with declarations from all existing rules (if any)
//eject existing rules (if any)
let landscapeAtRule = postcss.atRule({name: 'media', params: '(orientation:landscape)', nodes: []});
root.nodes.filter(n => n.type === 'atrule' && n.name === 'media' && landscapeParam.test(n.params)).forEach(rule => {
landscapeAtRule.append(rule.nodes);
rule.remove();
});
let portraitAtRule = postcss.atRule({name: 'media', params: '(orientation:portrait)', nodes: []});
root.nodes.filter(n => n.type === 'atrule' && n.name === 'media' && portraitParam.test(n.params)).forEach(rule => {
portraitAtRule.append(rule.nodes);
rule.remove();
});
root.walkDecls(decl => {
if (vwh.test(decl.value)) {
const rule = decl.parent;
portraitAtRule.append(postcss.rule({selector: rule.selector}).append({prop: decl.prop, value: decl.value.replace(vwh,'vw')}));
landscapeAtRule.append(postcss.rule({selector: rule.selector}).append({prop: decl.prop, value: decl.value.replace(vwh,'vh')}));
decl.remove();
if (!rule.nodes.length) rule.remove();
}
});
if (landscapeAtRule.nodes.length) {
mergeRules(landscapeAtRule);
root.append(landscapeAtRule);
}
if (portraitAtRule.nodes.length) {
mergeRules(portraitAtRule);
root.append(portraitAtRule);
}
}
}
}
module.exports.postcss = true;