/
columns.js
114 lines (100 loc) · 3.14 KB
/
columns.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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import {list} from 'postcss';
import {unit} from 'postcss-value-parser';
import {detect} from 'lerna:stylehacks';
import canMerge from '../canMerge';
import getDecls from '../getDecls';
import getValue from '../getValue';
import mergeRules from '../mergeRules';
import insertCloned from '../insertCloned';
import remove from '../remove';
import hasVariable from '../hasVariable';
const properties = ['column-width', 'column-count'];
const auto = 'auto';
const inherit = 'inherit';
/**
* Normalize a columns shorthand definition. Both of the longhand
* properties' initial values are 'auto', and as per the spec,
* omitted values are set to their initial values. Thus, we can
* remove any 'auto' definition when there are two values.
*
* Specification link: https://www.w3.org/TR/css3-multicol/
*/
function normalize (values) {
if (values[0] === auto) {
return values[1];
}
if (values[1] === auto) {
return values[0];
}
if (values[0] === inherit && values[1] === inherit) {
return inherit;
}
return values.join(' ');
}
function explode (rule) {
rule.walkDecls('columns', decl => {
if (detect(decl)) {
return;
}
let values = list.space(decl.value);
if (values.length === 1) {
values.push(auto);
}
values.forEach((value, i) => {
let prop = properties[1];
if (value === auto) {
prop = properties[i];
} else if (unit(value).unit) {
prop = properties[0];
}
insertCloned(decl.parent, decl, {
prop,
value,
});
});
decl.remove();
});
}
function cleanup (rule) {
let decls = getDecls(rule, ['columns'].concat(properties));
while (decls.length) {
const lastNode = decls[decls.length - 1];
// remove properties of lower precedence
const lesser = decls.filter(node =>
!detect(lastNode) &&
!detect(node) &&
node !== lastNode &&
node.important === lastNode.important &&
lastNode.prop === 'columns' && node.prop !== lastNode.prop);
lesser.forEach(remove);
decls = decls.filter(node => !~lesser.indexOf(node));
// get duplicate properties
let duplicates = decls.filter(node =>
!detect(lastNode) &&
!detect(node) &&
node !== lastNode &&
node.important === lastNode.important &&
node.prop === lastNode.prop &&
hasVariable(node) === hasVariable(lastNode)
);
duplicates.forEach(remove);
decls = decls.filter(node => node !== lastNode && !~duplicates.indexOf(node));
}
}
function merge (rule) {
mergeRules(rule, properties, (rules, lastNode) => {
if (canMerge(...rules) && !rules.some(detect)) {
insertCloned(lastNode.parent, lastNode, {
prop: 'columns',
value: normalize(rules.map(getValue)),
});
rules.forEach(remove);
return true;
}
});
cleanup(rule);
}
export default {
explode,
merge,
};