Support closures for colors in all circumstances (#2536)

Author: adamwathan

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