Pass opacityValue to gradient colors for transparency support, do not…

… pass opacityVariable since unused
tailwindlabs · Aug 19, 2020 · a7e19ca · a7e19ca
1 parent 28930f4
commit a7e19ca
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 13 deletions.
diff --git a/__tests__/plugins/gradientColorStops.test.js b/__tests__/plugins/gradientColorStops.test.js
@@ -6,30 +6,49 @@ test('opacity variables are given to colors defined as closures', () => {
     tailwind({
       theme: {
         colors: {
-          primary: ({ opacityVariable }) => `rgba(31,31,31,var(${opacityVariable},1))`,
+          primary: ({ opacityVariable, opacityValue }) => {
+            if (opacityValue !== undefined) {
+              return `rgba(31,31,31,${opacityValue})`
+            }
+
+            if (opacityVariable !== undefined) {
+              return `rgba(31,31,31,var(${opacityVariable},1))`
+            }
+
+            return `rgb(31,31,31)`
+          },
+        },
+        opacity: {
+          '50': '0.5',
         },
       },
       variants: {
+        textColor: [],
+        textOpacity: [],
         gradientColorStops: [],
       },
-      corePlugins: ['gradientColorStops'],
+      corePlugins: ['textColor', 'textOpacity', 'gradientColorStops'],
     }),
   ])
     .process('@tailwind utilities', { from: undefined })
     .then(result => {
       const expected = `
+        .text-primary {
+          color: rgba(31,31,31,var(--text-opacity,1))
+        }
+        .text-opacity-50 {
+          --text-opacity: 0.5
+        }
 				.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))
+					--gradient-from-color: rgb(31,31,31);
+					--gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(31, 31, 31, 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))
+					--gradient-via-color: rgb(31,31,31);
+					--gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(31, 31, 31, 0))
 				}
-		
 				.to-primary {
-					--gradient-to-color: rgba(31,31,31,var(--gradient-to-opacity,1))
+					--gradient-to-color: rgb(31,31,31)
 				}
       `
 

diff --git a/src/plugins/gradientColorStops.js b/src/plugins/gradientColorStops.js
@@ -12,17 +12,19 @@ export default function() {
 
     const utilities = _(colors)
       .map((value, modifier) => {
-        const getColorValue = (color, type) => {
+        const getColorValue = color => {
           if (_.isFunction(color)) {
-            return value({
-              opacityVariable: `--gradient-${type}-opacity`,
-            })
+            return value({})
           }
 
           return color
         }
 
         const transparentTo = (() => {
+          if (_.isFunction(value)) {
+            return value({ opacityValue: 0 })
+          }
+
           try {
             const [r, g, b] = toRgba(value)
             return `rgba(${r}, ${g}, ${b}, 0)`