CODEWITHSUNDEEP
symfonywebpack-encorestylelint
Michael Käfer
Michael Käfer

Reputation: 1786

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

Upvotes: 2

Views: 1212

Answers (1)

jeddy3
jeddy3

Reputation: 3961

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.

Upvotes: 2

Related Questions