Chaining changes the color in place causing side effects

[tgdn]

Version of tinycolor2: 1.6.0.

Chaining changes a color in place. Unsure whether this is me, but it seems odd to update the color in place: it causes side effects and forces the developer to redeclare the same "base" variable multiple times.

Example of the issue

const baseGray = tinycolor("#aaa");
const grayLight1 = baseGray.lighten(10).toRgbString();
const grayLight2 = baseGray.lighten(10).toRgbString();

console.log({ grayLight1, grayLight2 });
// { grayLight1: 'rgb(195, 195, 195)', grayLight2: 'rgb(221, 221, 221)' }
// Colors are not the same even though they both lighten the same base color

How is it possible to chain without updating the "base" color?

The only solution seems to be:

Alternative solution

const grayLight1 = tinycolor("#aaa").lighten(10).toRgbString();
const grayLight2 = tinycolor("#aaa").lighten(10).toRgbString();

console.log({ grayLight1, grayLight2 });
// { grayLight1: 'rgb(195, 195, 195)', grayLight2: 'rgb(195, 195, 195)' }

But that would defy the purpose of instantiating one base variable that can be used as a base color.