Myujth

I want to lint CSS into Pug style. tag raw content (CSS) and style attribute content (CSS).

Looks like Stylelint is a right tool to do this.

Stylelint can lint CSS strings and code blocks in html files, working as expected.

But if I try to do the same with pug, I got Unknown word CssSyntaxError error.

I created a repo for testing and add tests output as comments to NPM scripts:

https://github.com/Grawl/stylelint-pug-test/commit/f4749090ab89be5da5e762a69948e072343accdf

Stylelint lints html using "processor" to determine CSS in HTML tags and attributes. I found deprecated stylelint-processor-html with link to stylelint-processor-arbitrary-tags module. But it works without this processor for me (look into test repo above). Looks like HTML processor is built-in.

I cannot find Pug processor for Stylelint. Trying to find one on NPM (12 results), on Yarn registry (15 results) and on GitHub (14 repositories).

Maybe I miss something? Should I write stylelint-processor-pug or dig into stylelint-processor-arbitrary-tags RegExp's?

Looks like Stylelint is a right tool to do this.

Yes, it is. It supports both the linting and fixing of CSS files and <style> blocks with HTML files out-of-the-box. It can also be extended to support style. blocks and style="" attributes within pug templates.

Should I write stylelint-processor-pug?

You can write a stylelint-processor-pug and this will allow you to lint, but not fix, your styles within your pug templates. However, the recommended approach is to write a PostCSS syntax, e.g. postcss-pug.

You can then use all PostCSS-based tools, including stylelint, to transform and analyses the styles within your pug templates. I suggest you look at both postcss-html and postcss-markdown for inspiration as these solve similar problems for their respective syntaxes.

Once you have written your custom syntax you'll need to use it in a separate stylelint task, like so:

 "scripts": 
 "lint-styles": "stylelint '**/*.css,html'",
 "lint-pug-styles": "stylelint '**/*.pug' --custom-syntax postcss-pug"