feat(@schematics/angular): only support known style extentions

Fixes #13149

packages/angular/cli/lib/config/schema.json

@@ -140,9 +140,16 @@
               "default": "css"
             },
             "style": {
-              "description": "The file extension to use for style files.",
+              "description": "The file extension or preprocessor to use for style files.",
               "type": "string",
-              "default": "css"
+              "default": "css",
+              "enum": [
+                "css",
+                "scss",
+                "sass",
+                "less",
+                "styl"
+              ]
             },
             "viewEncapsulation": {
               "description": "Specifies the view encapsulation strategy.",

packages/schematics/angular/app-shell/index_spec.ts

@@ -33,7 +33,6 @@ describe('App Shell Schematic', () => {
     inlineStyle: false,
     inlineTemplate: false,
     routing: true,
-    style: 'css',
     skipTests: false,
     skipPackageJson: false,
   };

packages/schematics/angular/application/index.ts

@@ -31,6 +31,7 @@ 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 {
@@ -48,7 +49,7 @@ import {
   WorkspaceProject,
   WorkspaceSchema,
 } from '../utility/workspace-models';
-import { Schema as ApplicationOptions } from './schema';
+import { Schema as ApplicationOptions, Style } from './schema';
 
 
 // TODO: use JsonAST
@@ -162,7 +163,7 @@ function addAppToWorkspaceFile(options: ApplicationOptions, workspace: Workspace
 
   if (options.inlineTemplate === true
     || options.inlineStyle === true
-    || options.style !== 'css') {
+    || options.style !== Style.Css) {
     schematics['@schematics/angular:component'] = {};
     if (options.inlineTemplate === true) {
       (schematics['@schematics/angular:component'] as JsonObject).inlineTemplate = true;
@@ -170,7 +171,7 @@ function addAppToWorkspaceFile(options: ApplicationOptions, workspace: Workspace
     if (options.inlineStyle === true) {
       (schematics['@schematics/angular:component'] as JsonObject).inlineStyle = true;
     }
-    if (options.style && options.style !== 'css') {
+    if (options.style && options.style !== Style.Css) {
       (schematics['@schematics/angular:component'] as JsonObject).styleext = options.style;
     }
   }
@@ -346,6 +347,8 @@ export default function (options: ApplicationOptions): Rule {
       projectRoot: newProjectRoot ? `${newProjectRoot}/${options.name}-e2e` : 'e2e',
     };
 
+    const styleExt = styleToFileExtention(options.style);
+
     return chain([
       addAppToWorkspaceFile(options, workspace),
       mergeWith(
@@ -356,6 +359,7 @@ export default function (options: ApplicationOptions): Rule {
             ...options,
             'dot': '.',
             relativePathToWorkspaceRoot,
+            styleExt,
           }),
           move(sourceRoot),
         ])),
@@ -417,6 +421,7 @@ 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/other-files/app.component.ts.template

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

packages/schematics/angular/application/schema.json

@@ -54,9 +54,16 @@
       "alias": "p"
     },
     "style": {
-      "description": "The file extension to use for style files.",
+      "description": "The file extension or preprocessor to use for style files.",
       "type": "string",
-      "default": "css"
+      "default": "css",
+      "enum": [
+        "css",
+        "scss",
+        "sass",
+        "less",
+        "styl"
+      ]
     },
     "skipTests": {
       "description": "When true, does not create \"spec.ts\" test files for the app.",

packages/schematics/angular/class/index_spec.ts

@@ -35,7 +35,6 @@ describe('Class Schematic', () => {
     inlineStyle: false,
     inlineTemplate: false,
     routing: false,
-    style: 'css',
     skipTests: false,
     skipPackageJson: false,
   };

packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.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.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
+  styleUrls: ['./<%= dasherize(name) %>.component.<%= styleExt %>']<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
 })

packages/schematics/angular/component/index.ts

@@ -32,7 +32,7 @@ import { applyLintFix } from '../utility/lint-fix';
 import { parseName } from '../utility/parse-name';
 import { buildDefaultPath, getProject } from '../utility/project';
 import { validateHtmlSelector, validateName } from '../utility/validation';
-import { Schema as ComponentOptions } from './schema';
+import { Schema as ComponentOptions, Style } from './schema';
 
 function readIntoSourceFile(host: Tree, modulePath: string): ts.SourceFile {
   const text = host.read(modulePath);
@@ -145,9 +145,9 @@ export default function (options: ComponentOptions): Rule {
 
     // todo remove these when we remove the deprecations
     options.style = (
-      options.style && options.style !== 'css'
+      options.style && options.style !== Style.Css
-        ? options.style : options.styleext
+        ? options.style : options.styleext as Style
-    ) || 'css';
+    ) || Style.Css;
     options.skipTests = options.skipTests || !options.spec;
 
     validateName(options.name);
@@ -155,12 +155,13 @@ 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('.__style__.template')) : noop(),
+      options.inlineStyle ? filter(path => !path.endsWith('.__styleExt__.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),
     ]);
@@ -174,3 +175,12 @@ 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/index_spec.ts

@@ -10,7 +10,7 @@ import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/te
 import { Schema as ApplicationOptions } from '../application/schema';
 import { createAppModule } from '../utility/test';
 import { Schema as WorkspaceOptions } from '../workspace/schema';
-import { ChangeDetection, Schema as ComponentOptions } from './schema';
+import { ChangeDetection, Schema as ComponentOptions, Style } from './schema';
 
 // tslint:disable:max-line-length
 describe('Component Schematic', () => {
@@ -24,7 +24,7 @@ describe('Component Schematic', () => {
     inlineStyle: false,
     inlineTemplate: false,
     changeDetection: ChangeDetection.Default,
-    style: 'css',
+    style: Style.Css,
     skipTests: false,
     module: undefined,
     export: false,
@@ -43,7 +43,7 @@ describe('Component Schematic', () => {
     inlineStyle: false,
     inlineTemplate: false,
     routing: false,
-    style: 'css',
+    style: Style.Css,
     skipTests: false,
     skipPackageJson: false,
   };
@@ -250,7 +250,16 @@ describe('Component Schematic', () => {
   });
 
   it('should respect the style option', () => {
-    const options = { ...defaultOptions, style: 'scss' };
+    const options = { ...defaultOptions, style: Style.Scss };
+    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(tree.files).not.toContain('/projects/bar/src/app/foo/foo.component.css');
+  });
+
+  it('should respect the style preprocessor option', () => {
+    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/);

packages/schematics/angular/component/schema.json

@@ -73,9 +73,16 @@
       "x-deprecated": "Use \"style\" instead."
     },
     "style": {
-      "description": "The file extension to use for style files.",
+      "description": "The file extension or preprocessor to use for style files.",
       "type": "string",
-      "default": "css"
+      "default": "css",
+      "enum": [
+        "css",
+        "scss",
+        "sass",
+        "less",
+        "styl"
+      ]
     },
     "spec": {
       "type": "boolean",

packages/schematics/angular/enum/index_spec.ts

@@ -32,7 +32,6 @@ describe('Enum Schematic', () => {
     inlineStyle: false,
     inlineTemplate: false,
     routing: false,
-    style: 'css',
     skipTests: false,
     skipPackageJson: false,
   };

packages/schematics/angular/interface/index_spec.ts

@@ -34,7 +34,6 @@ describe('Interface Schematic', () => {
     inlineStyle: false,
     inlineTemplate: false,
     routing: false,
-    style: 'css',
     skipTests: false,
     skipPackageJson: false,
   };

packages/schematics/angular/module/index_spec.ts

@@ -34,7 +34,6 @@ describe('Module Schematic', () => {
     inlineStyle: false,
     inlineTemplate: false,
     routing: false,
-    style: 'css',
     skipTests: false,
     skipPackageJson: false,
   };

packages/schematics/angular/ng-new/schema.json

@@ -111,15 +111,22 @@
       "alias": "p"
     },
     "style": {
-      "description": "The file extension to use for style files.",
+      "description": "The file extension or preprocessor to use for style files.",
       "type": "string",
       "default": "css",
+      "enum": [
+        "css",
+        "scss",
+        "sass",
+        "less",
+        "styl"
+      ],
       "x-prompt": {
         "message": "Which stylesheet format would you like to use?",
         "type": "list",
         "items": [
           { "value": "css", "label": "CSS" },
-          { "value": "scss", "label": "Sass   [ http://sass-lang.com   ]" },
+          { "value": "sass", "label": "Sass   [ http://sass-lang.com   ]" },
           { "value": "less", "label": "Less   [ http://lesscss.org     ]" },
           { "value": "styl", "label": "Stylus [ http://stylus-lang.com ]" }
         ]

packages/schematics/angular/pipe/index_spec.ts

@@ -37,7 +37,6 @@ describe('Pipe Schematic', () => {
     inlineStyle: false,
     inlineTemplate: false,
     routing: false,
-    style: 'css',
     skipTests: false,
     skipPackageJson: false,
   };

packages/schematics/angular/service-worker/index_spec.ts

@@ -35,7 +35,6 @@ describe('Service Worker Schematic', () => {
     inlineStyle: false,
     inlineTemplate: false,
     routing: false,
-    style: 'css',
     skipTests: false,
     skipPackageJson: false,
   };

packages/schematics/angular/universal/index_spec.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
-import { Schema as ApplicationOptions } from '../application/schema';
+import { Schema as ApplicationOptions, Style } from '../application/schema';
 import { Schema as WorkspaceOptions } from '../workspace/schema';
 import { Schema as UniversalOptions } from './schema';
 
@@ -33,7 +33,7 @@ describe('Universal Schematic', () => {
     inlineStyle: false,
     inlineTemplate: false,
     routing: false,
-    style: 'css',
+    style: Style.Css,
     skipTests: false,
     skipPackageJson: false,
   };
@@ -44,7 +44,7 @@ describe('Universal Schematic', () => {
     inlineStyle: false,
     inlineTemplate: false,
     routing: false,
-    style: 'css',
+    style: Style.Css,
     skipTests: false,
     skipPackageJson: false,
   };