From 35b7bb1bfc2456ad6400b08856e1a430b2c361ab Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 9 Oct 2020 21:03:23 -0400 Subject: [PATCH] Support closures for colors in all circumstances (#2536) --- __tests__/plugins/backgroundColor.test.js | 56 ++++++++++++++++++++++ __tests__/plugins/borderColor.test.js | 56 ++++++++++++++++++++++ __tests__/plugins/divideColor.test.js | 56 ++++++++++++++++++++++ __tests__/plugins/fill.test.js | 56 ++++++++++++++++++++++ __tests__/plugins/placeholderColor.test.js | 56 ++++++++++++++++++++++ __tests__/plugins/stroke.test.js | 56 ++++++++++++++++++++++ __tests__/plugins/textColor.test.js | 56 ++++++++++++++++++++++ __tests__/util/invokePlugin.js | 11 +++++ src/plugins/backgroundColor.js | 5 +- src/plugins/borderColor.js | 5 +- src/plugins/divideColor.js | 5 +- src/plugins/fill.js | 3 +- src/plugins/gradientColorStops.js | 15 ++---- src/plugins/placeholderColor.js | 5 +- src/plugins/stroke.js | 3 +- src/plugins/textColor.js | 5 +- src/util/toColorValue.js | 5 ++ 17 files changed, 431 insertions(+), 23 deletions(-) create mode 100644 __tests__/plugins/backgroundColor.test.js create mode 100644 __tests__/plugins/borderColor.test.js create mode 100644 __tests__/plugins/divideColor.test.js create mode 100644 __tests__/plugins/fill.test.js create mode 100644 __tests__/plugins/placeholderColor.test.js create mode 100644 __tests__/plugins/stroke.test.js create mode 100644 __tests__/plugins/textColor.test.js create mode 100644 src/util/toColorValue.js diff --git a/__tests__/plugins/backgroundColor.test.js b/__tests__/plugins/backgroundColor.test.js new file mode 100644 index 000000000..41fe51a64 --- /dev/null +++ b/__tests__/plugins/backgroundColor.test.js @@ -0,0 +1,56 @@ +import invokePlugin from '../util/invokePlugin' +import plugin from '../../src/plugins/backgroundColor' + +test('defining color as a function', () => { + const config = { + target: 'relaxed', + theme: { + backgroundColor: { + black: ({ opacityVariable: _ }) => 'black', + }, + }, + variants: { + backgroundColor: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.bg-black': { + 'background-color': 'black', + }, + }, + [], + ], + ]) +}) + +test('defining color as a function in ie11 mode', () => { + const config = { + target: 'ie11', + theme: { + backgroundColor: { + black: ({ opacityVariable: _ }) => 'black', + }, + }, + variants: { + backgroundColor: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.bg-black': { + 'background-color': 'black', + }, + }, + [], + ], + ]) +}) diff --git a/__tests__/plugins/borderColor.test.js b/__tests__/plugins/borderColor.test.js new file mode 100644 index 000000000..b3efa95a2 --- /dev/null +++ b/__tests__/plugins/borderColor.test.js @@ -0,0 +1,56 @@ +import invokePlugin from '../util/invokePlugin' +import plugin from '../../src/plugins/borderColor' + +test('defining color as a function', () => { + const config = { + target: 'relaxed', + theme: { + borderColor: { + black: ({ opacityVariable: _ }) => 'black', + }, + }, + variants: { + borderColor: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.border-black': { + 'border-color': 'black', + }, + }, + [], + ], + ]) +}) + +test('defining color as a function in ie11 mode', () => { + const config = { + target: 'ie11', + theme: { + borderColor: { + black: ({ opacityVariable: _ }) => 'black', + }, + }, + variants: { + borderColor: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.border-black': { + 'border-color': 'black', + }, + }, + [], + ], + ]) +}) diff --git a/__tests__/plugins/divideColor.test.js b/__tests__/plugins/divideColor.test.js new file mode 100644 index 000000000..d09609fb2 --- /dev/null +++ b/__tests__/plugins/divideColor.test.js @@ -0,0 +1,56 @@ +import invokePlugin from '../util/invokePlugin' +import plugin from '../../src/plugins/divideColor' + +test('defining color as a function', () => { + const config = { + target: 'relaxed', + theme: { + divideColor: { + black: ({ opacityVariable: _ }) => 'black', + }, + }, + variants: { + divideColor: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.divide-black > :not(template) ~ :not(template)': { + 'border-color': 'black', + }, + }, + [], + ], + ]) +}) + +test('defining color as a function in ie11 mode', () => { + const config = { + target: 'ie11', + theme: { + divideColor: { + black: ({ opacityVariable: _ }) => 'black', + }, + }, + variants: { + divideColor: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.divide-black > :not(template) ~ :not(template)': { + 'border-color': 'black', + }, + }, + [], + ], + ]) +}) diff --git a/__tests__/plugins/fill.test.js b/__tests__/plugins/fill.test.js new file mode 100644 index 000000000..8093d1b7d --- /dev/null +++ b/__tests__/plugins/fill.test.js @@ -0,0 +1,56 @@ +import invokePlugin from '../util/invokePlugin' +import plugin from '../../src/plugins/fill' + +test('defining color as a function', () => { + const config = { + target: 'relaxed', + theme: { + fill: { + black: ({ opacityVariable: _ }) => 'black', + }, + }, + variants: { + fill: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.fill-black': { + fill: 'black', + }, + }, + [], + ], + ]) +}) + +test('defining color as a function in ie11 mode', () => { + const config = { + target: 'ie11', + theme: { + fill: { + black: ({ opacityVariable: _ }) => 'black', + }, + }, + variants: { + fill: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.fill-black': { + fill: 'black', + }, + }, + [], + ], + ]) +}) diff --git a/__tests__/plugins/placeholderColor.test.js b/__tests__/plugins/placeholderColor.test.js new file mode 100644 index 000000000..513222f8c --- /dev/null +++ b/__tests__/plugins/placeholderColor.test.js @@ -0,0 +1,56 @@ +import invokePlugin from '../util/invokePlugin' +import plugin from '../../src/plugins/placeholderColor' + +test('defining color as a function', () => { + const config = { + target: 'relaxed', + theme: { + placeholderColor: { + black: ({ opacityVariable: _ }) => 'black', + }, + }, + variants: { + placeholderColor: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.placeholder-black::placeholder': { + color: 'black', + }, + }, + [], + ], + ]) +}) + +test('defining color as a function in ie11 mode', () => { + const config = { + target: 'ie11', + theme: { + placeholderColor: { + black: ({ opacityVariable: _ }) => 'black', + }, + }, + variants: { + placeholderColor: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.placeholder-black::placeholder': { + color: 'black', + }, + }, + [], + ], + ]) +}) diff --git a/__tests__/plugins/stroke.test.js b/__tests__/plugins/stroke.test.js new file mode 100644 index 000000000..b3091ea0b --- /dev/null +++ b/__tests__/plugins/stroke.test.js @@ -0,0 +1,56 @@ +import invokePlugin from '../util/invokePlugin' +import plugin from '../../src/plugins/stroke' + +test('defining color as a function', () => { + const config = { + target: 'relaxed', + theme: { + stroke: { + black: ({ opacityVariable: _ }) => 'black', + }, + }, + variants: { + stroke: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.stroke-black': { + stroke: 'black', + }, + }, + [], + ], + ]) +}) + +test('defining color as a function in ie11 mode', () => { + const config = { + target: 'ie11', + theme: { + stroke: { + black: ({ opacityVariable: _ }) => 'black', + }, + }, + variants: { + stroke: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.stroke-black': { + stroke: 'black', + }, + }, + [], + ], + ]) +}) diff --git a/__tests__/plugins/textColor.test.js b/__tests__/plugins/textColor.test.js new file mode 100644 index 000000000..2bb0fb12f --- /dev/null +++ b/__tests__/plugins/textColor.test.js @@ -0,0 +1,56 @@ +import invokePlugin from '../util/invokePlugin' +import plugin from '../../src/plugins/textColor' + +test('defining color as a function', () => { + const config = { + target: 'relaxed', + theme: { + textColor: { + black: ({ opacityVariable: _ }) => 'black', + }, + }, + variants: { + textColor: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.text-black': { + color: 'black', + }, + }, + [], + ], + ]) +}) + +test('defining color as a function in ie11 mode', () => { + const config = { + target: 'ie11', + theme: { + textColor: { + black: ({ opacityVariable: _ }) => 'black', + }, + }, + variants: { + textColor: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + + expect(utilities).toEqual([ + [ + { + '.text-black': { + color: 'black', + }, + }, + [], + ], + ]) +}) diff --git a/__tests__/util/invokePlugin.js b/__tests__/util/invokePlugin.js index 7be75212a..e2569c6ae 100644 --- a/__tests__/util/invokePlugin.js +++ b/__tests__/util/invokePlugin.js @@ -28,6 +28,17 @@ export default function(plugin, config) { addUtilities(utilities, variants) { addedUtilities.push([utilities, variants]) }, + corePlugins(corePlugin) { + if (config.corePlugins === undefined) { + return false + } + + if (Array.isArray(config.corePlugins)) { + return config.corePlugins.includes(corePlugin) + } + + return config.corePlugins[corePlugin] !== false + }, } plugin(pluginApi) diff --git a/src/plugins/backgroundColor.js b/src/plugins/backgroundColor.js index 2b129e949..352ca8f13 100644 --- a/src/plugins/backgroundColor.js +++ b/src/plugins/backgroundColor.js @@ -1,6 +1,7 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' import withAlphaVariable from '../util/withAlphaVariable' +import toColorValue from '../util/toColorValue' export default function() { return function({ addUtilities, e, theme, variants, target, corePlugins }) { @@ -8,7 +9,7 @@ export default function() { const getProperties = value => { if (target('backgroundColor') === 'ie11') { - return { 'background-color': value } + return { 'background-color': toColorValue(value) } } if (corePlugins('backgroundOpacity')) { @@ -19,7 +20,7 @@ export default function() { }) } - return { 'background-color': value } + return { 'background-color': toColorValue(value) } } const utilities = _.fromPairs( diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js index ac855c382..4ab1d5b4f 100644 --- a/src/plugins/borderColor.js +++ b/src/plugins/borderColor.js @@ -1,5 +1,6 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' +import toColorValue from '../util/toColorValue' import withAlphaVariable from '../util/withAlphaVariable' export default function() { @@ -8,7 +9,7 @@ export default function() { const getProperties = value => { if (target('borderColor') === 'ie11') { - return { 'border-color': value } + return { 'border-color': toColorValue(value) } } if (corePlugins('borderOpacity')) { @@ -19,7 +20,7 @@ export default function() { }) } - return { 'border-color': value } + return { 'border-color': toColorValue(value) } } const utilities = _.fromPairs( diff --git a/src/plugins/divideColor.js b/src/plugins/divideColor.js index 5b8922ab1..e5f329981 100644 --- a/src/plugins/divideColor.js +++ b/src/plugins/divideColor.js @@ -1,5 +1,6 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' +import toColorValue from '../util/toColorValue' import withAlphaVariable from '../util/withAlphaVariable' export default function() { @@ -8,7 +9,7 @@ export default function() { const getProperties = value => { if (target('divideColor') === 'ie11') { - return { 'border-color': value } + return { 'border-color': toColorValue(value) } } if (corePlugins('divideOpacity')) { @@ -19,7 +20,7 @@ export default function() { }) } - return { 'border-color': value } + return { 'border-color': toColorValue(value) } } const utilities = _.fromPairs( diff --git a/src/plugins/fill.js b/src/plugins/fill.js index ce0d208bb..84bd170cd 100644 --- a/src/plugins/fill.js +++ b/src/plugins/fill.js @@ -1,5 +1,6 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' +import toColorValue from '../util/toColorValue' export default function() { return function({ addUtilities, e, theme, variants }) { @@ -7,7 +8,7 @@ export default function() { const utilities = _.fromPairs( _.map(colors, (value, modifier) => { - return [`.${e(`fill-${modifier}`)}`, { fill: value }] + return [`.${e(`fill-${modifier}`)}`, { fill: toColorValue(value) }] }) ) diff --git a/src/plugins/gradientColorStops.js b/src/plugins/gradientColorStops.js index b333dce34..1a167f92e 100644 --- a/src/plugins/gradientColorStops.js +++ b/src/plugins/gradientColorStops.js @@ -1,5 +1,6 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' +import toColorValue from '../util/toColorValue' import { toRgba } from '../util/withAlphaVariable' export default function() { @@ -12,14 +13,6 @@ export default function() { const utilities = _(colors) .map((value, modifier) => { - const getColorValue = color => { - if (_.isFunction(color)) { - return value({}) - } - - return color - } - const transparentTo = (() => { if (_.isFunction(value)) { return value({ opacityValue: 0 }) @@ -37,21 +30,21 @@ export default function() { [ `.${e(`from-${modifier}`)}`, { - '--gradient-from-color': getColorValue(value, 'from'), + '--gradient-from-color': toColorValue(value, 'from'), '--gradient-color-stops': `var(--gradient-from-color), var(--gradient-to-color, ${transparentTo})`, }, ], [ `.${e(`via-${modifier}`)}`, { - '--gradient-via-color': getColorValue(value, 'via'), + '--gradient-via-color': toColorValue(value, 'via'), '--gradient-color-stops': `var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, ${transparentTo})`, }, ], [ `.${e(`to-${modifier}`)}`, { - '--gradient-to-color': getColorValue(value, 'to'), + '--gradient-to-color': toColorValue(value, 'to'), }, ], ] diff --git a/src/plugins/placeholderColor.js b/src/plugins/placeholderColor.js index fea66ba4b..256f2d942 100644 --- a/src/plugins/placeholderColor.js +++ b/src/plugins/placeholderColor.js @@ -1,5 +1,6 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' +import toColorValue from '../util/toColorValue' import withAlphaVariable from '../util/withAlphaVariable' export default function() { @@ -8,7 +9,7 @@ export default function() { const getProperties = value => { if (target('placeholderColor') === 'ie11') { - return { color: value } + return { color: toColorValue(value) } } if (corePlugins('placeholderOpacity')) { @@ -19,7 +20,7 @@ export default function() { }) } - return { color: value } + return { color: toColorValue(value) } } const utilities = _.fromPairs( diff --git a/src/plugins/stroke.js b/src/plugins/stroke.js index 1944a84e9..43ab8fc69 100644 --- a/src/plugins/stroke.js +++ b/src/plugins/stroke.js @@ -1,5 +1,6 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' +import toColorValue from '../util/toColorValue' export default function() { return function({ addUtilities, e, theme, variants }) { @@ -7,7 +8,7 @@ export default function() { const utilities = _.fromPairs( _.map(colors, (value, modifier) => { - return [`.${e(`stroke-${modifier}`)}`, { stroke: value }] + return [`.${e(`stroke-${modifier}`)}`, { stroke: toColorValue(value) }] }) ) diff --git a/src/plugins/textColor.js b/src/plugins/textColor.js index f52c27dcd..d6417fcbf 100644 --- a/src/plugins/textColor.js +++ b/src/plugins/textColor.js @@ -1,5 +1,6 @@ import _ from 'lodash' import flattenColorPalette from '../util/flattenColorPalette' +import toColorValue from '../util/toColorValue' import withAlphaVariable from '../util/withAlphaVariable' export default function() { @@ -8,7 +9,7 @@ export default function() { const getProperties = value => { if (target('textColor') === 'ie11') { - return { color: value } + return { color: toColorValue(value) } } if (corePlugins('textOpacity')) { @@ -19,7 +20,7 @@ export default function() { }) } - return { color: value } + return { color: toColorValue(value) } } const utilities = _.fromPairs( diff --git a/src/util/toColorValue.js b/src/util/toColorValue.js new file mode 100644 index 000000000..a721d2c81 --- /dev/null +++ b/src/util/toColorValue.js @@ -0,0 +1,5 @@ +import _ from 'lodash' + +export default function toColorValue(maybeFunction) { + return _.isFunction(maybeFunction) ? maybeFunction({}) : maybeFunction +}