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

Open Beginner friendly
  • Is something wrong?
#49,751 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
88/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start with the hsl branch in packages/mui-system/src/colorManipulator/colorManipulator.ts, then find the colorManipulator tests for recomposeColor. Check that repeated calls with the same hsl object return the same CSS string and leave its values unchanged; done when the regression test passes.

Written by the indexing model from the issue text.

Description

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

Dominant language
JavaScript
Stars
99.3k
Forks
32.5k
Avg merge
2d 1h
Merged PRs (30d)
199

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mui/material-ui

All issues in mui/material-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.