PostCSS and autoprefixer not show source file for warnings

Ran into this issue yesterday. Working with a webpack config I updated from node-sass to sass (dart sass) and started getting new warnings from autoprefixer. Not wanting to clutter up the build screen I thought I'd just fix some of those errors. But to my dismay all I got was a line number and no source file. How am I supposed to find that!?

First I tried running everything from the command line to bypass webpack altogether.

npx sass main.scss main.css
npx postcss main.css main-postcss.css

The warnings were a little cleaner, but still not helpful. Line 58 of what!

58:2    ⚠  start value has mixed support, consider using flex-start instead [autoprefixer]

57:2    ⚠  start value has mixed support, consider using flex-start instead [autoprefixer]

219:12  ⚠  end value has mixed support, consider using flex-end instead [autoprefixer]

53:12   ⚠  end value has mixed support, consider using flex-end instead [autoprefixer]

The workaround answer

PostCSS has a node API so I decided to try and use that. Here is what I came up with:

const autoprefixer = require('autoprefixer')
const postcss = require('postcss')
const fs = require('fs')

fs.readFile("main.css", (err, css) => {
  postcss([autoprefixer])
    .process(css, { from: 'main.scss', to: 'main-postcss.css' })
    .then(result => {
      console.log("Warnings: ",result.messages.length)
      result.messages.forEach(message => console.log(message.toString()))
      fs.writeFile('main-postcss.css', result.css, () => true)
      if ( result.map ) {
        fs.writeFile('main-postcss.css.map', result.map.toString(), () => true)
      }
    })
});

The key is the message.toString() function. For whatever reason the default reporting of PostCSS in the CLI (and webpack) doesn't seem to use the full output from that function. But it's designed to take any warning that is thrown by a plugin and display it in a useful form.

autoprefixer: /path/to/file/_mixins.scss:58:2: start value has mixed support, consider using flex-start instead

autoprefixer: /path/to/file_mixins.scss:57:2: start value has mixed support, consider using flex-start instead

autoprefixer: /path/to/file/_home.scss:219:12: end value has mixed support, consider using flex-end instead

autoprefixer: /path/to/file/_checkout.scss:53:12: end value has mixed support, consider using flex-end instead

autoprefixer: /path/to/file/_landing.scss:778:6: start value has mixed support, consider using flex-start instead

Finally, now I can finish this PR!