BREAKING: Be silent, add --verbose, change logging format

- postcss doesn't output any status logging by default
- Added --verbose flag to reenable status logging
- Removed ora spinners, simpler logging
- Changed wording of a few log messages; also changed colors
- Use simpler error message printing

Author: RyanZim

README.md

@@ -35,6 +35,7 @@ Basic options:
   -r, --replace  Replace (overwrite) the input file                    [boolean]
   --map, -m      Create an external sourcemap
   --no-map       Disable the default inline sourcemaps
+  --verbose      Be verbose                                            [boolean]
   --watch, -w    Watch files for changes and recompile as needed       [boolean]
   --env          A shortcut for setting NODE_ENV                        [string]
 

index.js

@@ -3,7 +3,6 @@
 const fs = require('fs-extra')
 const path = require('path')
 
-const ora = require('ora')
 const prettyHrtime = require('pretty-hrtime')
 const stdin = require('get-stdin')
 const read = require('read-cache')
@@ -25,8 +24,6 @@ const output = argv.output
 
 if (argv.map) argv.map = { inline: false }
 
-const spinner = ora()
-
 let config = {
   options: {
     map: argv.map !== undefined ? argv.map : { inline: true },
@@ -86,35 +83,31 @@ Promise.resolve()
   })
   .then(results => {
     if (argv.watch) {
+      const printMessage = () =>
+        printVerbose(chalk.dim('\nWaiting for file changes...'))
       const watcher = chokidar.watch(input.concat(dependencies(results)), {
         usePolling: argv.poll,
         interval: argv.poll && typeof argv.poll === 'number' ? argv.poll : 100
       })
 
       if (config.file) watcher.add(config.file)
 
-      watcher
-        .on('ready', () => {
-          console.warn(chalk.bold.cyan('Waiting for file changes...'))
-        })
-        .on('change', file => {
-          let recompile = []
+      watcher.on('ready', printMessage).on('change', file => {
+        let recompile = []
 
-          if (~input.indexOf(file)) recompile.push(file)
+        if (~input.indexOf(file)) recompile.push(file)
 
-          recompile = recompile.concat(
-            depGraph.dependantsOf(file).filter(file => ~input.indexOf(file))
-          )
+        recompile = recompile.concat(
+          depGraph.dependantsOf(file).filter(file => ~input.indexOf(file))
+        )
 
-          if (!recompile.length) recompile = input
+        if (!recompile.length) recompile = input
 
-          return files(recompile)
-            .then(results => watcher.add(dependencies(results)))
-            .then(() => {
-              console.warn(chalk.bold.cyan('Waiting for file changes...'))
-            })
-            .catch(error)
-        })
+        return files(recompile)
+          .then(results => watcher.add(dependencies(results)))
+          .then(printMessage)
+          .catch(error)
+      })
     }
   })
   .catch(err => {
@@ -179,8 +172,7 @@ function css(css, file) {
 
   const time = process.hrtime()
 
-  spinner.text = `Processing ${relativePath}`
-  spinner.start()
+  printVerbose(chalk`{cyan Processing {bold ${relativePath}}...}`)
 
   return rc(ctx, argv.config)
     .then(() => {
@@ -205,7 +197,6 @@ function css(css, file) {
       }
 
       if (!options.to && config.options.map && !config.options.map.inline) {
-        spinner.fail()
         error(
           'Output Error: Cannot output external sourcemaps when writing to STDOUT'
         )
@@ -220,39 +211,29 @@ function css(css, file) {
             tasks.push(fs.outputFile(options.to, result.css))
 
             if (result.map) {
-              tasks.push(
-                fs.outputFile(
-                  options.to.replace(
-                    path.extname(options.to),
-                    `${path.extname(options.to)}.map`
-                  ),
-                  result.map
-                )
+              const mapfile = options.to.replace(
+                path.extname(options.to),
+                `${path.extname(options.to)}.map`
               )
+              tasks.push(fs.outputFile(mapfile, result.map))
             }
-          } else {
-            spinner.text = chalk.bold.green(
-              `Finished ${relativePath} (${prettyHrtime(process.hrtime(time))})`
-            )
-            spinner.succeed()
-            return process.stdout.write(result.css, 'utf8')
-          }
+          } else process.stdout.write(result.css, 'utf8')
 
           return Promise.all(tasks).then(() => {
-            spinner.text = chalk.bold.green(
-              `Finished ${relativePath} (${prettyHrtime(process.hrtime(time))})`
+            const prettyTime = prettyHrtime(process.hrtime(time))
+            printVerbose(
+              chalk`{green Finished {bold ${relativePath}} in {bold ${prettyTime}}}`
             )
+
             if (result.warnings().length) {
-              spinner.fail()
               console.warn(reporter(result))
-            } else spinner.succeed()
+            }
 
             return result
           })
         })
     })
     .catch(err => {
-      spinner.fail()
       throw err
     })
 }
@@ -274,25 +255,18 @@ function dependencies(results) {
   return messages
 }
 
+function printVerbose(message) {
+  if (argv.verbose) console.warn(message)
+}
+
 function error(err) {
+  // Seperate error from logging output
+  if (argv.verbose) console.error()
+
   if (typeof err === 'string') {
-    spinner.fail(chalk.bold.red(err))
+    console.error(chalk.red(err))
   } else if (err.name === 'CssSyntaxError') {
-    console.error('\n')
-
-    spinner.text = spinner.text.replace('Processing ', '')
-    spinner.fail(chalk.bold.red(`Syntax Error: ${spinner.text}`))
-
-    if (err.file) {
-      err.message = err.message.substr(err.file.length + 1)
-    } else {
-      err.message = err.message.replace('<css input>:', '')
-    }
-
-    err.message = err.message.replace(/:\s/, '] ')
-
-    console.error('\n', chalk.bold.red(`[${err.message}`))
-    console.error('\n', err.showSourceCode(), '\n\n')
+    console.error(err.toString())
   } else {
     console.error(err)
   }

lib/args.js

@@ -35,7 +35,10 @@ Usage:
   $0 <input-directory> [OPTIONS] --dir <output-directory> [--watch|-w]
   $0 <input.css>... [OPTIONS] --replace`
   )
-  .group(['o', 'd', 'r', 'map', 'no-map', 'watch', 'env'], 'Basic options:')
+  .group(
+    ['o', 'd', 'r', 'map', 'no-map', 'verbose', 'watch', 'env'],
+    'Basic options:'
+  )
   .option('o', {
     alias: 'output',
     desc: 'Output file',
@@ -60,6 +63,10 @@ Usage:
   .alias('map', 'm')
   .describe('map', 'Create an external sourcemap')
   .describe('no-map', 'Disable the default inline sourcemaps')
+  .option('verbose', {
+    desc: 'Be verbose',
+    type: 'boolean'
+  })
   .option('watch', {
     alias: 'w',
     desc: 'Watch files for changes and recompile as needed',

package.json

@@ -23,7 +23,6 @@
     "fs-extra": "^5.0.0",
     "get-stdin": "^5.0.1",
     "globby": "^7.1.1",
-    "ora": "1.3.0",
     "postcss": "^6.0.1",
     "postcss-load-config": "^1.1.0",
     "postcss-reporter": "^5.0.0",

test/error.js

@@ -56,7 +56,10 @@ test('CssSyntaxError', t => {
   return cli(['test/fixtures/a.css', '--parser', 'sugarss', '-o', tmp()]).then(
     ({ err, code }) => {
       t.is(code, 1, 'expected non-zero error code')
-      t.regex(err.toString(), /\[1:4] Unnecessary curly bracket/)
+      t.regex(
+        err.toString(),
+        /CssSyntaxError: .*a.css:1:4: Unnecessary curly bracket/
+      )
     }
   )
 })