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 #1722 from playpool513/refactor-color-functions

Browse Source 
Refactor color functions
This commit is contained in:
Adam Wathan 2020-06-27 14:16:59 -04:00 committed by GitHub
commit 74ed4c2948
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 86 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/plugins/backgroundColor.js
View File

@ -4,30 +4,27 @@ import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
if (target('backgroundColor') === 'ie11') {
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => {
return [`.${e(`bg-${modifier}`)}`, { 'background-color': value }]
const colors = flattenColorPalette(theme('backgroundColor'))
const getProperties = value => {
if (target('backgroundColor') === 'ie11') {
return { 'background-color': value }
}
if (corePlugins('backgroundOpacity')) {
return withAlphaVariable({
color: value,
property: 'background-color',
variable: '--bg-opacity',
})
)
}
addUtilities(utilities, variants('backgroundColor'))
return
return { 'background-color': value }
}
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => {
return [
`.${e(`bg-${modifier}`)}`,
corePlugins('backgroundOpacity')
? withAlphaVariable({
color: value,
property: 'background-color',
variable: '--bg-opacity',
})
: { 'background-color': value },
]
_.map(colors, (value, modifier) => {
return [`.${e(`bg-${modifier}`)}`, getProperties(value)]
})
)

41
src/plugins/borderColor.js
View File

@ -4,34 +4,27 @@ import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
if (target('borderColor') === 'ie11') {
const colors = flattenColorPalette(theme('borderColor'))
const utilities = _.fromPairs(
_.map(_.omit(colors, 'default'), (value, modifier) => {
return [`.${e(`border-${modifier}`)}`, { 'border-color': value }]
})
)
addUtilities(utilities, variants('borderColor'))
return
}
const colors = flattenColorPalette(theme('borderColor'))
const getProperties = value => {
if (target('borderColor') === 'ie11') {
return { 'border-color': value }
}
if (corePlugins('borderOpacity')) {
return withAlphaVariable({
color: value,
property: 'border-color',
variable: '--border-opacity',
})
}
return { 'border-color': value }
}
const utilities = _.fromPairs(
_.map(_.omit(colors, 'default'), (value, modifier) => {
return [
`.${e(`border-${modifier}`)}`,
corePlugins('borderOpacity')
? withAlphaVariable({
color: value,
property: 'border-color',
variable: '--border-opacity',
})
: { 'border-color': value },
]
return [`.${e(`border-${modifier}`)}`, getProperties(value)]
})
)

31
src/plugins/divideColor.js
View File

@ -6,32 +6,27 @@ export default function() {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
const colors = flattenColorPalette(theme('divideColor'))
if (target('divideColor') === 'ie11') {
const utilities = _.fromPairs(
_.map(_.omit(colors, 'default'), (value, modifier) => {
return [
`.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`,
{ 'border-color': value },
]
const getProperties = value => {
if (target('divideColor') === 'ie11') {
return { 'border-color': value }
}
if (corePlugins('divideOpacity')) {
return withAlphaVariable({
color: value,
property: 'border-color',
variable: '--divide-opacity',
})
)
}
addUtilities(utilities, variants('divideColor'))
return
return { 'border-color': value }
}
const utilities = _.fromPairs(
_.map(_.omit(colors, 'default'), (value, modifier) => {
return [
`.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`,
corePlugins('divideOpacity')
? withAlphaVariable({
color: value,
property: 'border-color',
variable: '--divide-opacity',
})
: { 'border-color': value },
getProperties(value),
]
})
)

11
src/plugins/fill.js
View File

@ -3,14 +3,11 @@ import flattenColorPalette from '../util/flattenColorPalette'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const colors = flattenColorPalette(theme('fill'))
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('fill')), (value, modifier) => {
return [
`.${e(`fill-${modifier}`)}`,
{
fill: value,
},
]
_.map(colors, (value, modifier) => {
return [`.${e(`fill-${modifier}`)}`, { fill: value }]
})
)

35
src/plugins/placeholderColor.js
View File

@ -4,30 +4,27 @@ import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
if (target('placeholderColor') === 'ie11') {
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('placeholderColor')), (value, modifier) => {
return [`.${e(`placeholder-${modifier}`)}::placeholder`, { color: value }]
const colors = flattenColorPalette(theme('placeholderColor'))
const getProperties = value => {
if (target('placeholderColor') === 'ie11') {
return { color: value }
}
if (corePlugins('placeholderOpacity')) {
return withAlphaVariable({
color: value,
property: 'color',
variable: '--placeholder-opacity',
})
)
}
addUtilities(utilities, variants('placeholderColor'))
return
return { color: value }
}
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('placeholderColor')), (value, modifier) => {
return [
`.${e(`placeholder-${modifier}`)}::placeholder`,
corePlugins('placeholderOpacity')
? withAlphaVariable({
color: value,
property: 'color',
variable: '--placeholder-opacity',
})
: { color: value },
]
_.map(colors, (value, modifier) => {
return [`.${e(`placeholder-${modifier}`)}::placeholder`, getProperties(value)]
})
)

11
src/plugins/stroke.js
View File

@ -3,14 +3,11 @@ import flattenColorPalette from '../util/flattenColorPalette'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const colors = flattenColorPalette(theme('stroke'))
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('stroke')), (value, modifier) => {
return [
`.${e(`stroke-${modifier}`)}`,
{
stroke: value,
},
]
_.map(colors, (value, modifier) => {
return [`.${e(`stroke-${modifier}`)}`, { stroke: value }]
})
)

31
src/plugins/textColor.js
View File

@ -4,26 +4,27 @@ import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
if (target('textColor') === 'ie11') {
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('textColor')), (value, modifier) => {
return [`.${e(`text-${modifier}`)}`, { color: value }]
const colors = flattenColorPalette(theme('textColor'))
const getProperties = value => {
if (target('textColor') === 'ie11') {
return { color: value }
}
if (corePlugins('textOpacity')) {
return withAlphaVariable({
color: value,
property: 'color',
variable: '--text-opacity',
})
)
}
addUtilities(utilities, variants('textColor'))
return
return { color: value }
}
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('textColor')), (value, modifier) => {
return [
`.${e(`text-${modifier}`)}`,
corePlugins('textOpacity')
? withAlphaVariable({ color: value, property: 'color', variable: '--text-opacity' })
: { color: value },
]
_.map(colors, (value, modifier) => {
return [`.${e(`text-${modifier}`)}`, getProperties(value)]
})
)