Stylelint support

[hendrikeng]

Hey, i am having a problem displaying the Stylelint errors, i am not sure if its setup issue i created. If i use the friendly-errors-webpack-plugin enabled it wont show the stylelint errors, only the native ones :

if i disable the plugin it will display both:

how do i disable the other reporter or give stylelint the priority ? i know it might be not the right place to ask but i figured some of u might have run into the same issue.

thats my webpack.config.js:

module.exports = {
.
.
.
  module: {
    rules: removeEmpty([
      {
        test: /\.js$/,
        use: 'eslint-loader',
        enforce: 'pre', // avoid linting before babel transpile
        exclude: /node_modules/,
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              minimize: false,
              autoprefixer: false,
              sourceMap: true,
              importLoaders: 1,
              url: false,
            },
          },
          {
            loader: 'postcss-loader',
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          plugins: ['syntax-dynamic-import'],
        },
      },
  plugins: {
   new FriendlyErrorsWebpackPlugin({
      compilationSuccessInfo: {
        messages: ['You application is running here http://hajok.dev'],
      },
      clearConsole: true,
    }),
    new StyleLintPlugin({
      context: path.resolve(__dirname, 'src/scss'),
      syntax: 'scss',
    }),
 .
.
.

thats my postcss.config.js:

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-flexbugs-fixes': {},
    'postcss-cssnext': {
      browsers: ['last 2 versions', '> 5%'],
    },
  },
};

[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!

[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.

[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?

[iceekey]

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

[fancyboynet]

So does it support stylelint error now?