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

Aperta Adatta ai principianti
  • Qualcosa non va?
#49,751 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
88/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia con il ramo hsl in packages/mui-system/src/colorManipulator/colorManipulator.ts, poi trova i test di colorManipulator per recomposeColor. Verifica che chiamate ripetute con lo stesso oggetto hsl restituiscano la stessa stringa CSS e lascino invariati i suoi valori; il lavoro è completato quando il test di regressione passa.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
JavaScript
Stelle
99.3k
Fork
32.5k
Merge medio
2g 1h
PR unite (30g)
199

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di mui/material-ui

Tutte le issue di mui/material-ui

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.