Stylelint support about friendly-errors-webpack-plugin

[iceekey]

I use this stub for development to show stylelint errors:

webpack.transformer.js

const _ = require("lodash");

function isWebpackError (e) {
  return _.isEmpty(e.originalStack) && _.isNil(e.file) && _.has(e, "webpackError");
}

function transform(error) {
  if (isWebpackError(error)) {
    return Object.assign({}, error, {
      name: "Webpack error",
      type: "webpack-error"
    });
  }

  return error;
}

module.exports = transform;

webpack.formatter.js

function concat(...args) {
  args = Array.from(args).filter(e => e !== null);
  const baseArray = Array.isArray(args[0]) ? args[0] : [args[0]];
  return Array.prototype.concat.apply(baseArray, args.slice(1));
}

function displayError(error) {
  return [error.webpackError, ""];
}

function format(errors) {
  const lintErrors = errors.filter(e => e.type === "webpack-error");
  if (lintErrors.length > 0) {
    const flatten = (accum, curr) => accum.concat(curr);
    return concat(
      lintErrors
        .map(error => displayError(error))
        .reduce(flatten, [])
    );
  }

  return [];
}

module.exports = format;

webpack.config.js

// ...
const webpackErrorTransformer = require("./transformers/webpack.transformer");
const webpackErrorFormatter = require("./formatters/webpack.formatter");
// ...
 plugins: [
    new FriendlyErrorsWebpackPlugin({
      additionalTransformers: [webpackErrorTransformer],
      additionalFormatters: [webpackErrorFormatter]
    }),
// ...

I didn't find any reasons to dedicate this solution to stylelint, beacause this way any other webpack error could be shown. Basically, there's no stack at all and webpackError frield contains error message.

[iceekey]

@geowarin Thank you. I'll make a pull request in a spare time.

[geowarin]

Hello!
Thanks for the report.

We currently support 3 types of errors:

• Babel syntax errors (priority = 1000)
• Modules not found (priority = 900)
• Eslint errors (priority = 0)

The other errors are given 0 priority and all the errors with the same priority should be displayed at the same time.
What output did you expect and how can we fix it ?

[hendrikeng]

@geowarin Thanks for your quick reply.

It would be great to support Stylelint Syntax errors as they provide more detailed information
and a majority of people are using it. Would that be possible? Not sure how i could help though :-)

Stylelint

[geowarin]

Stylelint could be a fine addition!
If you feel like contributing, take a look at the eslint transformer (which identifies an eslint error) and the eslint formatter (which displays it on the screen).

You could also contribute a test!

[kaelvergara]

+1 to @iceekey solution, this fixes my issue where stylelint plugin is not showing error logs for webpack dev server.

[geowarin]

@iceekey Nice thank you!
It looks like the default formatter should handle stylint!

Could you make a pull request including your changes?

[fancyboynet]

So does it support stylelint error now?