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

Create getProperties to dry utilities

Browse Source
This commit is contained in:
Irene Lin 2020-05-07 00:27:00 +10:00
parent a657a86b2d
commit aa5b548705
5 changed files with 65 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/plugins/backgroundColor.js
View File

@ -6,32 +6,27 @@ export default function() {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
const colors = flattenColorPalette(theme('backgroundColor'))
if (target('backgroundColor') === 'ie11') {
const utilities = _.fromPairs(
_.map(colors, (value, modifier) => {
return [
`.${e(`bg-${modifier}`)}`,
{ 'background-color': value },
]
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(colors, (value, modifier) => {
return [
`.${e(`bg-${modifier}`)}`,
corePlugins('backgroundOpacity')
? withAlphaVariable({
color: value,
property: 'background-color',
variable: '--bg-opacity',
})
: { 'background-color': value },
getProperties(value),
]
})
)

31
src/plugins/borderColor.js
View File

@ -6,32 +6,27 @@ export default function() {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
const colors = flattenColorPalette(theme('borderColor'))
if (target('borderColor') === 'ie11') {
const utilities = _.fromPairs(
_.map(_.omit(colors, 'default'), (value, modifier) => {
return [
`.${e(`border-${modifier}`)}`,
{ 'border-color': value },
]
const getProperties = value => {
if (target('borderColor') === 'ie11') {
return { 'border-color': value }
}
if (corePlugins('borderOpacity')) {
return withAlphaVariable({
color: value,
property: 'border-color',
variable: '--border-opacity',
})
)
}
addUtilities(utilities, variants('borderColor'))
return
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 },
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),
]
})
)

31
src/plugins/placeholderColor.js
View File

@ -6,32 +6,27 @@ export default function() {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
const colors = flattenColorPalette(theme('placeholderColor'))
if (target('placeholderColor') === 'ie11') {
const utilities = _.fromPairs(
_.map(colors, (value, modifier) => {
return [
`.${e(`placeholder-${modifier}`)}::placeholder`,
{ color: value },
]
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(colors, (value, modifier) => {
return [
`.${e(`placeholder-${modifier}`)}::placeholder`,
corePlugins('placeholderOpacity')
? withAlphaVariable({
color: value,
property: 'color',
variable: '--placeholder-opacity',
})
: { color: value },
getProperties(value),
]
})
)

31
src/plugins/textColor.js
View File

@ -6,32 +6,27 @@ export default function() {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
const colors = flattenColorPalette(theme('textColor'))
if (target('textColor') === 'ie11') {
const utilities = _.fromPairs(
_.map(colors, (value, modifier) => {
return [
`.${e(`text-${modifier}`)}`,
{ color: value },
]
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(colors, (value, modifier) => {
return [
`.${e(`text-${modifier}`)}`,
corePlugins('textOpacity')
? withAlphaVariable({
color: value,
property: 'color',
variable: '--text-opacity',
})
: { color: value },
getProperties(value),
]
})
)