Skip to content

Commit b586c6d

Browse files
adamwathanadamwathan
committed
Refactor generateUtilities to use generateModules
1 parent 936a4ee commit b586c6d

File tree

2 files changed

+101
-109
lines changed

2 files changed

+101
-109
lines changed

‎src/lib/generateUtilities.js‎

Lines changed: 16 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,33 @@
11
import _ from 'lodash'
22
import postcss from 'postcss'
33
import applyClassPrefix from '../util/applyClassPrefix'
4-
import wrapWithVariants from '../util/wrapWithVariants'
5-
4+
import generateModules from '../util/generateModules'
65
import container from '../generators/container'
7-
8-
import lists from '../generators/lists'
9-
import appearance from '../generators/appearance'
10-
import backgroundColors from '../generators/backgroundColors'
11-
import backgroundPosition from '../generators/backgroundPosition'
12-
import backgroundSize from '../generators/backgroundSize'
13-
import borderColors from '../generators/borderColors'
14-
import borderRadius from '../generators/borderRadius'
15-
import borderStyle from '../generators/borderStyle'
16-
import borderWidths from '../generators/borderWidths'
17-
import cursor from '../generators/cursor'
18-
import display from '../generators/display'
19-
import flexbox from '../generators/flexbox'
20-
import float from '../generators/float'
21-
import fonts from '../generators/fonts'
22-
import fontWeights from '../generators/fontWeights'
23-
import height from '../generators/height'
24-
import leading from '../generators/leading'
25-
import margin from '../generators/margin'
26-
import maxHeight from '../generators/maxHeight'
27-
import maxWidth from '../generators/maxWidth'
28-
import minHeight from '../generators/minHeight'
29-
import minWidth from '../generators/minWidth'
30-
import negativeMargin from '../generators/negativeMargin'
31-
import opacity from '../generators/opacity'
32-
import overflow from '../generators/overflow'
33-
import padding from '../generators/padding'
34-
import pointerEvents from '../generators/pointerEvents'
35-
import position from '../generators/position'
36-
import resize from '../generators/resize'
37-
import shadows from '../generators/shadows'
38-
import textAlign from '../generators/textAlign'
39-
import textColors from '../generators/textColors'
40-
import textSizes from '../generators/textSizes'
41-
import textStyle from '../generators/textStyle'
42-
import tracking from '../generators/tracking'
43-
import userSelect from '../generators/userSelect'
44-
import verticalAlign from '../generators/verticalAlign'
45-
import visibility from '../generators/visibility'
46-
import whitespace from '../generators/whitespace'
47-
import width from '../generators/width'
48-
import zIndex from '../generators/zIndex'
49-
50-
function modules() {
51-
return [
52-
{ name: 'lists', generator: lists },
53-
{ name: 'appearance', generator: appearance },
54-
{ name: 'backgroundColors', generator: backgroundColors },
55-
{ name: 'backgroundPosition', generator: backgroundPosition },
56-
{ name: 'backgroundSize', generator: backgroundSize },
57-
{ name: 'borderColors', generator: borderColors },
58-
{ name: 'borderRadius', generator: borderRadius },
59-
{ name: 'borderStyle', generator: borderStyle },
60-
{ name: 'borderWidths', generator: borderWidths },
61-
{ name: 'cursor', generator: cursor },
62-
{ name: 'display', generator: display },
63-
{ name: 'flexbox', generator: flexbox },
64-
{ name: 'float', generator: float },
65-
{ name: 'fonts', generator: fonts },
66-
{ name: 'fontWeights', generator: fontWeights },
67-
{ name: 'height', generator: height },
68-
{ name: 'leading', generator: leading },
69-
{ name: 'margin', generator: margin },
70-
{ name: 'maxHeight', generator: maxHeight },
71-
{ name: 'maxWidth', generator: maxWidth },
72-
{ name: 'minHeight', generator: minHeight },
73-
{ name: 'minWidth', generator: minWidth },
74-
{ name: 'negativeMargin', generator: negativeMargin },
75-
{ name: 'opacity', generator: opacity },
76-
{ name: 'overflow', generator: overflow },
77-
{ name: 'padding', generator: padding },
78-
{ name: 'pointerEvents', generator: pointerEvents },
79-
{ name: 'position', generator: position },
80-
{ name: 'resize', generator: resize },
81-
{ name: 'shadows', generator: shadows },
82-
{ name: 'textAlign', generator: textAlign },
83-
{ name: 'textColors', generator: textColors },
84-
{ name: 'textSizes', generator: textSizes },
85-
{ name: 'textStyle', generator: textStyle },
86-
{ name: 'tracking', generator: tracking },
87-
{ name: 'userSelect', generator: userSelect },
88-
{ name: 'verticalAlign', generator: verticalAlign },
89-
{ name: 'visibility', generator: visibility },
90-
{ name: 'whitespace', generator: whitespace },
91-
{ name: 'width', generator: width },
92-
{ name: 'zIndex', generator: zIndex },
93-
]
94-
}
6+
import utilityModules from '../utilityModules'
957

968
export default function(config) {
979
return function(css) {
9810
const unwrappedConfig = config()
9911

10012
css.walkAtRules('tailwind', atRule => {
101-
if (atRule.params === 'utilities') {
102-
const utilities = postcss.root({
103-
nodes: _.flatMap(modules(), module =>
104-
wrapWithVariants(
105-
module.generator(unwrappedConfig),
106-
unwrappedConfig.options.modules[module.name]
107-
)
108-
),
109-
})
13+
if (atRule.params !== 'utilities') {
14+
return
15+
}
16+
17+
const utilities = generateModules(utilityModules, unwrappedConfig.options.modules, unwrappedConfig)
11018

111-
if (_.get(unwrappedConfig, 'options.important', false)) {
112-
utilities.walkDecls(decl => (decl.important = true))
113-
}
19+
if (_.get(unwrappedConfig, 'options.important', false)) {
20+
utilities.walkDecls(decl => (decl.important = true))
21+
}
11422

115-
const tailwindClasses = postcss.root({
116-
nodes: [...container(unwrappedConfig), ...utilities.nodes],
117-
})
23+
const tailwindClasses = postcss.root({
24+
nodes: [...container(unwrappedConfig), ...utilities.nodes],
25+
})
11826

119-
applyClassPrefix(tailwindClasses, _.get(unwrappedConfig, 'options.prefix', ''))
27+
applyClassPrefix(tailwindClasses, _.get(unwrappedConfig, 'options.prefix', ''))
12028

121-
atRule.before(tailwindClasses)
122-
atRule.remove()
123-
}
29+
atRule.before(tailwindClasses)
30+
atRule.remove()
12431
})
12532
}
12633
}

‎src/utilityModules.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import lists from './generators/lists'
2+
import appearance from './generators/appearance'
3+
import backgroundColors from './generators/backgroundColors'
4+
import backgroundPosition from './generators/backgroundPosition'
5+
import backgroundSize from './generators/backgroundSize'
6+
import borderColors from './generators/borderColors'
7+
import borderRadius from './generators/borderRadius'
8+
import borderStyle from './generators/borderStyle'
9+
import borderWidths from './generators/borderWidths'
10+
import cursor from './generators/cursor'
11+
import display from './generators/display'
12+
import flexbox from './generators/flexbox'
13+
import float from './generators/float'
14+
import fonts from './generators/fonts'
15+
import fontWeights from './generators/fontWeights'
16+
import height from './generators/height'
17+
import leading from './generators/leading'
18+
import margin from './generators/margin'
19+
import maxHeight from './generators/maxHeight'
20+
import maxWidth from './generators/maxWidth'
21+
import minHeight from './generators/minHeight'
22+
import minWidth from './generators/minWidth'
23+
import negativeMargin from './generators/negativeMargin'
24+
import opacity from './generators/opacity'
25+
import overflow from './generators/overflow'
26+
import padding from './generators/padding'
27+
import pointerEvents from './generators/pointerEvents'
28+
import position from './generators/position'
29+
import resize from './generators/resize'
30+
import shadows from './generators/shadows'
31+
import textAlign from './generators/textAlign'
32+
import textColors from './generators/textColors'
33+
import textSizes from './generators/textSizes'
34+
import textStyle from './generators/textStyle'
35+
import tracking from './generators/tracking'
36+
import userSelect from './generators/userSelect'
37+
import verticalAlign from './generators/verticalAlign'
38+
import visibility from './generators/visibility'
39+
import whitespace from './generators/whitespace'
40+
import width from './generators/width'
41+
import zIndex from './generators/zIndex'
42+
43+
export default [
44+
{ name: 'lists', generator: lists },
45+
{ name: 'appearance', generator: appearance },
46+
{ name: 'backgroundColors', generator: backgroundColors },
47+
{ name: 'backgroundPosition', generator: backgroundPosition },
48+
{ name: 'backgroundSize', generator: backgroundSize },
49+
{ name: 'borderColors', generator: borderColors },
50+
{ name: 'borderRadius', generator: borderRadius },
51+
{ name: 'borderStyle', generator: borderStyle },
52+
{ name: 'borderWidths', generator: borderWidths },
53+
{ name: 'cursor', generator: cursor },
54+
{ name: 'display', generator: display },
55+
{ name: 'flexbox', generator: flexbox },
56+
{ name: 'float', generator: float },
57+
{ name: 'fonts', generator: fonts },
58+
{ name: 'fontWeights', generator: fontWeights },
59+
{ name: 'height', generator: height },
60+
{ name: 'leading', generator: leading },
61+
{ name: 'margin', generator: margin },
62+
{ name: 'maxHeight', generator: maxHeight },
63+
{ name: 'maxWidth', generator: maxWidth },
64+
{ name: 'minHeight', generator: minHeight },
65+
{ name: 'minWidth', generator: minWidth },
66+
{ name: 'negativeMargin', generator: negativeMargin },
67+
{ name: 'opacity', generator: opacity },
68+
{ name: 'overflow', generator: overflow },
69+
{ name: 'padding', generator: padding },
70+
{ name: 'pointerEvents', generator: pointerEvents },
71+
{ name: 'position', generator: position },
72+
{ name: 'resize', generator: resize },
73+
{ name: 'shadows', generator: shadows },
74+
{ name: 'textAlign', generator: textAlign },
75+
{ name: 'textColors', generator: textColors },
76+
{ name: 'textSizes', generator: textSizes },
77+
{ name: 'textStyle', generator: textStyle },
78+
{ name: 'tracking', generator: tracking },
79+
{ name: 'userSelect', generator: userSelect },
80+
{ name: 'verticalAlign', generator: verticalAlign },
81+
{ name: 'visibility', generator: visibility },
82+
{ name: 'whitespace', generator: whitespace },
83+
{ name: 'width', generator: width },
84+
{ name: 'zIndex', generator: zIndex },
85+
]

0 commit comments

Comments
 (0)