Colourized log with `%c` break the output

ManUtopiK commented 10 months ago

Describe the bug

Making a complex log with color break the output of unplugin-turbo-console. Here the log of Nuxt DevTools :

console.log(
  `✨ %cNuxt DevTools %c Press Shift + ${isMac ? 'Option' : 'Alt'} + D to open DevTools`,
  'color: black; border-radius: 3px 0 0 3px; padding: 2px 2px 1px 10px; background: #00DC82',
  'border-radius: 0 3px 3px 0; padding: 2px 10px 1px 2px; background: #00DC8220',
  '',
)

And the output:

The reproduction doesn't start correctly. After pnpm install, stop the terminal witch ctrl+c and start nuxt with pnpm play:nuxt.

Reproduction

https://stackblitz.com/edit/github-vdn75x?file=examples%2Fnuxt%2Fapp.vue

System Info

System:
    OS: Linux 6.1 NixOS 23.11 (Tapir) 23.11 (Tapir)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 5.69 GB / 31.15 GB
    Container: Yes
    Shell: 5.9 - /run/current-system/sw/bin/zsh
  Binaries:
    Node: 20.9.0 - /run/current-system/sw/bin/node
    Yarn: 1.22.19 - ~/.local/share/npm/bin/yarn
    npm: 10.1.0 - /run/current-system/sw/bin/npm
    pnpm: 8.12.0 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chromium: 120.0.6099.109

Used Package Manager

pnpm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guide.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
[X] The provided reproduction is a minimal reproducible of the bug.

stackblitz[bot] commented 10 months ago

Start a new pull request in StackBlitz Codeflow.

github-vdn75x (Open reproduction)

yuyinws commented 10 months ago

It's not easy to handle this situation on one console expression. I think we can use console.group to modify transform logic：

// generated by plugin
console.group()
console.log("%c🚀 main.ts:6%c🔦 http://localhost:3090/client#c3JjL21haW4udHM6Njox", "padding:2px 5px; border-radius:3px 0 0 3px;margin-bottom:5px;color: #fff; background: #3178C6", "background: #00DC8250;padding:2px 5px;border-radius:0 3px 3px 0;margin-bottom:5px");

// Original console.log
console.log('%cLog Message', 'color: orange');

// generated by plugin
console.groupEnd()

It will render like this:

WDYT 👀 ?

yuyinws commented 10 months ago

Resolved on https://github.com/unplugin/unplugin-turbo-console/commit/086c2f3c94c69a569d0ab1ec579c2792e17949c1

unplugin / unplugin-turbo-console