From 46eeabca7ed4aaf76f7fe9d636a2a35d7df9f196 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 16 May 2017 16:45:12 +0100
Subject: [PATCH] Tweak colors for better contrast on Windows (#2180)
---
packages/react-dev-utils/eslintFormatter.js | 4 +--
packages/react-scripts/scripts/start.js | 33 ++++++++++++-------
.../scripts/utils/createWebpackCompiler.js | 6 ++--
3 files changed, 26 insertions(+), 17 deletions(-)
diff --git a/packages/react-dev-utils/eslintFormatter.js b/packages/react-dev-utils/eslintFormatter.js
index 2e2debbdd..a051b9c5b 100644
--- a/packages/react-dev-utils/eslintFormatter.js
+++ b/packages/react-dev-utils/eslintFormatter.js
@@ -45,9 +45,9 @@ function formatter(results) {
messages = messages.filter(m => m[2] === 'error');
}
- // add color to messageTypes
+ // add color to rule keywords
messages.forEach(m => {
- m[3] = m[2] === 'error' ? chalk.red(m[3]) : chalk.yellow(m[3]);
+ m[4] = m[2] === 'error' ? chalk.red(m[4]) : chalk.yellow(m[4]);
m.splice(2, 1);
});
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
index e5768fbbd..fb53543aa 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -55,22 +55,35 @@ const HOST = process.env.HOST || '0.0.0.0';
function run(port) {
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
- const formatUrl = hostname =>
- url.format({ protocol, hostname, port, pathname: '/' });
+ const formatUrl = hostname => url.format({
+ protocol,
+ hostname,
+ port,
+ pathname: '/',
+ });
+ const prettyPrintUrl = hostname => url.format({
+ protocol,
+ hostname,
+ port: chalk.bold(port),
+ pathname: '/',
+ });
const isUnspecifiedAddress = HOST === '0.0.0.0' || HOST === '::';
- let prettyHost, lanAddress;
+ let prettyHost, lanAddress, prettyLanUrl;
if (isUnspecifiedAddress) {
prettyHost = 'localhost';
try {
lanAddress = address.ip();
+ if (lanAddress) {
+ prettyLanUrl = prettyPrintUrl(lanAddress);
+ }
} catch (_e) {
// ignored
}
} else {
prettyHost = HOST;
}
- const prettyUrl = formatUrl(prettyHost);
+ const prettyLocalUrl = prettyPrintUrl(prettyHost);
// Create a webpack compiler that is configured with custom messages.
const compiler = createWebpackCompiler(
@@ -85,15 +98,11 @@ function run(port) {
);
console.log();
- if (isUnspecifiedAddress && lanAddress) {
- console.log(
- ` ${chalk.bold('Local:')} ${chalk.cyan(prettyUrl)}`
- );
- console.log(
- ` ${chalk.bold('On Your Network:')} ${chalk.cyan(formatUrl(lanAddress))}`
- );
+ if (prettyLanUrl) {
+ console.log(` ${chalk.bold('Local:')} ${prettyLocalUrl}`);
+ console.log(` ${chalk.bold('On Your Network:')} ${prettyLanUrl}`);
} else {
- console.log(` ${chalk.cyan(prettyUrl)}`);
+ console.log(` ${prettyLocalUrl}`);
}
console.log();
diff --git a/packages/react-scripts/scripts/utils/createWebpackCompiler.js b/packages/react-scripts/scripts/utils/createWebpackCompiler.js
index 008ee303a..a3adeee61 100644
--- a/packages/react-scripts/scripts/utils/createWebpackCompiler.js
+++ b/packages/react-scripts/scripts/utils/createWebpackCompiler.js
@@ -104,13 +104,13 @@ module.exports = function createWebpackCompiler(config, onReadyCallback) {
// Teach some ESLint tricks.
console.log(
'Search for the ' +
- chalk.underline('rule keywords') +
+ chalk.underline(chalk.yellow('rule keywords')) +
' to learn more about each warning.'
);
console.log(
'To ignore, add ' +
- chalk.yellow('// eslint-disable-next-line') +
- ' to the previous line.'
+ chalk.cyan('// eslint-disable-next-line') +
+ ' to the line before.'
);
console.log();
}
--
GitLab