thinkThrooIn this article, we analyse withAlpha utitlity function in Tailwind CSS source code.
/**
* Apply opacity to a color using `color-mix`.
*/
export function withAlpha(value: string, alpha: string): string {
if (alpha === null) return value
// Convert numeric values (like `0.5`) to percentages (like `50%`) so they
// work properly with `color-mix`. Assume anything that isn't a number is
// safe to pass through as-is, like `var(--my-opacity)`.
let alphaAsNumber = Number(alpha)
if (!Number.isNaN(alphaAsNumber)) {
alpha = `${alphaAsNumber * 100}%`
}
// If the alpha value is a percentage, we can pass it directly to
// `color-mix()`. In any other case, e.g.: `var(…)`, `round(…)`, … we need to
// make sure it's a percentage.
else if (alpha[alpha.length - 1] !== '%') {
alpha = `calc(${alpha} * 100%)`
}
return `color-mix(in srgb, ${value} ${alpha}, transparent)`
}
The beauty about this utility function is that it comes with comments explaining what the code does.
// Convert numeric values (like `0.5`) to percentages (like `50%`) so they
// work properly with `color-mix`. Assume anything that isn't a number is
// safe to pass through as-is, like `var(--my-opacity)`.
let alphaAsNumber = Number(alpha)
if (!Number.isNaN(alphaAsNumber)) {
alpha = `${alphaAsNumber * 100}%`
}
First the alpha is converted to Number, withAlpha accepts alpha as a string and is assigned to a variable named alphaAsNumber
if alphaAsNumber is not a number, then this is converted to % by multiplying it with * 100.
// If the alpha value is a percentage, we can pass it directly to
// `color-mix()`. In any other case, e.g.: `var(…)`, `round(…)`, … we need to
// make sure it's a percentage.
else if (alpha[alpha.length - 1] !== '%') {
alpha = `calc(${alpha} * 100%)`
}
The way this above code snippet ensures that alpha value is a percentage is by checking if the item at last index is ‘%’, otherwise, it is multiplied with *100%.
and finally color-mix is returned.
return `color-mix(in srgb, ${value} ${alpha}, transparent)`
but you might be wondering what a color-mix is.
color-mix
The color-mix() functional notation takes two <color> values and returns the result of mixing them in a given colorspace by a given amount. — MDN documentation.
About us:
At Think Throo, we are on a mission to teach the advanced codebase architectural concepts used in open-source projects.
10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.
We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)
We also provide web development and technical writing services. Reach out to us at hello@thinkthroo.com to learn more!
