Merge branch 'fix/color-object-closures' of git://github.com/innocenzi/tailwindcss into innocenzi-fix/color-object-closures

Author: adamwathan

__tests__/plugins/gradientColorStops.test.js

@@ -0,0 +1,38 @@
+import postcss from 'postcss'
+import tailwind from '../../src/index'
+
+test('opacity variables are given to colors defined as closures', () => {
+  return postcss([
+    tailwind({
+      theme: {
+        colors: {
+          primary: ({ opacityVariable }) => `rgba(31,31,31,var(${opacityVariable},1))`,
+        },
+      },
+      variants: {
+        gradientColorStops: [],
+      },
+      corePlugins: ['gradientColorStops'],
+    }),
+  ])
+    .process('@tailwind utilities', { from: undefined })
+    .then(result => {
+      const expected = `
+				.from-primary {
+					--gradient-from-color: rgba(31,31,31,var(--gradient-from-opacity,1));
+					--gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(255, 255, 255, 0))
+				}
+		
+				.via-primary {
+					--gradient-via-color: rgba(31,31,31,var(--gradient-via-opacity,1));
+					--gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0))
+				}
+		
+				.to-primary {
+					--gradient-to-color: rgba(31,31,31,var(--gradient-to-opacity,1))
+				}
+      `
+
+      expect(result.css).toMatchCss(expected)
+    })
+})

src/plugins/gradientColorStops.js

@@ -12,6 +12,16 @@ export default function() {
 
     const utilities = _(colors)
       .map((value, modifier) => {
+        const getColorValue = (color, type) => {
+          if (_.isFunction(color)) {
+            return value({
+              opacityVariable: `--gradient-${type}-opacity`,
+            })
+          }
+
+          return color
+        }
+
         const transparentTo = (() => {
           try {
             const [r, g, b] = toRgba(value)
@@ -25,21 +35,21 @@ export default function() {
           [
             `.${e(`from-${modifier}`)}`,
             {
-              '--gradient-from-color': value,
+              '--gradient-from-color': getColorValue(value, 'from'),
               '--gradient-color-stops': `var(--gradient-from-color), var(--gradient-to-color, ${transparentTo})`,
             },
           ],
           [
             `.${e(`via-${modifier}`)}`,
             {
-              '--gradient-via-color': value,
+              '--gradient-via-color': getColorValue(value, 'via'),
               '--gradient-color-stops': `var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, ${transparentTo})`,
             },
           ],
           [
             `.${e(`to-${modifier}`)}`,
             {
-              '--gradient-to-color': value,
+              '--gradient-to-color': getColorValue(value, 'to'),
             },
           ],
         ]

src/util/flattenColorPalette.js

@@ -3,7 +3,7 @@ import _ from 'lodash'
 export default function flattenColorPalette(colors) {
   const result = _(colors)
     .flatMap((color, name) => {
-      if (!_.isObject(color)) {
+      if (_.isFunction(color) || !_.isObject(color)) {
         return [[name, color]]
       }