Replace Chalk with Kleur

[dgrammatiko]

A simple switch of a cli dependency

Why?

• Kleur is smaller (theoretically better(?) for the serverless)

• Kleur is more performant

• it has no further dependencies

• Micro optimisation? Maybe, maybe not...

[zachleat]

Seems great to me, thanks!

[TigersWay]

There's quite some choice to replace chalk. But is that the best one really? I found quite different numbers around... Do you want small or fast?

[dgrammatiko]

@TigersWay small size and no dependencies were my goals here but I guess the rabbit hole is deeper. So, some further research on styling the cli revealed these options:

• Chalk has 2 dependencies, it's the most popular pkg
  

• kleur has 0 dependencies, it's also popular and has better performance
  

• But colorette has also 0 dependencies, it's smaller and more performant (according their benchmarks)
  

• But then picocolors has also 0 dependencies, it's even smaller more performant and used by PostCSS and Autoprefixer
  

@zachleat since all these are interchangeable packages let me know if you want me to create a new PR switching to picocolors (or any other package that you think it's a better fit)

[TigersWay]

@dgrammatiko You have them all 😄 Thanks!

colorette and the recent picolors are clearly both small and much faster than chalk, which is A LOT more used.....
Another choice to make 😇

[pdehaan]

This is giving me babel/babel#13783 (and eslint/eslint#15102) flashbacks.

I think the best point in the Babel thread was Sindre's comment: babel/babel#13783 (comment)

Also, Chalk is such a common dependency that it's usually already somewhere in the dependency tree on most projects anyway. So Chalk is often 0 kB.

Also interesting is that if you do a brand new Eleventy 0.12.1 install, the node_modules directory is ~76MB (on macOS at least), so not sure we we're saving by reducing the package size by 5KB.

Looking at the dependency tree, it looks like @11ty/eleventy 0.12.x includes chalk 3 times, but all very different versions.

npm ls chalk

tmp@1.0.0 /private/tmp/11ty-size
└─┬ @11ty/eleventy@0.12.1
  ├─┬ browser-sync@2.27.7
  │ └─┬ eazy-logger@3.1.0
  │   └─┬ tfunk@4.0.0
  │     └── chalk@1.1.3
  ├── chalk@4.1.2
  └─┬ time-require@0.1.2
    └── chalk@0.4.0

And @11ty/eleventy 1.0.0-beta.8 includes chalk 4 times, each with a different major version number.

npm ls chalk

11ty-size@1.0.0 /private/tmp/11ty-size
└─┬ @11ty/eleventy@1.0.0-beta.8
  ├─┬ browser-sync@2.27.7
  │ └─┬ eazy-logger@3.1.0
  │   └─┬ tfunk@4.0.0
  │     └── chalk@1.1.3
  ├── chalk@4.1.2
  ├─┬ ejs@3.1.6
  │ └─┬ jake@10.8.2
  │   └── chalk@2.4.2
  └─┬ time-require@0.1.2
    └── chalk@0.4.0

[dgrammatiko]

This is giving me babel/babel#13783 (and eslint/eslint#15102) flashbacks.

What have I done? 😒 I was genuinely unaware of these PRs...

And @11ty/eleventy 1.0.0-beta.8 includes chalk 4 times, each with a different major version number.

Yes, but that's due to other dependencies, as you already showcasing by the dep tree graph. Also if chalk was a direct dependency (as it was before this PR) there would be 5 copies of the library.

[zachleat]

Are we still okay that this PR was merged? I don’t think we need to belabor this too much, kleur seems like an improvement over chalk, is reasonably popular, and is maintained by a Cloudflare dev so it seems pretty safe to me.

[pdehaan]

No objections here. Looking at the dep trees above, it looks like chalk@4 wasn't already in the tree anyways. 👍