Doesn't Play Nice with Chalk Tagged Template Literal

[shellscape]

It would seem that when using chalk tagged template literals (I haven't tested using chalk straight up in template literals) the formatting for meow's help goes awry.

Test snippet:

const cli = meow(chalk`
{underline Usage}
  $ mocha-chrome <file.html> [options]\n

{underline Options}
  --mocha      A JSON string representing a config object to pass to Mocha
  --log-level  Specify a log level; trace, debug, info, warn, error
  --no-colors  Disable colors in Mocha's output
  --reporter   Specify the Mocha reporter to use
  --timeout    Specify the test startup timeout to use

{underline Examples}
  $ mocha-chrome test.html --no-colors
  $ mocha-chrome test.html --reporter dot
  $ mocha-chrome test.html --mocha '\{"ui":"tdd"\}'
`);

Results in:

→ bin/mocha-chrome --help

  ☕  Run Mocha tests using Google Chrome in Node.js

  Usage
    $ mocha-chrome <file.html> [options]n
  Options
    --mocha      A JSON string representing a config object to pass to Mocha
    --log-level  Specify a log level; trace, debug, info, warn, error
    --no-colors  Disable colors in Mocha's output
    --reporter   Specify the Mocha reporter to use
    --timeout    Specify the test startup timeout to usenn
  Examples
    $ mocha-chrome test.html --no-colors
    $ mocha-chrome test.html --reporter dot
    $ mocha-chrome test.html --mocha '{"ui":"tdd"}'

Notice the lack of spacing between sections, which is present in the template literal passed to meow. If I double the spaces between the sections in the string, then I get the expected one space between sections in the output.

Now, if I go with this plain, non-chalk string:

const cli = meow(`
Usage
  $ mocha-chrome <file.html> [options]\n

Options
  --mocha      A JSON string representing a config object to pass to Mocha
  --log-level  Specify a log level; trace, debug, info, warn, error
  --no-colors  Disable colors in Mocha's output
  --reporter   Specify the Mocha reporter to use
  --timeout    Specify the test startup timeout to use

Examples
  $ mocha-chrome test.html --no-colors
  $ mocha-chrome test.html --reporter dot
  $ mocha-chrome test.html --mocha '\{"ui":"tdd"\}'
`);

I get the output I would expect:

→ bin/mocha-chrome --help logLevel   

  ☕  Run Mocha tests using Google Chrome in Node.js

  Usage
    $ mocha-chrome <file.html> [options]

  Options
    --mocha      A JSON string representing a config object to pass to Mocha
    --log-level  Specify a log level; trace, debug, info, warn, error
    --no-colors  Disable colors in Mocha's output
    --reporter   Specify the Mocha reporter to use
    --timeout    Specify the test startup timeout to use

  Example
    $ mocha-chrome test.html --no-colors
    $ mocha-chrome test.html --reporter dot
    $ mocha-chrome test.html --mocha '{"ui":"tdd"}'

I haven't had a chance to look at the code, but my guess is that it's not considering color/formatting codes when doing it's thing on the whitespace.

[sindresorhus]

What makes you say it's a Meow bug and not just Chalk?

[shellscape]

Could be 😄 wanted to log the issue, and since I've not run into that problem with chalk in raw output in other situations before, it seemed the logical choice.

[sindresorhus]

But did you try that Chalk call without Meow?

[sholladay]

This was indeed a bug in chalk 2.0.0 and 2.0.1. It was fixed in chalk 2.1.0.

To update: npm install chalk