archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1676 from innocenzi/color-closure

Browse Source 
Allow colors to be defined as closures
This commit is contained in:
Adam Wathan 2020-08-15 09:09:46 -04:00 committed by GitHub
commit 7371ea992b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
__tests__/withAlphaVariable.test.js
View File

@ -95,3 +95,15 @@ test('it ignores colors that already have an alpha channel', () => {
'background-color': 'hsla(240, 100%, 50%, 0.5)',
})
})
test('it allows a closure to be passed', () => {
expect(
withAlphaVariable({
color: ({ opacityVariable }) => `rgba(0, 0, 0, var(${opacityVariable}))`,
property: 'background-color',
variable: '--bg-opacity',
})
).toEqual({
'background-color': 'rgba(0, 0, 0, var(--bg-opacity))',
})
})

7
src/util/withAlphaVariable.js
View File

@ -1,4 +1,5 @@
import createColor from 'color'
import _ from 'lodash'
function hasAlpha(color) {
return (
@ -18,6 +19,12 @@ function toRgba(color) {
}
export default function withAlphaVariable({ color, property, variable }) {
if (_.isFunction(color)) {
return {
[property]: color({ opacityVariable: variable }),
}
}
try {
const [r, g, b, a] = toRgba(color)