Integrate stylelint with angular build and make it failed on error?

Question

I want to use stylelint in angular application to enforce class name for example (they should be in lowercase and dash if if necessary, not camel case or uppercase).

How to configure stylelint to run in Angular build time (just like Angular run TSLint). Or can TSLint enforce style rules?

The propose is when I have an error in stylelint rule then Angular build will fail.

Answer 1

According to the documentation of stylelint you can use selector-class-pattern with the kebab-case pattern ^([az][az]*)(-[az]+)*$ . This pattern allows only lower case letters and dashes between those letters. If you want to allow also digits you can use this one ^([az][a-z0-9]*)(-[a-z0-9]+)*$ with every alphanumeric group starting with a letter.

You can also have a look at resolveNestedSelectors option of selector-class-pattern if you need it.

You can use it in your stylelint-config.json file somehow like this ,

"selector-class-pattern": ["^([a-z][a-z]*)(-[a-z]+)*$", {
   "resolveNestedSelectors": false
}

or just,

"selector-class-pattern": "^([a-z][a-z]*)(-[a-z]+)*$"

I hope it helped:)

EDIT: According to this article , for integrating with angular build, in your package.json you can make your scripts look like this:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "npm run lint && ng build",
    "test": "ng test",
    "lint": "ng lint && npm run lint:styles",
    "lint:styles": "stylelint \"apps/**/*.scss\" && stylelint \"libs/**/*.scss\"",
    "e2e": "ng e2e"
  },

Answer 2

Angular provides a command for linting ng lint .

There is a third party CLI builder available to integrate both ESLint and stylelint. You can then just run ng lint and it will lint with ESLint and stylelint.

https://github.com/krema/angular-eslint-stylelint-builder

PS: I am the author of this package.