wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Generate responsive/hover variants based on config instead of hard-coded

Browse source
This commit is contained in:
Adam Wathan 2017-11-22 12:33:49 -05:00
parent 98d5a55c47
commit ea8915bef2
3 changed files with 95 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

43
defaultConfig.stub.js
View file

@ -770,6 +770,49 @@ module.exports = {
options: {
prefix: '',
important: false,
modules: {
appearance: ['responsive'],
backgroundColors: ['responsive', 'hover'],
backgroundPosition: ['responsive'],
backgroundSize: ['responsive'],
borderColors: ['responsive', 'hover'],
borderRadius: ['responsive'],
borderStyle: ['responsive'],
borderWidths: ['responsive'],
cursor: ['responsive'],
display: ['responsive'],
flexbox: ['responsive'],
float: ['responsive'],
fonts: ['responsive'],
fontWeights: ['responsive', 'hover'],
height: ['responsive'],
leading: ['responsive'],
lists: ['responsive'],
margin: ['responsive'],
maxHeight: ['responsive'],
maxWidth: ['responsive'],
minHeight: ['responsive'],
minWidth: ['responsive'],
negativeMargin: ['responsive'],
opacity: ['responsive'],
overflow: ['responsive'],
padding: ['responsive'],
pointerEvents: ['responsive'],
position: ['responsive'],
resize: ['responsive'],
shadows: ['responsive'],
textAlign: ['responsive'],
textColors: ['responsive', 'hover'],
textSizes: ['responsive'],
textStyle: ['responsive', 'hover'],
tracking: ['responsive'],
userSelect: ['responsive'],
verticalAlign: ['responsive'],
visibility: ['responsive'],
whitespace: ['responsive'],
width: ['responsive'],
zIndex: ['responsive'],
}
},
}

91
src/lib/generateUtilities.js
View file

@ -47,6 +47,15 @@ import whitespace from '../generators/whitespace'
import width from '../generators/width'
import zIndex from '../generators/zIndex'
function withVariants(module, variants) {
return _.reduce(variants, (module, variant) => {
return {
responsive: responsive,
hover: hoverable,
}[variant](module)
}, module)
}
export default function(config) {
return function(css) {
const unwrappedConfig = config()
@ -57,47 +66,47 @@ export default function(config) {
nodes: _.flatten([
// The `lists` module needs to be first to allow overriding the margin and
// padding values that it sets with other utilities.
responsive(lists(unwrappedConfig)),
responsive(appearance(unwrappedConfig)),
responsive(hoverable(backgroundColors(unwrappedConfig))),
responsive(backgroundPosition(unwrappedConfig)),
responsive(backgroundSize(unwrappedConfig)),
responsive(hoverable(borderColors(unwrappedConfig))),
responsive(borderRadius(unwrappedConfig)),
responsive(borderStyle(unwrappedConfig)),
responsive(borderWidths(unwrappedConfig)),
responsive(cursor(unwrappedConfig)),
responsive(display(unwrappedConfig)),
responsive(flexbox(unwrappedConfig)),
responsive(float(unwrappedConfig)),
responsive(fonts(unwrappedConfig)),
responsive(hoverable(fontWeights(unwrappedConfig))),
responsive(height(unwrappedConfig)),
responsive(leading(unwrappedConfig)),
responsive(margin(unwrappedConfig)),
responsive(maxHeight(unwrappedConfig)),
responsive(maxWidth(unwrappedConfig)),
responsive(minHeight(unwrappedConfig)),
responsive(minWidth(unwrappedConfig)),
responsive(negativeMargin(unwrappedConfig)),
responsive(opacity(unwrappedConfig)),
responsive(overflow(unwrappedConfig)),
responsive(padding(unwrappedConfig)),
responsive(pointerEvents(unwrappedConfig)),
responsive(position(unwrappedConfig)),
responsive(resize(unwrappedConfig)),
responsive(shadows(unwrappedConfig)),
responsive(textAlign(unwrappedConfig)),
responsive(hoverable(textColors(unwrappedConfig))),
responsive(textSizes(unwrappedConfig)),
responsive(hoverable(textStyle(unwrappedConfig))),
responsive(tracking(unwrappedConfig)),
responsive(userSelect(unwrappedConfig)),
responsive(verticalAlign(unwrappedConfig)),
responsive(visibility(unwrappedConfig)),
responsive(whitespace(unwrappedConfig)),
responsive(width(unwrappedConfig)),
responsive(zIndex(unwrappedConfig)),
withVariants(lists(unwrappedConfig), unwrappedConfig.options.modules.lists),
withVariants(appearance(unwrappedConfig), unwrappedConfig.options.modules.appearance),
withVariants(backgroundColors(unwrappedConfig), unwrappedConfig.options.modules.backgroundColors),
withVariants(backgroundPosition(unwrappedConfig), unwrappedConfig.options.modules.backgroundPosition),
withVariants(backgroundSize(unwrappedConfig), unwrappedConfig.options.modules.backgroundSize),
withVariants(borderColors(unwrappedConfig), unwrappedConfig.options.modules.borderColors),
withVariants(borderRadius(unwrappedConfig), unwrappedConfig.options.modules.borderRadius),
withVariants(borderStyle(unwrappedConfig), unwrappedConfig.options.modules.borderStyle),
withVariants(borderWidths(unwrappedConfig), unwrappedConfig.options.modules.borderWidths),
withVariants(cursor(unwrappedConfig), unwrappedConfig.options.modules.cursor),
withVariants(display(unwrappedConfig), unwrappedConfig.options.modules.display),
withVariants(flexbox(unwrappedConfig), unwrappedConfig.options.modules.flexbox),
withVariants(float(unwrappedConfig), unwrappedConfig.options.modules.float),
withVariants(fonts(unwrappedConfig), unwrappedConfig.options.modules.fonts),
withVariants(fontWeights(unwrappedConfig), unwrappedConfig.options.modules.fontWeights),
withVariants(height(unwrappedConfig), unwrappedConfig.options.modules.height),
withVariants(leading(unwrappedConfig), unwrappedConfig.options.modules.leading),
withVariants(margin(unwrappedConfig), unwrappedConfig.options.modules.margin),
withVariants(maxHeight(unwrappedConfig), unwrappedConfig.options.modules.maxHeight),
withVariants(maxWidth(unwrappedConfig), unwrappedConfig.options.modules.maxWidth),
withVariants(minHeight(unwrappedConfig), unwrappedConfig.options.modules.minHeight),
withVariants(minWidth(unwrappedConfig), unwrappedConfig.options.modules.minWidth),
withVariants(negativeMargin(unwrappedConfig), unwrappedConfig.options.modules.negativeMargin),
withVariants(opacity(unwrappedConfig), unwrappedConfig.options.modules.opacity),
withVariants(overflow(unwrappedConfig), unwrappedConfig.options.modules.overflow),
withVariants(padding(unwrappedConfig), unwrappedConfig.options.modules.padding),
withVariants(pointerEvents(unwrappedConfig), unwrappedConfig.options.modules.pointerEvents),
withVariants(position(unwrappedConfig), unwrappedConfig.options.modules.position),
withVariants(resize(unwrappedConfig), unwrappedConfig.options.modules.resize),
withVariants(shadows(unwrappedConfig), unwrappedConfig.options.modules.shadows),
withVariants(textAlign(unwrappedConfig), unwrappedConfig.options.modules.textAlign),
withVariants(textColors(unwrappedConfig), unwrappedConfig.options.modules.textColors),
withVariants(textSizes(unwrappedConfig), unwrappedConfig.options.modules.textSizes),
withVariants(textStyle(unwrappedConfig), unwrappedConfig.options.modules.textStyle),
withVariants(tracking(unwrappedConfig), unwrappedConfig.options.modules.tracking),
withVariants(userSelect(unwrappedConfig), unwrappedConfig.options.modules.userSelect),
withVariants(verticalAlign(unwrappedConfig), unwrappedConfig.options.modules.verticalAlign),
withVariants(visibility(unwrappedConfig), unwrappedConfig.options.modules.visibility),
withVariants(whitespace(unwrappedConfig), unwrappedConfig.options.modules.whitespace),
withVariants(width(unwrappedConfig), unwrappedConfig.options.modules.width),
withVariants(zIndex(unwrappedConfig), unwrappedConfig.options.modules.zIndex),
]),
})

3
src/util/hoverable.js
View file

@ -1,3 +1,4 @@
import _ from 'lodash'
import postcss from 'postcss'
import cloneNodes from './cloneNodes'
@ -6,5 +7,5 @@ export default function hoverable(rules) {
.atRule({
name: 'hoverable',
})
.append(cloneNodes(rules))
.append(cloneNodes(_.isArray(rules) ? rules : [rules]))
}