TinyColor icon indicating copy to clipboard operation
TinyColor copied to clipboard

Chaining changes the color in place causing side effects

Open tgdn opened this issue 1 year ago • 1 comments

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.

tgdn avatar Jun 18 '24 09:06 tgdn

我也遇到了,我发现了克隆,于是用的克隆再修改

zw-store avatar Sep 25 '24 09:09 zw-store