Add additional information for postcss errors (#6282)

[buildbreakdo]

Fixes #6282: If build compiler error has postcssNode property, add additional information to the error message. Default compiler CSS error messages are opaque. To verify:

npx create-react-app css-test
cd css-test
echo "label[for=*] { margin-right: 12px; }" > ./src/App.css
yarn build

Outputs error:

Replace css-test/node_modules/react-scripts/build.js lines:

messages = formatWebpackMessages({
  errors: [err.message],
  warnings: [],
});

With :

        let errMessage = err.message;

        // Add additional information for postcss errors
        if (err.hasOwnProperty('postcssNode')) {
          errMessage += '\n' + path.basename(
            err['postcssNode'].source.input.file
          ) + '\nCompileError: Begins at selector ' +
            err['postcssNode'].selector +' (' +
            err['postcssNode'].source.start.line + ':' +
            err['postcssNode'].source.start.column +
            ')';
        }

        messages = formatWebpackMessages({
          errors: [errMessage],
          warnings: [],
        });

Run yarn build to view new compiler error output:

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[mrmckeb]

I'll just get a second opinion here. Looks good though, thanks!

[iansu]

Is the chunk name useful here? Can we point to the original source instead?

[buildbreakdo]

@iansu Useful to know the file type, original source would have definitely been preferred. Understanding is that postcss is processing the chunk not generating the chunk itself, so this would be after the chunk was generated. err['postcssNode'].source.input.file is set to the chunk name.

  postcssNode:
   Declaration {
     raws: { before: '\n  ', between: ': ' },
     type: 'decl',
     parent:
      Rule {
        raws: [Object],
        type: 'rule',
        nodes: [Array],
        parent: [Object],
        source: [Object],
        selector: 'body',
        lastEach: 2,
        indexes: [Object] },
     source: { start: [Object], input: [Object], end: [Object] },
     prop: 'background',
     value: 'var(--site-background)' } }

[iansu]

I thought that might be the case. I'm just not sure how useful the chunk name is, especially in dev where the chunk isn't written to disk. I guess it can be inspected via the browser devtools?

[buildbreakdo]

@iansu Chunk name has been removed

EDIT:
Went ahead and removed the line number too, since this references a line in the chunk file that is not written to disk.

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[iansu]

Thanks!