-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
100 lines (89 loc) · 2.31 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
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
const multiColumnPlugin = function ({addUtilities, config, e}) {
const columnCounts = ['auto', '1', '2', '3', '4'];
const columnSpanValues = ['none', 'all', 'inherit', 'initial', 'unset'];
const columnFillValues = ['auto', 'balance', 'balance-all', 'inherit', 'initial', 'unset'];
const columnRuleWidthValues = ['thin', 'medium', 'thick'];
const borderStyles = [
'none',
'hidden',
'dotted',
'dashed',
'solid',
'double',
'groove',
'ridge',
'inset',
'outset',
];
const configSpacing = config('theme.spacing', []);
const configBorderWidths = config('theme.borderWidth', []);
const configColors = config('theme.colors', []);
const variants = config('variants.multiColumn', []);
const utilities = {};
columnCounts.forEach(count => {
// column count
utilities[`.col-count-${e(count)}`] = {
'column-count': count,
};
});
// column fill
columnFillValues.forEach(span => {
utilities[`.col-fill-${e(span)}`] = {
'column-fill': span,
};
});
// column rule color
Object.entries(configColors).forEach(([color, shades]) => {
if (typeof shades === 'object') {
Object.entries(shades).forEach(([shade, value]) => {
utilities[`.col-rule-${e(color)}-${e(shade)}`] = {
'column-rule-color': value,
};
});
} else {
utilities[`.col-rule-${e(color)}`] = {
'column-rule-color': shades,
};
}
});
// column rule style
borderStyles.forEach(style => {
utilities[`.col-rule-${e(style)}`] = {
'column-rule-style': style,
};
});
// column rule width, numeric values
Object.entries(configBorderWidths).forEach(([key, value]) => {
utilities[`.col-rule-width-${e(key)}`] = {
'column-rule-width': value,
};
});
// column rule width, keywords
columnRuleWidthValues.forEach(value => {
utilities[`.col-rule-width-${e(value)}`] = {
'column-rule-width': value,
};
});
// column span
columnSpanValues.forEach(span => {
utilities[`.col-span-${e(span)}`] = {
'column-span': span,
};
});
// column width
Object.entries(configSpacing).forEach(([key, value]) => {
utilities[`.col-width-${e(key)}`] = {
'column-width': value,
};
});
// column gap
Object.entries(configSpacing).forEach(([key, value]) => {
utilities[`.col-gap-${e(key)}`] = {
'column-gap': value,
};
});
addUtilities(utilities, {
variants,
});
};
module.exports = multiColumnPlugin;