CSS linting with SCSS

[sergeylukin]

In continue to #812.
Adding sass-loader after postcss-loader in webpack.config.babel.js causes stylelint warnings like:

Expected newline before "}" of a multi-line block (block-closing-brace-newline-before)

That's because libsass transforms outputted CSS according to outputStyle option which can take one of 4 values:

• nested (default)
• expanded
• compact
• compressed

While these warnings can be prevented by setting outputStyle to expanded in webpack.config.babel.js:

module: {
  ...
},

sassLoader: {
  outputStyle: 'expanded',  
}

this doesn't solve the problem as in this case what's being linted is the output of node-sass rather than the source code and so source code can get messy without getting any linting warnings.

I invite you to think about possible solutions and post them here.

For now I've removed stylelint plugin from postcss-loader in my webpack config. Hope to have it fixed properly at some point.

[MoOx]

I guess like you mentionned, you should postcss-loader 2 times: one before sass, using postcss-scss and one after, for other postcss transformation.

[clembu]

Isn't it better to lint the sass before it's transformed? I mean, what should be linted is the source code, right?
You can lint sass with sass-lint, to stay in the node ecosystem. I use it in atom, but it shouldn't be hard including it in your webpack pipeline if you want to lint at build time

[MoOx]

stylelint offers more rules than sass-lint and support sass via postcss-scss syntax.

[MoOx]

Closing since it's not really specific to phenomic, it's more a postcss/webpack question. Feel free to use stackoverflow for this.