Replace chalk.reset with stripAnsi in @vue/cli-shared-utils/lib/logge…

…r.js (#4842)

* Replace chalk.reset with stripAnsi 

When logging multi-line logs, the logger uses chalk.reset in order to get the length of the tag for the log. This is to achieve an indented layout of multi-line logs. chalk.reset only replaces styles such as bold and italic, not color. When the tag contains colors, the result is not pretty. Replacing with stripAnsi gets the intended result.

* Adds reference to strip-ansi

* Removes misplaces comma from package.json

* Removes extraneous semicolon

packages/@vue/cli-shared-utils/lib/logger.js

@@ -1,4 +1,5 @@
 const chalk = require('chalk')
+const stripAnsi = require('strip-ansi')
 const readline = require('readline')
 const padStart = require('string.prototype.padstart')
 const EventEmitter = require('events')
@@ -19,7 +20,7 @@ const format = (label, msg) => {
   return msg.split('\n').map((line, i) => {
     return i === 0
       ? `${label} ${line}`
-      : padStart(line, chalk.reset(label).length)
+      : padStart(line, stripAnsi(label).length)
   }).join('\n')
 }
 

packages/@vue/cli-shared-utils/package.json

@@ -31,7 +31,8 @@
     "request": "^2.87.0",
     "request-promise-native": "^1.0.8",
     "semver": "^6.1.0",
-    "string.prototype.padstart": "^3.0.0"
+    "string.prototype.padstart": "^3.0.0",
+    "strip-ansi" : "^6.0.0"
   },
   "publishConfig": {
     "access": "public"