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?
webpack.config.js
Encore.enablePostCssLoader();
postcss.config.js
module.exports = {
plugins: {
autoprefixer: {},
stylelint: {},
},
};
.stylelintrc.json
{
"extends": "stylelint-config-standard",
"rules": {
"no-duplicate-selectors": null
}
}
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.