Pass full opacityValue always

tailwindlabs · Mar 17, 2021 · fe98cc3 · fe98cc3
1 parent af25d51
commit fe98cc3
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [2.0.4] - 2021-03-17
+
+## Fixed
+
+- Pass full `var(--bg-opacity)` value as `opacityValue` when defining colors as functions
+
 ## [2.0.3] - 2021-02-07
 
 ## Fixed
@@ -1330,7 +1336,8 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.3...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.4...HEAD
+[2.0.4]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.3...v2.0.4
 [2.0.3]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.2...v2.0.3
 [2.0.2]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.1...v2.0.2
 [2.0.1]: https://github.com/tailwindlabs/tailwindcss/compare/v2.0.0...v2.0.1

diff --git a/__tests__/withAlphaVariable.test.js b/__tests__/withAlphaVariable.test.js
@@ -107,4 +107,14 @@ test('it allows a closure to be passed', () => {
     '--tw-bg-opacity': '1',
     'background-color': 'rgba(0, 0, 0, var(--tw-bg-opacity))',
   })
+  expect(
+    withAlphaVariable({
+      color: ({ opacityValue }) => `rgba(0, 0, 0, ${opacityValue})`,
+      property: 'background-color',
+      variable: '--tw-bg-opacity',
+    })
+  ).toEqual({
+    '--tw-bg-opacity': '1',
+    'background-color': 'rgba(0, 0, 0, var(--tw-bg-opacity))',
+  })
 })
diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js
@@ -20,7 +20,7 @@ export default function withAlphaVariable({ color, property, variable }) {
   if (_.isFunction(color)) {
     return {
       [variable]: '1',
-      [property]: color({ opacityVariable: variable }),
+      [property]: color({ opacityVariable: variable, opacityValue: `var(${variable})` }),
     }
   }