Add additional information for postcss errors (#6282)

Created by: buildbreakdo

Fixes #6282 (closed): 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:

Created by: 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 cla@fb.com. Thanks!

added CLA Signed label

Created by: 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!

Created by: iansu

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

Created by: 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)' } }

Created by: 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?

requested review from @root

requested review from @root

requested review from @root

requested review from @root

requested review from @root

requested review from @root

requested review from @root

Created by: 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.

Created by: stale[bot]

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.

added stale label

assigned to @root

removed stale label

added tag: enhancement label

changed milestone to %3.2

Merged by: iansu at 2019-10-23 21:26:48 UTC

closed

Created by: iansu

Thanks!