Search code examples
symfonywebpack-encorestylelint

Stylelint output does not show the name of the file where warnings occur


When running stylelint the output of warnings does not show the name of the file where the error occurs (with errors it does work fine). My files look like this:

app.scss

@import './_file-with-error';

_file-with-error.scss

html body {
  color: red;
}

body { // provocate an error 😈
  color: red;
}

I use Webpack Encore and stylelint as a PostCSS plugin, when I build I get:

michael@machine:~$ yarn encore dev
yarn run v1.21.1
$ /var/www/html/mop/mop/node_modules/.bin/encore dev
Running webpack ...

 WARNING  Compiled with 1 warnings                                                                                                                                     11:47:14 PM

 warning  in ./assets/scss/app.scss

Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

(5:1) Expected selector "body" to come before selector "html body" (no-descending-specificity)

Entrypoint app [big] = runtime.js vendors~app.js app.css app.js
Entrypoint home = runtime.js home.js
Entrypoint _tmp_copy = runtime.js
Done in 3.06s.

So everything is fine just that I do not see where the warning comes from, I need the filename and the line. How can I configure that?

Setup

webpack.config.js

Encore.enablePostCssLoader();

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    stylelint: {},
  },
};

.stylelintrc.json

{
  "extends": "stylelint-config-standard",
  "rules": {
    "no-duplicate-selectors": null
  }
}

Solution

  • You need to add a reporter to your PostCSS pipeline:

    The stylelint plugin registers warnings via PostCSS. Therefore, you'll want to use it with a PostCSS runner that prints warnings or another PostCSS plugin whose purpose is to format and print warnings (e.g. postcss-reporter).

    For example:

    module.exports = {
      plugins: {
        autoprefixer: {},
        stylelint: {},
        'postcss-reporter': { clearReportedMessages: true }
      },
    }
    

    Alternatively, you can use the official webpack plugin for stylelint.