8e7b2dc1fa
Supports specifying background colors as an array of colors, or an object where the label is what you want to name that color as a background utility, and the value is the color to use. Everything can be specified as either camelCase or kebab-case so you don't need to quote the shit out of everything but classes will always be rendered as kebab-case.
25 lines
680 B
JavaScript
25 lines
680 B
JavaScript
const postcss = require('postcss')
|
|
const _ = require('lodash')
|
|
|
|
function findColor(colors, color) {
|
|
return _.mapKeys(colors, (value, key) => {
|
|
return _.camelCase(key)
|
|
})[_.camelCase(color)]
|
|
}
|
|
|
|
module.exports = function ({ colors, backgroundColors }) {
|
|
if (_.isArray(backgroundColors)) {
|
|
backgroundColors = _(backgroundColors).map(color => [color, color]).fromPairs()
|
|
}
|
|
|
|
return _(backgroundColors).toPairs().map(([className, colorName]) => {
|
|
const kebabClass = _.kebabCase(className)
|
|
|
|
return postcss.rule({
|
|
selector: `.bg-${kebabClass}`
|
|
}).append({
|
|
prop: 'background-color',
|
|
value: findColor(colors, colorName)
|
|
})
|
|
}).value()
|
|
}
|