Merge pull request #1676 from innocenzi/color-closure

Allow colors to be defined as closures
tailwindlabs · Aug 15, 2020 · 7371ea9 · 7371ea9
2 parents 1791768 + dbcac50
commit 7371ea9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/__tests__/withAlphaVariable.test.js b/__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))',
+  })
+})
diff --git a/src/util/withAlphaVariable.js b/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)