From aa5b548705b92b4ed1d9a8b8a073a65e9e962639 Mon Sep 17 00:00:00 2001 From: Irene Lin Date: Thu, 7 May 2020 00:27:00 +1000 Subject: [PATCH] Create getProperties to dry utilities --- src/plugins/backgroundColor.js | 31 +++++++++++++------------------ src/plugins/borderColor.js | 31 +++++++++++++------------------ src/plugins/divideColor.js | 31 +++++++++++++------------------ src/plugins/placeholderColor.js | 31 +++++++++++++------------------ src/plugins/textColor.js | 31 +++++++++++++------------------ 5 files changed, 65 insertions(+), 90 deletions(-) diff --git a/src/plugins/backgroundColor.js b/src/plugins/backgroundColor.js index c66f38a7d..141ee0342 100644 --- a/src/plugins/backgroundColor.js +++ b/src/plugins/backgroundColor.js @@ -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), ] }) ) diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js index 250b345fb..7cf627aa4 100644 --- a/src/plugins/borderColor.js +++ b/src/plugins/borderColor.js @@ -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), ] }) ) diff --git a/src/plugins/divideColor.js b/src/plugins/divideColor.js index 915aba9cd..5b8922ab1 100644 --- a/src/plugins/divideColor.js +++ b/src/plugins/divideColor.js @@ -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), ] }) ) diff --git a/src/plugins/placeholderColor.js b/src/plugins/placeholderColor.js index 15b700a27..a80948501 100644 --- a/src/plugins/placeholderColor.js +++ b/src/plugins/placeholderColor.js @@ -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), ] }) ) diff --git a/src/plugins/textColor.js b/src/plugins/textColor.js index a1f193712..219e8ac85 100644 --- a/src/plugins/textColor.js +++ b/src/plugins/textColor.js @@ -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), ] }) )