Set color opacity variable when colors are defined as functions (#2515)

* Always set color opacity variable, even if color cannot be parsed

* Only set color opacity when it might be used

Author: adamwathan

__tests__/plugins/gradientColorStops.test.js

@@ -34,6 +34,7 @@ test('opacity variables are given to colors defined as closures', () => {
     .then(result => {
       const expected = `
         .text-primary {
+          --text-opacity: 1;
           color: rgba(31,31,31,var(--text-opacity,1))
         }
         .text-opacity-50 {

__tests__/withAlphaVariable.test.js

@@ -104,6 +104,7 @@ test('it allows a closure to be passed', () => {
       variable: '--bg-opacity',
     })
   ).toEqual({
+    '--bg-opacity': '1',
     'background-color': 'rgba(0, 0, 0, var(--bg-opacity))',
   })
 })

src/util/withAlphaVariable.js

@@ -21,6 +21,7 @@ export function toRgba(color) {
 export default function withAlphaVariable({ color, property, variable }) {
   if (_.isFunction(color)) {
     return {
+      [variable]: '1',
       [property]: color({ opacityVariable: variable }),
     }
   }