diff --git a/CHANGELOG.md b/CHANGELOG.md index a3dcfb173b58..287eb9409261 100644 --- 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 index 1a4a9af47327..6fdc939f181d 100644 --- 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 index 420f9aa2ad45..d47dd275b0c0 100644 --- 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})` }), } }