From 0fca5f7389b4c86bde1c9f79e21f51e19921d3ec Mon Sep 17 00:00:00 2001 From: Alan Date: Wed, 27 Feb 2019 08:10:30 +0100 Subject: [PATCH] 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 --- ...styleExt__.template => styles.__style__.template} | 0 packages/schematics/angular/application/index.ts | 11 ++--------- .../schematics/angular/application/index_spec.ts | 6 +++--- .../other-files/app.component.ts.template | 2 +- ... __name@dasherize__.component.__style__.template} | 0 .../__name@dasherize__.component.ts.template | 2 +- packages/schematics/angular/component/index.ts | 12 +----------- packages/schematics/angular/component/index_spec.ts | 4 ++-- packages/schematics/angular/ng-new/schema.json | 9 +++++---- 9 files changed, 15 insertions(+), 31 deletions(-) rename packages/schematics/angular/application/files/src/{styles.__styleExt__.template => styles.__style__.template} (100%) rename packages/schematics/angular/component/files/__name@dasherize@if-flat__/{__name@dasherize__.component.__styleExt__.template => __name@dasherize__.component.__style__.template} (100%) diff --git a/packages/schematics/angular/application/files/src/styles.__styleExt__.template b/packages/schematics/angular/application/files/src/styles.__style__.template similarity index 100% rename from packages/schematics/angular/application/files/src/styles.__styleExt__.template rename to packages/schematics/angular/application/files/src/styles.__style__.template diff --git a/packages/schematics/angular/application/index.ts b/packages/schematics/angular/application/index.ts index 97b02484cfc8..3f326b65c4c8 100644 --- a/packages/schematics/angular/application/index.ts +++ b/packages/schematics/angular/application/index.ts @@ -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), diff --git a/packages/schematics/angular/application/index_spec.ts b/packages/schematics/angular/application/index_spec.ts index b81bc32ed39c..a99934e1cb6e 100644 --- a/packages/schematics/angular/application/index_spec.ts +++ b/packages/schematics/angular/application/index_spec.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', () => { diff --git a/packages/schematics/angular/application/other-files/app.component.ts.template b/packages/schematics/angular/application/other-files/app.component.ts.template index 91aad371b12d..36845433365f 100644 --- a/packages/schematics/angular/application/other-files/app.component.ts.template +++ b/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.<%= styleExt %>']<% } %> + styleUrls: ['./app.component.<%= style %>']<% } %> }) export class AppComponent { title = '<%= name %>'; diff --git a/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.component.__styleExt__.template b/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template similarity index 100% rename from packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.component.__styleExt__.template rename to packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template diff --git a/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template b/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template index b78148e8ed09..05940077a7fb 100644 --- a/packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template +++ b/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.<%= styleExt %>']<% } %><% if(!!viewEncapsulation) { %>, + styleUrls: ['./<%= dasherize(name) %>.component.<%= 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 9fd2be9d3007..48288a20f719 100644 --- a/packages/schematics/angular/component/index.ts +++ b/packages/schematics/angular/component/index.ts @@ -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'; - } -} diff --git a/packages/schematics/angular/component/index_spec.ts b/packages/schematics/angular/component/index_spec.ts index 669d465eee2b..e79895f49ccc 100644 --- a/packages/schematics/angular/component/index_spec.ts +++ b/packages/schematics/angular/component/index_spec.ts @@ -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'); }); diff --git a/packages/schematics/angular/ng-new/schema.json b/packages/schematics/angular/ng-new/schema.json index ea4c18bd2214..20565beb38d2 100644 --- a/packages/schematics/angular/ng-new/schema.json +++ b/packages/schematics/angular/ng-new/schema.json @@ -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 ] " } ] } },