withAlpha utility in Tailwind CSS source code.
In 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 me:
Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com
My Github — https://github.com/ramu-narasinga
My website — https://ramunarasinga.com
My Youtube channel — https://www.youtube.com/@thinkthroo
Learning platform — https://thinkthroo.com
Codebase Architecture — https://app.thinkthroo.com/architecture
Best practices — https://app.thinkthroo.com/best-practices
Production-grade projects — https://app.thinkthroo.com/production-grade-projects