Merge pull request tailwindlabs#1676 from innocenzi/color-closure

Allow colors to be defined as closures

Author: adamwathan

__tests__/withAlphaVariable.test.js

@@ -95,3 +95,15 @@ test('it ignores colors that already have an alpha channel', () => {
     'background-color': 'hsla(240, 100%, 50%, 0.5)',
   })
 })
+
+test('it allows a closure to be passed', () => {
+  expect(
+    withAlphaVariable({
+      color: ({ opacityVariable }) => `rgba(0, 0, 0, var(${opacityVariable}))`,
+      property: 'background-color',
+      variable: '--bg-opacity',
+    })
+  ).toEqual({
+    'background-color': 'rgba(0, 0, 0, var(--bg-opacity))',
+  })
+})

src/util/withAlphaVariable.js

@@ -1,4 +1,5 @@
 import createColor from 'color'
+import _ from 'lodash'
 
 function hasAlpha(color) {
   return (
@@ -18,6 +19,12 @@ function toRgba(color) {
 }
 
 export default function withAlphaVariable({ color, property, variable }) {
+  if (_.isFunction(color)) {
+    return {
+      [property]: color({ opacityVariable: variable }),
+    }
+  }
+
   try {
     const [r, g, b, a] = toRgba(color)