fix(compiler): generated CSS files suffixed with ngstyle. (#13353)

Mirrors factories which ends in `ngfactory`.

Closes #13141.

modules/@angular/compiler-cli/src/codegen.ts

@@ -21,9 +21,9 @@ import {CompilerHost, CompilerHostContext, ModuleResolutionHostAdapter} from './
 import {PathMappedCompilerHost} from './path_mapped_compiler_host';
 import {Console} from './private_import_core';
 
-const GENERATED_FILES = /\.ngfactory\.ts$|\.css\.ts$|\.css\.shim\.ts$/;
+const GENERATED_FILES = /\.ngfactory\.ts$|\.ngstyle\.ts$/;
 const GENERATED_META_FILES = /\.json$/;
-const GENERATED_OR_DTS_FILES = /\.d\.ts$|\.ngfactory\.ts$|\.css\.ts$|\.css\.shim\.ts$/;
+const GENERATED_OR_DTS_FILES = /\.d\.ts$|\.ngfactory\.ts$|\.ngstyle\.ts$/;
 
 const PREAMBLE = `/**
  * @fileoverview This file is generated by the Angular 2 template compiler.

modules/@angular/compiler-cli/src/compiler_host.ts

@@ -15,7 +15,7 @@ import * as ts from 'typescript';
 const EXT = /(\.ts|\.d\.ts|\.js|\.jsx|\.tsx)$/;
 const DTS = /\.d\.ts$/;
 const NODE_MODULES = '/node_modules/';
-const IS_GENERATED = /\.(ngfactory|css(\.shim)?)$/;
+const IS_GENERATED = /\.(ngfactory|ngstyle)$/;
 
 export interface CompilerHostContext extends ts.ModuleResolutionHost {
   readResource(fileName: string): Promise<string>;

modules/@angular/compiler-cli/test/aot_host_spec.ts

@@ -66,11 +66,14 @@ describe('CompilerHost', () => {
                  '/tmp/project/src/my.other.ngfactory.ts', '/tmp/project/src/my.ngfactory.ts'))
           .toEqual('./my.other.ngfactory');
       expect(hostNestedGenDir.fileNameToModuleName(
-                 '/tmp/project/src/my.other.css.ts', '/tmp/project/src/a/my.ngfactory.ts'))
+                 '/tmp/project/src/my.other.css.ngstyle.ts', '/tmp/project/src/a/my.ngfactory.ts'))
-          .toEqual('../my.other.css');
+          .toEqual('../my.other.css.ngstyle');
       expect(hostNestedGenDir.fileNameToModuleName(
-                 '/tmp/project/src/a/my.other.css.shim.ts', '/tmp/project/src/my.ngfactory.ts'))
+                 '/tmp/project/src/a/my.other.shim.ngstyle.ts', '/tmp/project/src/my.ngfactory.ts'))
-          .toEqual('./a/my.other.css.shim');
+          .toEqual('./a/my.other.shim.ngstyle');
+      expect(hostNestedGenDir.fileNameToModuleName(
+                 '/tmp/project/src/my.other.sass.ngstyle.ts', '/tmp/project/src/a/my.ngfactory.ts'))
+          .toEqual('../my.other.sass.ngstyle');
     });
 
     it('should import application from factory', () => {
@@ -83,6 +86,12 @@ describe('CompilerHost', () => {
       expect(hostNestedGenDir.fileNameToModuleName(
                  '/tmp/project/src/a/my.other.ts', '/tmp/project/src/my.ngfactory.ts'))
           .toEqual('../a/my.other');
+      expect(hostNestedGenDir.fileNameToModuleName(
+                 '/tmp/project/src/a/my.other.css.ts', '/tmp/project/src/my.ngfactory.ts'))
+          .toEqual('../a/my.other.css');
+      expect(hostNestedGenDir.fileNameToModuleName(
+                 '/tmp/project/src/a/my.other.css.shim.ts', '/tmp/project/src/my.ngfactory.ts'))
+          .toEqual('../a/my.other.css.shim');
     });
   });
 

modules/@angular/compiler/src/aot/compiler.ts

@@ -272,7 +272,7 @@ function _componentFactoryName(comp: CompileIdentifierMetadata): string {
 }
 
 function _stylesModuleUrl(stylesheetUrl: string, shim: boolean, suffix: string): string {
-  return shim ? `${stylesheetUrl}.shim${suffix}` : `${stylesheetUrl}${suffix}`;
+  return `${stylesheetUrl}${shim ? '.shim' : ''}.ngstyle${suffix}`;
 }
 
 function _assertComponent(meta: CompileDirectiveMetadata) {

modules/@angular/compiler/src/jit/compiler.ts

@@ -341,7 +341,7 @@ export class JitCompiler implements Compiler {
     if (!this._compilerConfig.useJit) {
       return interpretStatements(result.statements, result.stylesVar);
     } else {
-      return jitStatements(`/${result.meta.moduleUrl}.css.js`, result.statements, result.stylesVar);
+      return jitStatements(`/${result.meta.moduleUrl}.ngstyle.js`, result.statements, result.stylesVar);
     }
   }
 }

tools/@angular/tsc-wrapped/src/compiler_host.ts

@@ -107,7 +107,7 @@ export class TsickleCompilerHost extends DelegatingHost {
       };
 }
 
-const IGNORED_FILES = /\.ngfactory\.js$|\.css\.js$|\.css\.shim\.js$/;
+const IGNORED_FILES = /\.ngfactory\.js$|\.ngstyle\.js$/;
 
 export class MetadataWriterHost extends DelegatingHost {
   private metadataCollector = new MetadataCollector();

tools/@angular/tsc-wrapped/src/options.ts

@@ -22,11 +22,11 @@ interface Options extends ts.CompilerOptions {
   // Produce an error if the metadata written for a class would produce an error if used.
   strictMetadataEmit?: boolean;
 
-  // Don't produce .ngfactory.ts or .css.shim.ts files
+  // Don't produce .ngfactory.ts or .ngstyle.ts files
   skipTemplateCodegen?: boolean;
 
   // Whether to generate code for library code.
-  // If true, produce .ngfactory.ts and .css.shim.ts files for .d.ts inputs.
+  // If true, produce .ngfactory.ts and .ngstyle.ts files for .d.ts inputs.
   // Default is true.
   generateCodeForLibraries?: boolean;