fix(@schematics/angular): reintroduce .sass as a supported file extention

Sass Indented (.sass) is fully supported by the Sass team and we should still offer and support it.

Fixes #13739

Author: Alan

packages/schematics/angular/application/files/src/styles.__styleExt__.template renamed to packages/schematics/angular/application/files/src/styles.__style__.template

@@ -31,7 +31,6 @@ import {
   url,
 } from '@angular-devkit/schematics';
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
-import { styleToFileExtention } from '../component/index';
 import { Schema as ComponentOptions } from '../component/schema';
 import { Schema as E2eOptions } from '../e2e/schema';
 import {
@@ -187,8 +186,6 @@ function addAppToWorkspaceFile(options: ApplicationOptions, workspace: Workspace
     });
   }
 
-  const styleExt = styleToFileExtention(options.style);
-
   const project: WorkspaceProject = {
     root: projectRoot,
     sourceRoot: join(normalize(projectRoot), 'src'),
@@ -209,7 +206,7 @@ function addAppToWorkspaceFile(options: ApplicationOptions, workspace: Workspace
             join(normalize(projectRoot), 'src', 'assets'),
           ],
           styles: [
-            `${projectRoot}src/styles.${styleExt}`,
+            `${projectRoot}src/styles.${options.style}`,
           ],
           scripts: [],
           es5BrowserSupport: true,
@@ -262,7 +259,7 @@ function addAppToWorkspaceFile(options: ApplicationOptions, workspace: Workspace
           tsConfig: `${rootFilesRoot}tsconfig.spec.json`,
           karmaConfig: `${rootFilesRoot}karma.conf.js`,
           styles: [
-            `${projectRoot}src/styles.${styleExt}`,
+            `${projectRoot}src/styles.${options.style}`,
           ],
           scripts: [],
           assets: [
@@ -351,8 +348,6 @@ export default function (options: ApplicationOptions): Rule {
       projectRoot: newProjectRoot ? `${newProjectRoot}/${options.name}-e2e` : 'e2e',
     };
 
-    const styleExt = styleToFileExtention(options.style);
-
     return chain([
       addAppToWorkspaceFile(options, workspace),
       mergeWith(
@@ -363,7 +358,6 @@ export default function (options: ApplicationOptions): Rule {
             ...options,
             'dot': '.',
             relativePathToWorkspaceRoot,
-            styleExt,
           }),
           move(sourceRoot),
         ])),
@@ -425,7 +419,6 @@ export default function (options: ApplicationOptions): Rule {
             ...options as any,  // tslint:disable-line:no-any
             selector: appRootSelector,
             ...componentOptions,
-            styleExt,
           }),
           move(sourceDir),
         ]), MergeStrategy.Overwrite),

packages/schematics/angular/application/index.ts

@@ -302,13 +302,13 @@ describe('Application Schematic', () => {
       const prj = config.projects.foo;
       const buildOpt = prj.architect.build.options;
       expect(buildOpt.styles).toEqual([
-        'src/styles.scss',
+        'src/styles.sass',
       ]);
       const testOpt = prj.architect.test.options;
       expect(testOpt.styles).toEqual([
-        'src/styles.scss',
+        'src/styles.sass',
       ]);
-      expect(tree.exists('src/styles.scss')).toBe(true);
+      expect(tree.exists('src/styles.sass')).toBe(true);
     });
 
     it('should set the relative tsconfig paths', () => {

packages/schematics/angular/application/index_spec.ts

@@ -28,7 +28,7 @@ import { Component } from '@angular/core';
   `,<% } else { %>
   templateUrl: './app.component.html',<% } if(inlineStyle) { %>
   styles: []<% } else { %>
-  styleUrls: ['./app.component.<%= styleExt %>']<% } %>
+  styleUrls: ['./app.component.<%= style %>']<% } %>
 })
 export class AppComponent {
   title = '<%= name %>';

packages/schematics/angular/application/other-files/app.component.ts.template

@@ -9,7 +9,7 @@ import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }
   `,<% } else { %>
   templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
   styles: []<% } else { %>
-  styleUrls: ['./<%= dasherize(name) %>.component.<%= styleExt %>']<% } %><% if(!!viewEncapsulation) { %>,
+  styleUrls: ['./<%= dasherize(name) %>.component.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
 })

packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.component.__styleExt__.template renamed to packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template

@@ -154,13 +154,12 @@ export default function (options: ComponentOptions): Rule {
 
     const templateSource = apply(url('./files'), [
       options.skipTests ? filter(path => !path.endsWith('.spec.ts.template')) : noop(),
-      options.inlineStyle ? filter(path => !path.endsWith('.__styleExt__.template')) : noop(),
+      options.inlineStyle ? filter(path => !path.endsWith('.__style__.template')) : noop(),
       options.inlineTemplate ? filter(path => !path.endsWith('.html.template')) : noop(),
       applyTemplates({
         ...strings,
         'if-flat': (s: string) => options.flat ? '' : s,
         ...options,
-        styleExt: styleToFileExtention(options.style),
       }),
       move(parsedPath.path),
     ]);
@@ -172,12 +171,3 @@ export default function (options: ComponentOptions): Rule {
     ]);
   };
 }
-
-export function styleToFileExtention(style: Style | undefined): string {
-  switch (style) {
-    case Style.Sass:
-      return 'scss';
-    default:
-      return style || 'css';
-  }
-}

packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -253,8 +253,8 @@ describe('Component Schematic', () => {
     const options = { ...defaultOptions, style: Style.Sass };
     const tree = schematicRunner.runSchematic('component', options, appTree);
     const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
-    expect(content).toMatch(/styleUrls: \['.\/foo.component.scss/);
-    expect(tree.files).toContain('/projects/bar/src/app/foo/foo.component.scss');
+    expect(content).toMatch(/styleUrls: \['.\/foo.component.sass/);
+    expect(tree.files).toContain('/projects/bar/src/app/foo/foo.component.sass');
     expect(tree.files).not.toContain('/projects/bar/src/app/foo/foo.component.css');
   });
 

packages/schematics/angular/component/index.ts

@@ -125,10 +125,11 @@
         "message": "Which stylesheet format would you like to use?",
         "type": "list",
         "items": [
-          { "value": "css",  "label": "CSS    (.css )" },
-          { "value": "sass", "label": "Sass   (.scss) [ http://sass-lang.com   ]" },
-          { "value": "less", "label": "Less   (.less) [ http://lesscss.org     ]" },
-          { "value": "styl", "label": "Stylus (.styl) [ http://stylus-lang.com ]" }
+          { "value": "css",  "label": "CSS" },
+          { "value": "scss", "label": "SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ]" },
+          { "value": "sass", "label": "Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ]" },
+          { "value": "less", "label": "Less   [ http://lesscss.org                                                 ]" },
+          { "value": "styl", "label": "Stylus [ http://stylus-lang.com                                             ] " }
         ]
       }
     },