Support closures for colors in all circumstances (#2536)

__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',
+        },
+      },
+      [],
+    ],
+  ])
+})

__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',
+        },
+      },
+      [],
+    ],
+  ])
+})

__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',
+        },
+      },
+      [],
+    ],
+  ])
+})

__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',
+        },
+      },
+      [],
+    ],
+  ])
+})

__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',
+        },
+      },
+      [],
+    ],
+  ])
+})

__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',
+        },
+      },
+      [],
+    ],
+  ])
+})

__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',
+        },
+      },
+      [],
+    ],
+  ])
+})

__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)

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(

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(

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(

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) }]
       })
     )
 

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'),
             },
           ],
         ]

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(

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) }]
       })
     )
 

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(

src/util/toColorValue.js

@@ -0,0 +1,5 @@
+import _ from 'lodash'
+
+export default function toColorValue(maybeFunction) {
+  return _.isFunction(maybeFunction) ? maybeFunction({}) : maybeFunction
+}