diff --git a/CHANGELOG.md b/CHANGELOG.md index b17483902099..8d1821223058 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Nothing yet! +## [1.8.13] - 2020-10-09 + +### Fixed + +- Support defining colors as closures even when opacity variables are not supported ([#2536](https://github.com/tailwindlabs/tailwindcss/pull/2515)) + +## [1.8.12] - 2020-10-07 + +### Fixed + +- Reset color opacity variable in utilities generated using closure colors ([#2515](https://github.com/tailwindlabs/tailwindcss/pull/2515)) + ## [1.8.11] - 2020-10-06 - Make `tailwindcss.plugin` work in ESM environments for reasons diff --git a/__tests__/plugins/backgroundColor.test.js b/__tests__/plugins/backgroundColor.test.js new file mode 100644 index 000000000000..41fe51a649f1 --- /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 000000000000..b3efa95a2389 --- /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 000000000000..d09609fb2f68 --- /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 000000000000..8093d1b7d318 --- /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 000000000000..513222f8c54d --- /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 000000000000..b3091ea0bb18 --- /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 000000000000..2bb0fb12f2ee --- /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 7be75212a329..e2569c6ae7b0 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/package.json b/package.json index 204f6cb9eae2..f7cb3e09a3dc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tailwindcss", - "version": "1.8.12", + "version": "1.8.13", "description": "A utility-first CSS framework for rapidly building custom user interfaces.", "license": "MIT", "main": "lib/index.js", diff --git a/src/plugins/backgroundColor.js b/src/plugins/backgroundColor.js index 2b129e949bb3..352ca8f13c34 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 ac855c382bbf..4ab1d5b4f18c 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 5b8922ab1092..e5f329981793 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 ce0d208bbf0b..84bd170cda8c 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 b333dce34119..1a167f92e6d5 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 fea66ba4b151..256f2d942ba3 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 1944a84e914b..43ab8fc698a6 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 f52c27dcd968..d6417fcbf9a0 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 000000000000..a721d2c81961 --- /dev/null +++ b/src/util/toColorValue.js @@ -0,0 +1,5 @@ +import _ from 'lodash' + +export default function toColorValue(maybeFunction) { + return _.isFunction(maybeFunction) ? maybeFunction({}) : maybeFunction +}