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

Merge pull request #707 from tailwindcss/nested-color-object

Browse Source 
Support object syntax for theme colors
This commit is contained in:
Adam Wathan 2019-03-05 09:42:37 -05:00 committed by GitHub
commit 817f68595d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 214 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
__tests__/plugins/backgroundColor.test.js Normal file
View File

@ -0,0 +1,64 @@
import _ from 'lodash'
import escapeClassName from '../../src/util/escapeClassName'
import plugin from '../../src/plugins/backgroundColor'
test('colors can be a nested object', () => {
const addedUtilities = []
const config = {
theme: {
backgroundColor: {
purple: 'purple',
red: {
1: 'rgb(33,0,0)',
2: 'rgb(67,0,0)',
3: 'rgb(100,0,0)',
},
green: {
1: 'rgb(0,33,0)',
2: 'rgb(0,67,0)',
3: 'rgb(0,100,0)',
},
blue: {
1: 'rgb(0,0,33)',
2: 'rgb(0,0,67)',
3: 'rgb(0,0,100)',
},
},
},
variants: {
backgroundColor: ['responsive'],
},
}
const pluginApi = {
config: (key, defaultValue) => _.get(config, key, defaultValue),
e: escapeClassName,
addUtilities(utilities, variants) {
addedUtilities.push({
utilities,
variants,
})
},
}
plugin()(pluginApi)
expect(addedUtilities).toEqual([
{
utilities: {
'.bg-purple': { 'background-color': 'purple' },
'.bg-red-1': { 'background-color': 'rgb(33,0,0)' },
'.bg-red-2': { 'background-color': 'rgb(67,0,0)' },
'.bg-red-3': { 'background-color': 'rgb(100,0,0)' },
'.bg-green-1': { 'background-color': 'rgb(0,33,0)' },
'.bg-green-2': { 'background-color': 'rgb(0,67,0)' },
'.bg-green-3': { 'background-color': 'rgb(0,100,0)' },
'.bg-blue-1': { 'background-color': 'rgb(0,0,33)' },
'.bg-blue-2': { 'background-color': 'rgb(0,0,67)' },
'.bg-blue-3': { 'background-color': 'rgb(0,0,100)' },
},
variants: ['responsive'],
},
])
})

64
__tests__/plugins/borderColor.test.js Normal file
View File

@ -0,0 +1,64 @@
import _ from 'lodash'
import escapeClassName from '../../src/util/escapeClassName'
import plugin from '../../src/plugins/borderColor'
test('colors can be a nested object', () => {
const addedUtilities = []
const config = {
theme: {
borderColor: {
purple: 'purple',
red: {
1: 'rgb(33,0,0)',
2: 'rgb(67,0,0)',
3: 'rgb(100,0,0)',
},
green: {
1: 'rgb(0,33,0)',
2: 'rgb(0,67,0)',
3: 'rgb(0,100,0)',
},
blue: {
1: 'rgb(0,0,33)',
2: 'rgb(0,0,67)',
3: 'rgb(0,0,100)',
},
},
},
variants: {
borderColor: ['responsive'],
},
}
const pluginApi = {
config: (key, defaultValue) => _.get(config, key, defaultValue),
e: escapeClassName,
addUtilities(utilities, variants) {
addedUtilities.push({
utilities,
variants,
})
},
}
plugin()(pluginApi)
expect(addedUtilities).toEqual([
{
utilities: {
'.border-purple': { 'border-color': 'purple' },
'.border-red-1': { 'border-color': 'rgb(33,0,0)' },
'.border-red-2': { 'border-color': 'rgb(67,0,0)' },
'.border-red-3': { 'border-color': 'rgb(100,0,0)' },
'.border-green-1': { 'border-color': 'rgb(0,33,0)' },
'.border-green-2': { 'border-color': 'rgb(0,67,0)' },
'.border-green-3': { 'border-color': 'rgb(0,100,0)' },
'.border-blue-1': { 'border-color': 'rgb(0,0,33)' },
'.border-blue-2': { 'border-color': 'rgb(0,0,67)' },
'.border-blue-3': { 'border-color': 'rgb(0,0,100)' },
},
variants: ['responsive'],
},
])
})

64
__tests__/plugins/textColor.test.js Normal file
View File

@ -0,0 +1,64 @@
import _ from 'lodash'
import escapeClassName from '../../src/util/escapeClassName'
import plugin from '../../src/plugins/textColor'
test('colors can be a nested object', () => {
const addedUtilities = []
const config = {
theme: {
textColor: {
purple: 'purple',
red: {
1: 'rgb(33,0,0)',
2: 'rgb(67,0,0)',
3: 'rgb(100,0,0)',
},
green: {
1: 'rgb(0,33,0)',
2: 'rgb(0,67,0)',
3: 'rgb(0,100,0)',
},
blue: {
1: 'rgb(0,0,33)',
2: 'rgb(0,0,67)',
3: 'rgb(0,0,100)',
},
},
},
variants: {
textColor: ['responsive'],
},
}
const pluginApi = {
config: (key, defaultValue) => _.get(config, key, defaultValue),
e: escapeClassName,
addUtilities(utilities, variants) {
addedUtilities.push({
utilities,
variants,
})
},
}
plugin()(pluginApi)
expect(addedUtilities).toEqual([
{
utilities: {
'.text-purple': { color: 'purple' },
'.text-red-1': { color: 'rgb(33,0,0)' },
'.text-red-2': { color: 'rgb(67,0,0)' },
'.text-red-3': { color: 'rgb(100,0,0)' },
'.text-green-1': { color: 'rgb(0,33,0)' },
'.text-green-2': { color: 'rgb(0,67,0)' },
'.text-green-3': { color: 'rgb(0,100,0)' },
'.text-blue-1': { color: 'rgb(0,0,33)' },
'.text-blue-2': { color: 'rgb(0,0,67)' },
'.text-blue-3': { color: 'rgb(0,0,100)' },
},
variants: ['responsive'],
},
])
})

3
src/plugins/backgroundColor.js
View File

@ -1,9 +1,10 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
export default function() {
return function({ addUtilities, e, config }) {
const utilities = _.fromPairs(
_.map(config('theme.backgroundColor'), (value, modifier) => {
_.map(flattenColorPalette(config('theme.backgroundColor')), (value, modifier) => {
return [
`.${e(`bg-${modifier}`)}`,
{

5
src/plugins/borderColor.js
View File

@ -1,9 +1,12 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
export default function() {
return function({ addUtilities, e, config }) {
const colors = flattenColorPalette(config('theme.borderColor'))
const utilities = _.fromPairs(
_.map(_.omit(config('theme.borderColor'), 'default'), (value, modifier) => {
_.map(_.omit(colors, 'default'), (value, modifier) => {
return [
`.${e(`border-${modifier}`)}`,
{

3
src/plugins/textColor.js
View File

@ -1,9 +1,10 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
export default function() {
return function({ addUtilities, e, config }) {
const utilities = _.fromPairs(
_.map(config('theme.textColor'), (value, modifier) => {
_.map(flattenColorPalette(config('theme.textColor')), (value, modifier) => {
return [
`.${e(`text-${modifier}`)}`,
{

14
src/util/flattenColorPalette.js Normal file
View File

@ -0,0 +1,14 @@
import _ from 'lodash'
export default function flattenColorPalette(colors) {
const result = _(colors)
.flatMap((color, name) => {
return _.isObject(color)
? _.map(color, (value, key) => [`${name}-${key}`, value])
: [[name, color]]
})
.fromPairs()
.value()
return result
}