From d6fa2bde93c114e404eb5a38f9bf0c915a52fce6 Mon Sep 17 00:00:00 2001 From: Reto Ryter Date: Fri, 17 Jan 2020 08:52:47 +0100 Subject: [PATCH] feat(@schematics/angular): add opt in option 'displayBlock' --- packages/angular/cli/lib/config/schema.json | 6 ++++ ...ze__.__type@dasherize__.__style__.template | 6 ++++ ...dasherize__.__type@dasherize__.ts.template | 8 ++++- .../angular/component/index_spec.ts | 31 ++++++++++++++++++- .../schematics/angular/component/schema.json | 6 ++++ 5 files changed, 55 insertions(+), 2 deletions(-) diff --git a/packages/angular/cli/lib/config/schema.json b/packages/angular/cli/lib/config/schema.json index e08fae417a..38cab3f692 100644 --- a/packages/angular/cli/lib/config/schema.json +++ b/packages/angular/cli/lib/config/schema.json @@ -86,6 +86,12 @@ "default": "Default", "alias": "c" }, + "displayBlock": { + "description": "Specifies if the style will contain `:host { display: block; }`.", + "type": "boolean", + "default": false, + "alias": "b" + }, "entryComponent": { "type": "boolean", "default": false, diff --git a/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.__style__.template b/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.__style__.template index e69de29bb2..2ccecd1220 100644 --- a/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.__style__.template +++ b/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.__style__.template @@ -0,0 +1,6 @@ +<% if(displayBlock){ if(style != 'sass') { %>:host { + display: block; +} +<% } else { %>\:host + display: block; +<% }} %> \ No newline at end of file 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 0c373eefb2..edfa4bfc4b 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 @@ -8,7 +8,13 @@ import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }

`,<% } else { %> templateUrl: './<%= dasherize(name) %>.<%= dasherize(type) %>.html',<% } if(inlineStyle) { %> - styles: []<% } else { %> + styles: [<% if(displayBlock){ %> + ` + :host { + display: block; + } + `<% } %> + ],<% } else { %> styleUrls: ['./<%= dasherize(name) %>.<%= dasherize(type) %>.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>, encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>, changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %> diff --git a/packages/schematics/angular/component/index_spec.ts b/packages/schematics/angular/component/index_spec.ts index 696009a249..13ad0db416 100644 --- a/packages/schematics/angular/component/index_spec.ts +++ b/packages/schematics/angular/component/index_spec.ts @@ -22,6 +22,7 @@ describe('Component Schematic', () => { // path: 'src/app', inlineStyle: false, inlineTemplate: false, + displayBlock: false, changeDetection: ChangeDetection.Default, style: Style.Css, type: 'Component', @@ -248,6 +249,34 @@ describe('Component Schematic', () => { expect(tree.files).not.toContain('/projects/bar/src/app/foo/foo.component.css'); }); + it('should respect the displayBlock option when inlineStyle is `false`', async () => { + const options = { ...defaultOptions, displayBlock: true }; + const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise(); + const content = tree.readContent('/projects/bar/src/app/foo/foo.component.css'); + expect(content).toMatch(/:host {\n display: block;\n}\n/); + }); + + it('should respect the displayBlock option when inlineStyle is `false` and use correct syntax for `scss`', async () => { + const options = { ...defaultOptions, displayBlock: true, style: 'scss' }; + const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise(); + const content = tree.readContent('/projects/bar/src/app/foo/foo.component.scss'); + expect(content).toMatch(/:host {\n display: block;\n}\n/); + }); + + it('should respect the displayBlock option when inlineStyle is `false` and use correct syntax for `sass', async () => { + const options = { ...defaultOptions, displayBlock: true, style: 'sass' }; + const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise(); + const content = tree.readContent('/projects/bar/src/app/foo/foo.component.sass'); + expect(content).toMatch(/\\:host\n display: block;\n/); + }); + + it('should respect the displayBlock option when inlineStyle is `true`', async () => { + const options = { ...defaultOptions, displayBlock: true, inlineStyle: true }; + const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise(); + const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts'); + expect(content).toMatch(/:host {\n(\s*)display: block;(\s*)}\n/); + }); + it('should respect the style option', async () => { const options = { ...defaultOptions, style: Style.Sass }; const tree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise(); @@ -263,7 +292,7 @@ describe('Component Schematic', () => { const content = tree.readContent('/projects/bar/src/app/foo/foo.route.ts'); const testContent = tree.readContent('/projects/bar/src/app/foo/foo.route.spec.ts'); expect(content).toContain('export class FooRoute implements OnInit'); - expect(testContent).toContain('describe(\'FooRoute\''); + expect(testContent).toContain("describe('FooRoute'"); expect(tree.files).toContain('/projects/bar/src/app/foo/foo.route.css'); expect(tree.files).toContain('/projects/bar/src/app/foo/foo.route.html'); }); diff --git a/packages/schematics/angular/component/schema.json b/packages/schematics/angular/component/schema.json index 3b13e337ad..d33b15d5bd 100644 --- a/packages/schematics/angular/component/schema.json +++ b/packages/schematics/angular/component/schema.json @@ -27,6 +27,12 @@ }, "x-prompt": "What name would you like to use for the component?" }, + "displayBlock": { + "description": "Specifies if the style will contain `:host { display: block; }`.", + "type": "boolean", + "default": false, + "alias": "b" + }, "inlineStyle": { "description": "When true, includes styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file.", "type": "boolean",