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

Question

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
}
}

Answer 1

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.