Alright, so I'm working on a custom vue component and one of its props is a color.
I would like to be able to match this color to all possible use cases. The ones I can think of are
white, black, etc.var(--pa-primary-accent)For the first 2 cases, just passing the color and using it would work, however for the third, if the user just passes in pa-primary-accent then I have to append it with the var(--${color}). How would you have something that is fully compaitable with both cases?
This is an excerpt of the code:
// Current implementation, breaks if user passes `white` for example.
computed: {
style () {
return `
background-color: var(--${this.bgColor});
`
},
So an approach to fixing this as proposed by @vrugtehagel is to use fallbacks, I have done this for all my color related CSS values and it worked fine.
Example:
background-color: var(--${this.bgColor}, ${this.bgColor});
Bear in mind this will always prioritize the custom -- prefixed values if a normal value with the same name is valid.