Muy bien, estoy trabajando en un componente vue personalizado y uno de sus accesorios es un color.
Me gustaría poder hacer coincidir este color con todos los casos de uso posibles. Los que puedo pensar son
white , black , etc.var(--pa-primary-accent) Para los primeros 2 casos, solo pasar el color y usarlo funcionaría, sin embargo, para el tercero, si el usuario solo pasa pa-primary-accent entonces tengo que agregarlo con var(--${color}) . ¿Cómo tendrías algo que sea totalmente compatible con ambos casos?
Este es un extracto del código:
// Current implementation, breaks if user passes `white` for example. computed: { style () { return ` background-color: var(--${this.bgColor}); ` },Entonces, un enfoque para solucionar esto según lo propuesto por @vrugtehagel es usar respaldos, lo hice para todos mis valores CSS relacionados con el color y funcionó bien.
Ejemplo: background-color: var(--${this.bgColor}, ${this.bgColor});
Tenga en cuenta que esto siempre dará prioridad a los valores prefijados -- si un valor normal con el mismo nombre es válido.