2

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.

Dale K
  • 25,246
  • 15
  • 42
  • 71
Jon Sud
  • 10,211
  • 17
  • 76
  • 174

2 Answers2

0

According to the documentation of stylelint you can use selector-class-pattern with the kebab-case pattern ^([a-z][a-z]*)(-[a-z]+)*$. This pattern allows only lower case letters and dashes between those letters. If you want to allow also digits you can use this one ^([a-z][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"
  },
vkvkvk
  • 129
  • 1
  • 7
  • But how I integrate angular with stylelint in build time? not but run npm command – Jon Sud Oct 22 '19 at 09:23
  • @JonSud I edited my answer, can you check now if it helps you? – vkvkvk Oct 22 '19 at 09:59
  • No, because I have to run `npm run lint` and `npm start` in parallels. if the lint will have error, then angular doesn't know about this error. I want to check style lint in the build time, in the serve time. – Jon Sud Oct 22 '19 at 10:02
0

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.

krema
  • 939
  • 7
  • 20