From 8ad1539c5e73bad30eb6eb340379d64db208098c Mon Sep 17 00:00:00 2001
From: David Scourfield <daiscog@users.noreply.github.com>
Date: Wed, 16 Jun 2021 12:40:26 +0100
Subject: [PATCH] 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.
---
 ..._name@dasherize__.__type@dasherize__.ts.template |  2 +-
 packages/schematics/angular/component/index.ts      |  5 +++--
 packages/schematics/angular/component/index_spec.ts | 13 +++++++++++--
 packages/schematics/angular/component/schema.json   |  4 ++--
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template b/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template
index ad67867d33..e972ffdcb2 100644
--- a/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template
+++ b/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 %><% } %>
diff --git a/packages/schematics/angular/component/index.ts b/packages/schematics/angular/component/index.ts
index fa8315bce3..19a0599d09 100644
--- a/packages/schematics/angular/component/index.ts
+++ b/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,
diff --git a/packages/schematics/angular/component/index_spec.ts b/packages/schematics/angular/component/index_spec.ts
index 055ff8ee8c..f0482f9788 100644
--- a/packages/schematics/angular/component/index_spec.ts
+++ b/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();
diff --git a/packages/schematics/angular/component/schema.json b/packages/schematics/angular/component/schema.json
index 552ef5164e..69ccab2084 100644
--- a/packages/schematics/angular/component/schema.json
+++ b/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": {