This repository has been archived by the owner on Mar 29, 2024. It is now read-only.
/
index.js
58 lines (53 loc) · 1.62 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
const _ = require('lodash');
const strip = require('css-strip-units');
function extractMinWidths(breakpoints) {
return _.flatMap(breakpoints, breakpoints => {
if (_.isString(breakpoints)) {
breakpoints = { min: breakpoints }
}
if (!_.isArray(breakpoints)) {
breakpoints = [breakpoints]
}
return _(breakpoints)
.filter(breakpoint => {
return _.has(breakpoint, 'min') || _.has(breakpoint, 'min-width')
})
.map(breakpoint => {
return _.get(breakpoint, 'min-width', breakpoint.min)
})
.value()
})
}
module.exports = function(options) {
return function({addComponents, config}) {
const screens = _.get(options, 'screens', config('screens'))
const minWidths = extractMinWidths(screens);
const atRules = _.map(minWidths, minWidth => {
const unit = strip(minWidth);
return {
[`@media (min-width: ${minWidth})`]: {
'.half-container': {
'max-width': `${parseInt(minWidth, 10) / 2}${unit}`,
},
},
}
})
addComponents([
{
'.half-container': Object.assign(
{'width': '100%'},
_.get(options, 'center', false) ? { marginRight: 'auto', marginLeft: 'auto' } : { marginLeft: 'auto'},
_.has(options, 'padding')
? { paddingRight: options.padding, paddingLeft: options.padding }
: {}
)
},
{
'.half-container--end': Object.assign(
_.get(options, 'center', false) ? { marginRight: 'auto', marginLeft: 'auto' } : { marginRight: 'auto', marginLeft: 'initial'},
)
},
...atRules
]);
}
}