[system] recomposeColor() mutates the hsl color object passed to it

Abierto Apto para principiantes
  • ¿Algo no está bien?
#49,751 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
88/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Empieza por la rama hsl en packages/mui-system/src/colorManipulator/colorManipulator.ts y luego busca las pruebas de colorManipulator para recomposeColor. Comprueba que las llamadas repetidas con el mismo objeto hsl devuelvan la misma cadena CSS y dejen sus valores sin cambios; el trabajo estará terminado cuando pase la prueba de regresión.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

status: waiting for maintainer
Steps to reproduce

This is a pure function, so a snippet is enough. It runs in Node with @mui/material 9.5.0. The same code fails on master (0ca6dc6).

import { recomposeColor } from '@mui/material/styles';

const color = { type: 'hsl', values: [100, 50, 25] };

console.log(recomposeColor(color)); // 'hsl(100, 50%, 25%)'
console.log(recomposeColor(color)); // 'hsl(100, 50%%, 25%%)'
console.log(color.values); // [100, '50%%', '25%%']
Current behavior

For hsl and hsla colors, recomposeColor() writes the percent strings back into color.values. The second call with the same object returns hsl(100, 50%%, 25%%), which is not valid CSS. The object passed in is changed.

The cause is the hsl branch in packages/mui-system/src/colorManipulator/colorManipulator.ts:

} else if (type.includes('hsl')) {
  values[1] = `${values[1]}%`;
  values[2] = `${values[2]}%`;
}

The rgb and color() branches build a new array, so they do not have this problem.

Expected behavior

recomposeColor() returns hsl(100, 50%, 25%) each time and does not change the object passed to it, as it does for rgb and color() objects.

Context

decomposeColor() returns a color object as is, and the manipulators accept one, so the same object can reach recomposeColor() more than once.

I'm happy to send a PR with a test. The fix is to map the values in the hsl branch instead of assigning to them.

Your environment
  • @mui/material and @mui/system 9.5.0, and master at 0ca6dc6
  • Node.js 24
  • Not browser specific: the unit test fails in both jsdom and Chromium.

AI-assisted: found and reproduced with an AI coding agent; the example above was run locally.

Search keywords: recomposeColor hsl mutate values percent

Lenguaje dominante
JavaScript
Estrellas
99.3k
Forks
32.5k
Merge medio
2 d 1 h
PR fusionados (30 d)
199

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de mui/material-ui

Todos los issues de mui/material-ui

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.