Skip to content

Chaining changes the color in place causing side effects #276

Open
@tgdn

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions