fix: allow structural directives for no-unused-css rule

fixes mgechev#249
tmair · Feb 22, 2017 · 0aff6b7 · 0aff6b7
1 parent 0cacf41
commit 0aff6b7
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 1 deletion.
diff --git a/src/noUnusedCssRule.ts b/src/noUnusedCssRule.ts
@@ -8,6 +8,7 @@ import {VERSION} from '@angular/core';
 import {
   TemplateAst,
   ElementAst,
+  EmbeddedTemplateAst,
   PropertyBindingType
 } from '@angular/compiler';
 import {parseTemplate} from './angular/templates/templateParser';
@@ -131,7 +132,9 @@ class ElementFilterVisitor extends BasicTemplateAstVisitor {
       const strategy = strategies[s];
       return !selectorTypes[s] || !strategy(ast);
     }) && (ast.children || [])
-      .every(c => ast instanceof ElementAst && this.shouldVisit(<ElementAst>c, strategies, selectorTypes));
+      .every(c => ast instanceof ElementAst && this.shouldVisit(<ElementAst>c, strategies, selectorTypes)
+                  || ast instanceof EmbeddedTemplateAst && 
+                  (ast.children || []).every(c => this.shouldVisit(<ElementAst>c, strategies, selectorTypes)));
   }
 }
 

diff --git a/test/noUnusedCssRule.spec.ts b/test/noUnusedCssRule.spec.ts
@@ -94,6 +94,30 @@ describe('no-unused-css', () => {
           assertSuccess('no-unused-css', source);
       });
 
+      it('should succeed for structural directives when selector matches', () => {
+        let source = `
+          @Component({
+            selector: 'foobar',
+            template: \`<div>
+              <section>
+                <span><h1>{{ foo }}</h1></span>
+              </section>
+            </div>\`,
+            styles: [
+              \`
+              div h1 {
+                color: red;
+              }
+              \`
+            ]
+          })
+          class Test {
+            bar: number;
+          }`;
+
+          assertSuccess('no-unused-css', source);
+      });
+
       describe('multiple styles', () => {
 
         it('should succeed when having valid complex selector', () => {
@@ -309,6 +333,39 @@ describe('no-unused-css', () => {
       });
     });
 
+      it('should fail for structural directives when selector does not match', () => {
+        let source = `
+          @Component({
+            selector: 'foobar',
+            template: \`<div>
+              <section>
+                <span><h1 *ngIf="true">{{ foo }}</h1></span>
+              </section>
+            </div>\`,
+            styles: [
+              \`
+              div h1#header {
+                color: red;
+              }
+              \`
+            ]
+          })
+          class Test {
+            bar: number;
+          }`;
+          assertFailure('no-unused-css', source, {
+            message: 'Unused styles',
+            startPosition: {
+              line: 10,
+              character: 14
+            },
+            endPosition: {
+              line: 12,
+              character: 14
+            }
+        });
+      });
+
     describe('class setter', () => {
 
       it('should succeed when having valid complex selector', () => {