tailwindcss/src/util/withAlphaVariable.js
Jordan Pittman 64b4e6df7b
Replace rgb and hsl helpers with <alpha-value> placeholder for colors with custom properties (#8501)
* implement <alpha-value>

* remove `rgb`/`hsl` helpers, use `<alpha-value>` instead

* never pass undefined to `withAlphaValue`

* WIP

* WIP

* WIP

* WIP

* Update changelog

* Cleanup

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2022-06-02 10:21:20 -04:00

49 lines
1.2 KiB
JavaScript

import { parseColor, formatColor } from './color'
export function withAlphaValue(color, alphaValue, defaultValue) {
if (typeof color === 'function') {
return color({ opacityValue: alphaValue })
}
let parsed = parseColor(color, { loose: true })
if (parsed === null) {
return defaultValue
}
return formatColor({ ...parsed, alpha: alphaValue })
}
export default function withAlphaVariable({ color, property, variable }) {
let properties = [].concat(property)
if (typeof color === 'function') {
return {
[variable]: '1',
...Object.fromEntries(
properties.map((p) => {
return [p, color({ opacityVariable: variable, opacityValue: `var(${variable})` })]
})
),
}
}
const parsed = parseColor(color)
if (parsed === null) {
return Object.fromEntries(properties.map((p) => [p, color]))
}
if (parsed.alpha !== undefined) {
// Has an alpha value, return color as-is
return Object.fromEntries(properties.map((p) => [p, color]))
}
return {
[variable]: '1',
...Object.fromEntries(
properties.map((p) => {
return [p, formatColor({ ...parsed, alpha: `var(${variable})` })]
})
),
}
}