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

Allow colors to be defined as closures

Browse Source
This commit is contained in:
Haew 2020-05-01 05:22:52 +02:00
parent 67ec21e870
commit 109dec1681
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: variable => `rgba(0, 0, 0, var(${variable}))`,
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(variable),
}
}
try {
const [r, g, b, a] = toRgba(color)