Merge pull request #302 from GregOnNet/view-encapsulation

Adding rule checking ViewEncapsulation

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-    "typescript.tsdk": "./node_modules/typescript/lib"
+    "typescript.tsdk": "./node_modules/typescript/lib",
+    "angulardoc.repoId": "51f64839-b313-47fa-8d89-9317081ebe22",
+    "angulardoc.lastSync": 0
 }

README.md

@@ -67,6 +67,8 @@ Create the following `tslint.json` file like:
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
     "use-host-property-decorator": true,
+    "use-host-property-decorator": true,
+    "use-view-encapsulation": true,
     "no-attribute-parameter-decorator": true,
     "no-input-rename": true,
     "no-output-rename": true,

src/index.ts

@@ -20,5 +20,6 @@ export { Rule as UseOutputPropertyDecoratorRule } from './useOutputPropertyDecor
 export { Rule as UsePipeTransformInterfaceRule } from './usePipeTransformInterfaceRule';
 export { Rule as TemplateToNgTemplateRule } from './templateToNgTemplateRule';
 export { Rule as UsePipeDecoratorRule } from './usePipeDecoratorRule';
+export { Rule as UseViewEncapsulationRule } from './useViewEncapsulationRule';
 export * from './angular/config';
 

src/useViewEncapsulationRule.ts

@@ -0,0 +1,47 @@
+import { getComponentDecorator, getDecoratorPropertyInitializer } from './util/utils';
+import { ComponentMetadata } from './angular/metadata';
+import * as Lint from 'tslint';
+import * as ts from 'typescript';
+
+import { NgWalker } from './angular/ngWalker';
+
+export class Rule extends Lint.Rules.AbstractRule {
+
+  static metadata: Lint.IRuleMetadata = {
+    ruleName: 'use-view-encapsulation',
+    type: 'maintainability',
+    description: 'Disallows using of ViewEncapsulation.None',
+    rationale: '',
+    options: null,
+    optionsDescription: 'Not configurable',
+    typescriptOnly: true
+  };
+
+  static FAILURE = 'Using "ViewEncapsulation.None" will make your styles global which may have unintended effect';
+
+  apply(sourceFile: ts.SourceFile): Lint.RuleFailure[] {
+    const walker = new ViewEncapsulationWalker(sourceFile, this.getOptions());
+    return this.applyWithWalker(walker);
+  }
+}
+
+class ViewEncapsulationWalker extends NgWalker {
+
+  visitClassDeclaration(node: ts.ClassDeclaration) {
+    const decorator = getComponentDecorator(node);
+    const encapsulation = getDecoratorPropertyInitializer(decorator, 'encapsulation');
+
+    if(!encapsulation ||
+        encapsulation.name.text !== 'None') {
+      return;
+    }
+
+    this.addFailure(
+      this.createFailure(
+        encapsulation.getStart(),
+        encapsulation.getWidth(),
+        Rule.FAILURE
+      )
+    );
+  }
+}

test/directiveClassSuffix.spec.ts

@@ -8,7 +8,7 @@ describe('directive-class-suffix', () => {
                 selector: 'sgBarFoo'
               })
               class Test {}
-                    ~~~~  
+                    ~~~~
             `;
             assertAnnotated({
                 ruleName: 'directive-class-suffix',

test/importDestructuringSpacingRule.spec.ts

@@ -5,7 +5,7 @@ describe('import-destructuring-spacing', () => {
     it('should fail when the imports have no spaces', () => {
       let source = `
                     import {Foo} from './foo'
-                           ~~~~~                     
+                           ~~~~~
       `;
       assertAnnotated({
         ruleName: 'import-destructuring-spacing',
@@ -29,7 +29,7 @@ describe('import-destructuring-spacing', () => {
     it('should fail with spaces between items', () => {
       let source = `
         import {Foo,  Bar} from './foo'
-               ~~~~~~~~~~~    
+               ~~~~~~~~~~~
         `;
       assertAnnotated({
           ruleName: 'import-destructuring-spacing',

test/useViewEncapsulationRule.spec.ts

@@ -0,0 +1,59 @@
+import { assertAnnotated, assertSuccess } from './testHelper';
+
+describe('use-view-encapsulation', () => {
+  describe('invalid view encapsulation', () => {
+    it('should fail if ViewEncapsulation.None is set', () => {
+      const source = `
+        @Component({
+          selector: 'sg-foo-bar',
+          encapsulation: ViewEncapsulation.None
+                         ~~~~~~~~~~~~~~~~~~~~~~
+        })
+        export class TestComponent { }
+      `;
+
+      assertAnnotated({
+        ruleName: 'use-view-encapsulation',
+        message: 'Using "ViewEncapsulation.None" will make your styles global which may have unintended effect',
+        source
+      });
+    });
+  });
+
+  describe('valid view encapsulation', () => {
+    it('should succeed if ViewEncapsulation.Native is set', () => {
+      const source = `
+        @Component({
+          selector: 'sg-foo-bar',
+          encapsulation: ViewEncapsulation.Native
+        })
+        export class TestComponent { }
+      `;
+
+      assertSuccess('use-view-encapsulation', source);
+    });
+
+    it('should succeed if ViewEncapsulation.Emulated is set', () => {
+      const source = `
+        @Component({
+          selector: 'sg-foo-bar',
+          encapsulation: ViewEncapsulation.Emulated
+        })
+        export class TestComponent { }
+      `;
+
+      assertSuccess('use-view-encapsulation', source);
+    });
+
+    it('should succeed if no ViewEncapsulation is set explicitly', () => {
+      const source = `
+        @Component({
+          selector: 'sg-foo-bar',
+        })
+        export class TestComponent { }
+      `;
+
+      assertSuccess('use-view-encapsulation', source);
+    });
+  });
+});