CODEWITHSUNDEEP
angularsassscss-lintangular2viewencapsulation
Flame of Anor
Flame of Anor

Reputation: 13

How to prevent consumers of my component from using ::ng-deep to alter styles of my component

As part of the centralized component library I need to build, I want to instate a rule so that engineers are unable to morph the styles of the component using ::ng-deep. Does angular/scss/stylelint provide any safeguards to prevent this behavior?

I would prefer an scss/angular approach as opposed to a linting approach.

Most qns so far only refer to using ::ng-deep or avoiding ::ng-deep to manipulate styles of a component. Mine is the inverse.

I tried using ViewEncapsulation.ShadowDom in angular's playground to see if adding this to a component would help. But so far it doesn't seem helpful (refer to screenshot) - screenshot of trying ViewEncapsulation.ShadowDom

Upvotes: 1

Views: 62

Answers (1)

Naren Murali
Naren Murali

Reputation: 56600

I am not aware of any in-built rules in eslint or tslint, but you can use a regex to match this word and throw an invalid error. You can experiment with the below package, which will warn the user, and prevent occurrences of its usage.

.eslintrc.json:

{
  "plugins": [
    "regex"
  ],
  "rules": {
    "regex/invalid": [
      "error", [
        "::ng-deep", // <- something like this. 
      ]
    ],
  }
}

eslint-plugin-regex

Upvotes: 0

Related Questions