feat(@schematics/angular): add 'none' value for the 'style' option of the component schematic

Allow setting `--style=none` for the component schematic to prevent generation of any style file.  Previously this was possible only with `--inlineStyle=true`, which had the side-effect of adding an inline style block to the component decorator.  Useful for components or projects which have entirely externalised stylesheets and never want to use component-specific styles.

Author: daiscog

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

@@ -14,7 +14,7 @@ import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }
         display: block;
       }
     `<% } %>
-  ]<% } else { %>
+  ]<% } else if (style !== 'none') { %>
   styleUrls: ['./<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>

packages/schematics/angular/component/index.ts

@@ -30,7 +30,7 @@ import { applyLintFix } from '../utility/lint-fix';
 import { parseName } from '../utility/parse-name';
 import { validateHtmlSelector, validateName } from '../utility/validation';
 import { buildDefaultPath, getWorkspace } from '../utility/workspace';
-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);
@@ -135,9 +135,10 @@ export default function (options: ComponentOptions): Rule {
     validateName(options.name);
     validateHtmlSelector(options.selector);
 
+    const skipStyleFile = options.inlineStyle || options.style === Style.None;
     const templateSource = apply(url('./files'), [
       options.skipTests ? filter((path) => !path.endsWith('.spec.ts.template')) : noop(),
-      options.inlineStyle ? filter((path) => !path.endsWith('.__style__.template')) : noop(),
+      skipStyleFile ? filter((path) => !path.endsWith('.__style__.template')) : noop(),
       options.inlineTemplate ? filter((path) => !path.endsWith('.html.template')) : noop(),
       applyTemplates({
         ...strings,

packages/schematics/angular/component/index_spec.ts

@@ -7,7 +7,7 @@
  */
 
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
-import { Schema as ApplicationOptions } from '../application/schema';
+import { Style as AppStyle, Schema as ApplicationOptions } from '../application/schema';
 import { createAppModule } from '../utility/test';
 import { Schema as WorkspaceOptions } from '../workspace/schema';
 import { ChangeDetection, Schema as ComponentOptions, Style } from './schema';
@@ -43,7 +43,7 @@ describe('Component Schematic', () => {
     inlineStyle: false,
     inlineTemplate: false,
     routing: false,
-    style: Style.Css,
+    style: AppStyle.Css,
     skipTests: false,
     skipPackageJson: false,
   };
@@ -278,6 +278,15 @@ describe('Component Schematic', () => {
     expect(tree.files).not.toContain('/projects/bar/src/app/foo/foo.component.css');
   });
 
+  it('should respect the style=none option', async () => {
+    const options = { ...defaultOptions, style: Style.None };
+    const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
+    const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
+    expect(content).not.toMatch(/styleUrls: /);
+    expect(tree.files).not.toContain('/projects/bar/src/app/foo/foo.component.css');
+    expect(tree.files).not.toContain('/projects/bar/src/app/foo/foo.component.none');
+  });
+
   it('should respect the type option', async () => {
     const options = { ...defaultOptions, type: 'Route' };
     const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();

packages/schematics/angular/component/schema.json

@@ -77,10 +77,10 @@
       ]
     },
     "style": {
-      "description": "The file extension or preprocessor to use for style files.",
+      "description": "The file extension or preprocessor to use for style files, or 'none' to skip generating the style file.",
       "type": "string",
       "default": "css",
-      "enum": ["css", "scss", "sass", "less"],
+      "enum": ["css", "scss", "sass", "less", "none"],
       "x-user-analytics": 5
     },
     "type": {