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
tailwindlabs · Oct 7, 2020 · f3893d1 · f3893d1
1 parent 2f9e669
commit f3893d1
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 0 deletions.
diff --git a/__tests__/plugins/gradientColorStops.test.js b/__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 {

diff --git a/__tests__/withAlphaVariable.test.js b/__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))',
   })
 })
diff --git a/src/util/withAlphaVariable.js b/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 }),
     }
   }