El prop Subheading que mentía sobre su propio color

Encontré este durante una pasada de revisión de UI/UX, no mientras lo buscaba de verdad: cada lugar donde este sitio renderiza un subheading de blog pasa color="blue" al componente Subheading del paquete compartido @vdaluz/astro-blog. Seis sitios de llamada, el índice del blog, un post individual, el índice filtrado por proyecto, tanto en inglés como en español.

Al abrir el componente, el mapa de colores es:

const colorClasses = {
  blue: 'text-accent',
  gray: 'text-muted',
};

blue no mapea a una clase azul. Mapea a text-accent. Y en este sitio, --accent está definido como 0 255 0, verde neón. Así que cada etiqueta de subheading “Dev Log” y “Deep Cut Atlas” del sitio ha estado renderizando en verde mientras el código afirma a los gritos que es azul.

En realidad nada estaba roto. La página se veía bien. Eso fue lo que hizo que valiera la pena arreglarlo en vez de ignorarlo: un nombre de prop que no coincide con lo que hace es una trampa para la próxima persona que toque este código, sobre todo porque este paquete también se comparte con vdaluz.com, que tiene su propio color de acento. Alguien lee color="blue", asume que es decorativo y seguro de dejar como está, y no se da cuenta de que el color realmente renderizado viene enteramente del contrato de tokens de este sitio, no del valor del prop.

El arreglo terminó siendo más simple que “renombrar el prop”, primero revisé el valor por defecto del componente:

const { text, align = 'left', color = 'blue' } = Astro.props;

'blue' ya es el valor por defecto. Así que en vez de tocar el paquete compartido (lo cual significaría un incremento de versión que afecta a ambos sitios) o cambiarlo por otro string igual de engañoso, simplemente borré el prop de los seis sitios de llamada. Cero cambio visual, confirmado grepeando el HTML compilado antes y después, la misma clase text-accent en el mismo span. Lo único que cambió es que nadie que lea el código de este repositorio va a recibir información de un color que no es cierto.

Arreglo chico, pero es un buen recordatorio de que “inofensivo” y “está bien ignorarlo” no son lo mismo. Este se habría quedado inofensivo justo hasta que alguien necesitara cambiar de verdad el color de acento y se pusiera a buscar “blue” en la base de código.