-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.js
72 lines (61 loc) · 1.92 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
var postcss = require('postcss');
var layouts = require('./flexbox-configs.js');
var appendProps = function(name, rule) {
// check if the property exists in the configs
if (layouts.hasOwnProperty(name)) {
var props = layouts[name];
for (var i=0; i<props.length; i++) {
rule.append(props[i]);
}
}
};
var appendBoxProps = function(decl, rule) {
// Add display flex for everything that is a box.
appendProps(decl.prop, rule);
// Identify whether row or column
var direction = decl.value.indexOf('horizontal') >= 0 ? 'horizontal':'vertical';
var allValues = decl.value.split(' ');
// Loop through all values and apply the styles
for (var i=0; i<allValues.length; i++) {
var currValue = allValues[i].toLowerCase();
// direction specific rules
if (layouts['direction-specific-values'].indexOf(currValue) >= 0) {
appendProps(direction + '-' + currValue, rule);
} else { // direction-agnostic rules
appendProps(currValue, rule);
}
}
rule.removeChild(decl);
};
var appendBoxItemProps = function(decl, rule) {
var allValues = decl.value.split(' ');
// For every value, apply styles
for (var i=0; i<allValues.length; i++) {
var currValue = allValues[i].toLowerCase();
// No need for prefix for flex-n
if (currValue.indexOf('flex') < 0) {
appendProps('self-' + currValue, rule);
} else {
appendProps(currValue, rule);
}
}
rule.removeChild(decl);
};
module.exports = postcss.plugin('postcss-flexbox',
function flexboxAdder(options) {
return function (css) {
options = options || {};
css.walkDecls(function (decl, i) {
var rule = decl.parent;
var value = decl.prop;
// Box layout
if (decl.prop === 'box') {
appendBoxProps(decl, rule);
}
// Items inside box layout
if (decl.prop === 'box-item') {
appendBoxItemProps(decl, rule);
}
});
}
});