Skip to content

Chaining changes the color in place causing side effects #276

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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