archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Apply responsive and hover at the per-module level, in the main generator

Browse Source
This commit is contained in:
Adam Wathan 2017-11-22 12:10:15 -05:00
parent d1828c9dd9
commit 98d5a55c47
7 changed files with 79 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/generators/backgroundColors.js
View File

@ -1,13 +1,10 @@
import _ from 'lodash'
import defineClass from '../util/defineClass'
import hoverable from '../util/hoverable'
export default function({ backgroundColors }) {
return hoverable(
_.map(backgroundColors, (color, className) => {
return defineClass(`bg-${className}`, {
'background-color': color,
})
return _.map(backgroundColors, (color, className) => {
return defineClass(`bg-${className}`, {
'background-color': color,
})
)
})
}

11
src/generators/borderColors.js
View File

@ -1,13 +1,10 @@
import _ from 'lodash'
import defineClass from '../util/defineClass'
import hoverable from '../util/hoverable'
export default function({ borderColors }) {
return hoverable(
_.map(_.omit(borderColors, 'default'), (color, className) => {
return defineClass(`border-${className}`, {
'border-color': color,
})
return _.map(_.omit(borderColors, 'default'), (color, className) => {
return defineClass(`border-${className}`, {
'border-color': color,
})
)
})
}

11
src/generators/fontWeights.js
View File

@ -1,13 +1,10 @@
import _ from 'lodash'
import defineClass from '../util/defineClass'
import hoverable from '../util/hoverable'
export default function({ fontWeights }) {
return hoverable(
_.map(fontWeights, (weight, modifier) => {
return defineClass(`font-${modifier}`, {
'font-weight': `${weight}`,
})
return _.map(fontWeights, (weight, modifier) => {
return defineClass(`font-${modifier}`, {
'font-weight': `${weight}`,
})
)
})
}

11
src/generators/textColors.js
View File

@ -1,13 +1,10 @@
import _ from 'lodash'
import defineClass from '../util/defineClass'
import hoverable from '../util/hoverable'
export default function({ textColors }) {
return hoverable(
_.map(textColors, (color, modifier) => {
return defineClass(`text-${modifier}`, {
color,
})
return _.map(textColors, (color, modifier) => {
return defineClass(`text-${modifier}`, {
color,
})
)
})
}

41
src/generators/textStyle.js
View File

@ -1,29 +1,26 @@
import defineClasses from '../util/defineClasses'
import hoverable from '../util/hoverable'
export default function() {
return hoverable(
defineClasses({
italic: { 'font-style': 'italic' },
roman: { 'font-style': 'normal' },
return defineClasses({
italic: { 'font-style': 'italic' },
roman: { 'font-style': 'normal' },
uppercase: { 'text-transform': 'uppercase' },
lowercase: { 'text-transform': 'lowercase' },
capitalize: { 'text-transform': 'capitalize' },
'normal-case': { 'text-transform': 'none' },
uppercase: { 'text-transform': 'uppercase' },
lowercase: { 'text-transform': 'lowercase' },
capitalize: { 'text-transform': 'capitalize' },
'normal-case': { 'text-transform': 'none' },
underline: { 'text-decoration': 'underline' },
'line-through': { 'text-decoration': 'line-through' },
'no-underline': { 'text-decoration': 'none' },
underline: { 'text-decoration': 'underline' },
'line-through': { 'text-decoration': 'line-through' },
'no-underline': { 'text-decoration': 'none' },
antialiased: {
'-webkit-font-smoothing': 'antialiased',
'-moz-osx-font-smoothing': 'grayscale',
},
'subpixel-antialiased': {
'-webkit-font-smoothing': 'auto',
'-moz-osx-font-smoothing': 'auto',
},
})
)
antialiased: {
'-webkit-font-smoothing': 'antialiased',
'-moz-osx-font-smoothing': 'grayscale',
},
'subpixel-antialiased': {
'-webkit-font-smoothing': 'auto',
'-moz-osx-font-smoothing': 'auto',
},
})
}

85
src/lib/generateUtilities.js
View File

@ -2,6 +2,7 @@ import _ from 'lodash'
import postcss from 'postcss'
import applyClassPrefix from '../util/applyClassPrefix'
import responsive from '../util/responsive'
import hoverable from '../util/hoverable'
import lists from '../generators/lists'
import appearance from '../generators/appearance'
@ -56,47 +57,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.
lists(unwrappedConfig),
appearance(unwrappedConfig),
backgroundColors(unwrappedConfig),
backgroundPosition(unwrappedConfig),
backgroundSize(unwrappedConfig),
borderColors(unwrappedConfig),
borderRadius(unwrappedConfig),
borderStyle(unwrappedConfig),
borderWidths(unwrappedConfig),
cursor(unwrappedConfig),
display(unwrappedConfig),
flexbox(unwrappedConfig),
float(unwrappedConfig),
fonts(unwrappedConfig),
fontWeights(unwrappedConfig),
height(unwrappedConfig),
leading(unwrappedConfig),
margin(unwrappedConfig),
maxHeight(unwrappedConfig),
maxWidth(unwrappedConfig),
minHeight(unwrappedConfig),
minWidth(unwrappedConfig),
negativeMargin(unwrappedConfig),
opacity(unwrappedConfig),
overflow(unwrappedConfig),
padding(unwrappedConfig),
pointerEvents(unwrappedConfig),
position(unwrappedConfig),
resize(unwrappedConfig),
shadows(unwrappedConfig),
textAlign(unwrappedConfig),
textColors(unwrappedConfig),
textSizes(unwrappedConfig),
textStyle(unwrappedConfig),
tracking(unwrappedConfig),
userSelect(unwrappedConfig),
verticalAlign(unwrappedConfig),
visibility(unwrappedConfig),
whitespace(unwrappedConfig),
width(unwrappedConfig),
zIndex(unwrappedConfig),
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)),
]),
})
@ -105,7 +106,7 @@ export default function(config) {
}
const tailwindClasses = postcss.root({
nodes: [...container(unwrappedConfig), responsive(utilities)],
nodes: [...container(unwrappedConfig), ...utilities.nodes],
})
applyClassPrefix(tailwindClasses, _.get(unwrappedConfig, 'options.prefix', ''))

2
src/util/responsive.js
View File

@ -7,5 +7,5 @@ export default function responsive(rules) {
.atRule({
name: 'responsive',
})
.append(cloneNodes(_.isArray(rules) ? rules : rules.nodes))
.append(cloneNodes(_.isArray(rules) ? rules : [rules]))
}