From 2ba2b72fc85a22171980d67ea884c1c0bca30795 Mon Sep 17 00:00:00 2001 From: Irene Lin Date: Thu, 7 May 2020 00:22:07 +1000 Subject: [PATCH 1/5] Reduce calls of flattenColorPalette --- src/plugins/backgroundColor.js | 6 ++++-- src/plugins/borderColor.js | 6 ++---- src/plugins/fill.js | 4 +++- src/plugins/placeholderColor.js | 6 ++++-- src/plugins/stroke.js | 4 +++- src/plugins/textColor.js | 6 ++++-- 6 files changed, 20 insertions(+), 12 deletions(-) diff --git a/src/plugins/backgroundColor.js b/src/plugins/backgroundColor.js index b9f443c0c..d9a19dc52 100644 --- a/src/plugins/backgroundColor.js +++ b/src/plugins/backgroundColor.js @@ -4,9 +4,11 @@ import withAlphaVariable from '../util/withAlphaVariable' export default function() { return function({ addUtilities, e, theme, variants, target, corePlugins }) { + const colors = flattenColorPalette(theme('backgroundColor')) + if (target('backgroundColor') === 'ie11') { const utilities = _.fromPairs( - _.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => { + _.map(colors, (value, modifier) => { return [`.${e(`bg-${modifier}`)}`, { 'background-color': value }] }) ) @@ -17,7 +19,7 @@ export default function() { } const utilities = _.fromPairs( - _.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => { + _.map(colors, (value, modifier) => { return [ `.${e(`bg-${modifier}`)}`, corePlugins('backgroundOpacity') diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js index 175b83b25..c87001768 100644 --- a/src/plugins/borderColor.js +++ b/src/plugins/borderColor.js @@ -4,9 +4,9 @@ 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 colors = flattenColorPalette(theme('borderColor')) + if (target('borderColor') === 'ie11') { const utilities = _.fromPairs( _.map(_.omit(colors, 'default'), (value, modifier) => { return [`.${e(`border-${modifier}`)}`, { 'border-color': value }] @@ -18,8 +18,6 @@ export default function() { return } - const colors = flattenColorPalette(theme('borderColor')) - const utilities = _.fromPairs( _.map(_.omit(colors, 'default'), (value, modifier) => { return [ diff --git a/src/plugins/fill.js b/src/plugins/fill.js index 93b6804e3..3540301cd 100644 --- a/src/plugins/fill.js +++ b/src/plugins/fill.js @@ -3,8 +3,10 @@ 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) => { + _.map(colors, (value, modifier) => { return [ `.${e(`fill-${modifier}`)}`, { diff --git a/src/plugins/placeholderColor.js b/src/plugins/placeholderColor.js index a7e0e9194..9497af0e4 100644 --- a/src/plugins/placeholderColor.js +++ b/src/plugins/placeholderColor.js @@ -4,9 +4,11 @@ import withAlphaVariable from '../util/withAlphaVariable' export default function() { return function({ addUtilities, e, theme, variants, target, corePlugins }) { + const colors = flattenColorPalette(theme('placeholderColor')) + if (target('placeholderColor') === 'ie11') { const utilities = _.fromPairs( - _.map(flattenColorPalette(theme('placeholderColor')), (value, modifier) => { + _.map(colors, (value, modifier) => { return [`.${e(`placeholder-${modifier}`)}::placeholder`, { color: value }] }) ) @@ -17,7 +19,7 @@ export default function() { } const utilities = _.fromPairs( - _.map(flattenColorPalette(theme('placeholderColor')), (value, modifier) => { + _.map(colors, (value, modifier) => { return [ `.${e(`placeholder-${modifier}`)}::placeholder`, corePlugins('placeholderOpacity') diff --git a/src/plugins/stroke.js b/src/plugins/stroke.js index 0dd862a29..7f460a72a 100644 --- a/src/plugins/stroke.js +++ b/src/plugins/stroke.js @@ -3,8 +3,10 @@ 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) => { + _.map(colors, (value, modifier) => { return [ `.${e(`stroke-${modifier}`)}`, { diff --git a/src/plugins/textColor.js b/src/plugins/textColor.js index 89f8e0aa0..7a05d52c5 100644 --- a/src/plugins/textColor.js +++ b/src/plugins/textColor.js @@ -4,9 +4,11 @@ import withAlphaVariable from '../util/withAlphaVariable' export default function() { return function({ addUtilities, e, theme, variants, target, corePlugins }) { + const colors = flattenColorPalette(theme('textColor')) + if (target('textColor') === 'ie11') { const utilities = _.fromPairs( - _.map(flattenColorPalette(theme('textColor')), (value, modifier) => { + _.map(colors, (value, modifier) => { return [`.${e(`text-${modifier}`)}`, { color: value }] }) ) @@ -17,7 +19,7 @@ export default function() { } const utilities = _.fromPairs( - _.map(flattenColorPalette(theme('textColor')), (value, modifier) => { + _.map(colors, (value, modifier) => { return [ `.${e(`text-${modifier}`)}`, corePlugins('textOpacity') From 2f670a8699900fcc7ebb84a89548430b8fce37b3 Mon Sep 17 00:00:00 2001 From: Irene Lin Date: Thu, 7 May 2020 00:23:43 +1000 Subject: [PATCH 2/5] Sync alignment in const utilities --- src/plugins/backgroundColor.js | 5 ++++- src/plugins/borderColor.js | 5 ++++- src/plugins/fill.js | 4 +--- src/plugins/placeholderColor.js | 5 ++++- src/plugins/stroke.js | 4 +--- src/plugins/textColor.js | 5 ++++- 6 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/plugins/backgroundColor.js b/src/plugins/backgroundColor.js index d9a19dc52..c66f38a7d 100644 --- a/src/plugins/backgroundColor.js +++ b/src/plugins/backgroundColor.js @@ -9,7 +9,10 @@ export default function() { if (target('backgroundColor') === 'ie11') { const utilities = _.fromPairs( _.map(colors, (value, modifier) => { - return [`.${e(`bg-${modifier}`)}`, { 'background-color': value }] + return [ + `.${e(`bg-${modifier}`)}`, + { 'background-color': value }, + ] }) ) diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js index c87001768..250b345fb 100644 --- a/src/plugins/borderColor.js +++ b/src/plugins/borderColor.js @@ -9,7 +9,10 @@ export default function() { if (target('borderColor') === 'ie11') { const utilities = _.fromPairs( _.map(_.omit(colors, 'default'), (value, modifier) => { - return [`.${e(`border-${modifier}`)}`, { 'border-color': value }] + return [ + `.${e(`border-${modifier}`)}`, + { 'border-color': value }, + ] }) ) diff --git a/src/plugins/fill.js b/src/plugins/fill.js index 3540301cd..390ca6b41 100644 --- a/src/plugins/fill.js +++ b/src/plugins/fill.js @@ -9,9 +9,7 @@ export default function() { _.map(colors, (value, modifier) => { return [ `.${e(`fill-${modifier}`)}`, - { - fill: value, - }, + { fill: value }, ] }) ) diff --git a/src/plugins/placeholderColor.js b/src/plugins/placeholderColor.js index 9497af0e4..15b700a27 100644 --- a/src/plugins/placeholderColor.js +++ b/src/plugins/placeholderColor.js @@ -9,7 +9,10 @@ export default function() { if (target('placeholderColor') === 'ie11') { const utilities = _.fromPairs( _.map(colors, (value, modifier) => { - return [`.${e(`placeholder-${modifier}`)}::placeholder`, { color: value }] + return [ + `.${e(`placeholder-${modifier}`)}::placeholder`, + { color: value }, + ] }) ) diff --git a/src/plugins/stroke.js b/src/plugins/stroke.js index 7f460a72a..23ead8159 100644 --- a/src/plugins/stroke.js +++ b/src/plugins/stroke.js @@ -9,9 +9,7 @@ export default function() { _.map(colors, (value, modifier) => { return [ `.${e(`stroke-${modifier}`)}`, - { - stroke: value, - }, + { stroke: value }, ] }) ) diff --git a/src/plugins/textColor.js b/src/plugins/textColor.js index 7a05d52c5..430007b15 100644 --- a/src/plugins/textColor.js +++ b/src/plugins/textColor.js @@ -9,7 +9,10 @@ export default function() { if (target('textColor') === 'ie11') { const utilities = _.fromPairs( _.map(colors, (value, modifier) => { - return [`.${e(`text-${modifier}`)}`, { color: value }] + return [ + `.${e(`text-${modifier}`)}`, + { color: value }, + ] }) ) From a657a86b2dcb5cc36d88e9db3055df496358782a Mon Sep 17 00:00:00 2001 From: Irene Lin Date: Thu, 7 May 2020 00:24:30 +1000 Subject: [PATCH 3/5] Sync alignment in calls of withAlphaVariable --- src/plugins/textColor.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/plugins/textColor.js b/src/plugins/textColor.js index 430007b15..a1f193712 100644 --- a/src/plugins/textColor.js +++ b/src/plugins/textColor.js @@ -26,7 +26,11 @@ export default function() { return [ `.${e(`text-${modifier}`)}`, corePlugins('textOpacity') - ? withAlphaVariable({ color: value, property: 'color', variable: '--text-opacity' }) + ? withAlphaVariable({ + color: value, + property: 'color', + variable: '--text-opacity', + }) : { color: value }, ] }) From aa5b548705b92b4ed1d9a8b8a073a65e9e962639 Mon Sep 17 00:00:00 2001 From: Irene Lin Date: Thu, 7 May 2020 00:27:00 +1000 Subject: [PATCH 4/5] 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), ] }) ) From 797120c2bf9581e60155e9a110ecefe8069494ed Mon Sep 17 00:00:00 2001 From: Irene Lin Date: Thu, 7 May 2020 00:28:45 +1000 Subject: [PATCH 5/5] Fix style violations --- src/plugins/backgroundColor.js | 5 +---- src/plugins/borderColor.js | 5 +---- src/plugins/fill.js | 5 +---- src/plugins/placeholderColor.js | 5 +---- src/plugins/stroke.js | 5 +---- src/plugins/textColor.js | 5 +---- 6 files changed, 6 insertions(+), 24 deletions(-) diff --git a/src/plugins/backgroundColor.js b/src/plugins/backgroundColor.js index 141ee0342..2b129e949 100644 --- a/src/plugins/backgroundColor.js +++ b/src/plugins/backgroundColor.js @@ -24,10 +24,7 @@ export default function() { const utilities = _.fromPairs( _.map(colors, (value, modifier) => { - return [ - `.${e(`bg-${modifier}`)}`, - getProperties(value), - ] + return [`.${e(`bg-${modifier}`)}`, getProperties(value)] }) ) diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js index 7cf627aa4..ac855c382 100644 --- a/src/plugins/borderColor.js +++ b/src/plugins/borderColor.js @@ -24,10 +24,7 @@ export default function() { const utilities = _.fromPairs( _.map(_.omit(colors, 'default'), (value, modifier) => { - return [ - `.${e(`border-${modifier}`)}`, - getProperties(value), - ] + return [`.${e(`border-${modifier}`)}`, getProperties(value)] }) ) diff --git a/src/plugins/fill.js b/src/plugins/fill.js index 390ca6b41..ce0d208bb 100644 --- a/src/plugins/fill.js +++ b/src/plugins/fill.js @@ -7,10 +7,7 @@ export default function() { const utilities = _.fromPairs( _.map(colors, (value, modifier) => { - return [ - `.${e(`fill-${modifier}`)}`, - { fill: value }, - ] + return [`.${e(`fill-${modifier}`)}`, { fill: value }] }) ) diff --git a/src/plugins/placeholderColor.js b/src/plugins/placeholderColor.js index a80948501..fea66ba4b 100644 --- a/src/plugins/placeholderColor.js +++ b/src/plugins/placeholderColor.js @@ -24,10 +24,7 @@ export default function() { const utilities = _.fromPairs( _.map(colors, (value, modifier) => { - return [ - `.${e(`placeholder-${modifier}`)}::placeholder`, - getProperties(value), - ] + return [`.${e(`placeholder-${modifier}`)}::placeholder`, getProperties(value)] }) ) diff --git a/src/plugins/stroke.js b/src/plugins/stroke.js index 23ead8159..1944a84e9 100644 --- a/src/plugins/stroke.js +++ b/src/plugins/stroke.js @@ -7,10 +7,7 @@ export default function() { const utilities = _.fromPairs( _.map(colors, (value, modifier) => { - return [ - `.${e(`stroke-${modifier}`)}`, - { stroke: value }, - ] + return [`.${e(`stroke-${modifier}`)}`, { stroke: value }] }) ) diff --git a/src/plugins/textColor.js b/src/plugins/textColor.js index 219e8ac85..f52c27dcd 100644 --- a/src/plugins/textColor.js +++ b/src/plugins/textColor.js @@ -24,10 +24,7 @@ export default function() { const utilities = _.fromPairs( _.map(colors, (value, modifier) => { - return [ - `.${e(`text-${modifier}`)}`, - getProperties(value), - ] + return [`.${e(`text-${modifier}`)}`, getProperties(value)] }) )