Skip to content

Commit 4718de4

Browse files
Alanmgechev
Alan
authored and
mgechev
committed
feat(@schematics/angular): only support known style extentions
Fixes #13149
1 parent b1b365e commit 4718de4

File tree

19 files changed

+77
-32
lines changed

19 files changed

+77
-32
lines changed

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

+9-2
Original file line numberDiff line numberDiff line change
@@ -140,9 +140,16 @@
140140
"default": "css"
141141
},
142142
"style": {
143-
"description": "The file extension to use for style files.",
143+
"description": "The file extension or preprocessor to use for style files.",
144144
"type": "string",
145-
"default": "css"
145+
"default": "css",
146+
"enum": [
147+
"css",
148+
"scss",
149+
"sass",
150+
"less",
151+
"styl"
152+
]
146153
},
147154
"viewEncapsulation": {
148155
"description": "Specifies the view encapsulation strategy.",

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

-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ describe('App Shell Schematic', () => {
3333
inlineStyle: false,
3434
inlineTemplate: false,
3535
routing: true,
36-
style: 'css',
3736
skipTests: false,
3837
skipPackageJson: false,
3938
};

‎packages/schematics/angular/application/files/src/styles.__style__.template renamed to ‎packages/schematics/angular/application/files/src/styles.__styleExt__.template

File renamed without changes.

‎packages/schematics/angular/application/index.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import {
3131
url,
3232
} from '@angular-devkit/schematics';
3333
import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
34+
import { styleToFileExtention } from '../component/index';
3435
import { Schema as ComponentOptions } from '../component/schema';
3536
import { Schema as E2eOptions } from '../e2e/schema';
3637
import {
@@ -48,7 +49,7 @@ import {
4849
WorkspaceProject,
4950
WorkspaceSchema,
5051
} from '../utility/workspace-models';
51-
import { Schema as ApplicationOptions } from './schema';
52+
import { Schema as ApplicationOptions, Style } from './schema';
5253

5354

5455
// TODO: use JsonAST
@@ -162,15 +163,15 @@ function addAppToWorkspaceFile(options: ApplicationOptions, workspace: Workspace
162163

163164
if (options.inlineTemplate === true
164165
|| options.inlineStyle === true
165-
|| options.style !== 'css') {
166+
|| options.style !== Style.Css) {
166167
schematics['@schematics/angular:component'] = {};
167168
if (options.inlineTemplate === true) {
168169
(schematics['@schematics/angular:component'] as JsonObject).inlineTemplate = true;
169170
}
170171
if (options.inlineStyle === true) {
171172
(schematics['@schematics/angular:component'] as JsonObject).inlineStyle = true;
172173
}
173-
if (options.style && options.style !== 'css') {
174+
if (options.style && options.style !== Style.Css) {
174175
(schematics['@schematics/angular:component'] as JsonObject).styleext = options.style;
175176
}
176177
}
@@ -346,6 +347,8 @@ export default function (options: ApplicationOptions): Rule {
346347
projectRoot: newProjectRoot ? `${newProjectRoot}/${options.name}-e2e` : 'e2e',
347348
};
348349

350+
const styleExt = styleToFileExtention(options.style);
351+
349352
return chain([
350353
addAppToWorkspaceFile(options, workspace),
351354
mergeWith(
@@ -356,6 +359,7 @@ export default function (options: ApplicationOptions): Rule {
356359
...options,
357360
'dot': '.',
358361
relativePathToWorkspaceRoot,
362+
styleExt,
359363
}),
360364
move(sourceRoot),
361365
])),
@@ -417,6 +421,7 @@ export default function (options: ApplicationOptions): Rule {
417421
...options as any, // tslint:disable-line:no-any
418422
selector: appRootSelector,
419423
...componentOptions,
424+
styleExt,
420425
}),
421426
move(sourceDir),
422427
]), MergeStrategy.Overwrite),

‎packages/schematics/angular/application/other-files/app.component.ts.template

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { Component } from '@angular/core';
2828
`,<% } else { %>
2929
templateUrl: './app.component.html',<% } if(inlineStyle) { %>
3030
styles: []<% } else { %>
31-
styleUrls: ['./app.component.<%= style %>']<% } %>
31+
styleUrls: ['./app.component.<%= styleExt %>']<% } %>
3232
})
3333
export class AppComponent {
3434
title = '<%= name %>';

‎packages/schematics/angular/application/schema.json

+9-2
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,16 @@
5454
"alias": "p"
5555
},
5656
"style": {
57-
"description": "The file extension to use for style files.",
57+
"description": "The file extension or preprocessor to use for style files.",
5858
"type": "string",
59-
"default": "css"
59+
"default": "css",
60+
"enum": [
61+
"css",
62+
"scss",
63+
"sass",
64+
"less",
65+
"styl"
66+
]
6067
},
6168
"skipTests": {
6269
"description": "When true, does not create \"spec.ts\" test files for the app.",

‎packages/schematics/angular/class/index_spec.ts

-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ describe('Class Schematic', () => {
3535
inlineStyle: false,
3636
inlineTemplate: false,
3737
routing: false,
38-
style: 'css',
3938
skipTests: false,
4039
skipPackageJson: false,
4140
};

‎packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template renamed to ‎packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.component.__styleExt__.template

File renamed without changes.

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Component, OnInit<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }
99
`,<% } else { %>
1010
templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %>
1111
styles: []<% } else { %>
12-
styleUrls: ['./<%= dasherize(name) %>.component.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
12+
styleUrls: ['./<%= dasherize(name) %>.component.<%= styleExt %>']<% } %><% if(!!viewEncapsulation) { %>,
1313
encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
1414
changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
1515
})

‎packages/schematics/angular/component/index.ts

+15-5
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import { applyLintFix } from '../utility/lint-fix';
3232
import { parseName } from '../utility/parse-name';
3333
import { buildDefaultPath, getProject } from '../utility/project';
3434
import { validateHtmlSelector, validateName } from '../utility/validation';
35-
import { Schema as ComponentOptions } from './schema';
35+
import { Schema as ComponentOptions, Style } from './schema';
3636

3737
function readIntoSourceFile(host: Tree, modulePath: string): ts.SourceFile {
3838
const text = host.read(modulePath);
@@ -145,22 +145,23 @@ export default function (options: ComponentOptions): Rule {
145145

146146
// todo remove these when we remove the deprecations
147147
options.style = (
148-
options.style && options.style !== 'css'
149-
? options.style : options.styleext
150-
) || 'css';
148+
options.style && options.style !== Style.Css
149+
? options.style : options.styleext as Style
150+
) || Style.Css;
151151
options.skipTests = options.skipTests || !options.spec;
152152

153153
validateName(options.name);
154154
validateHtmlSelector(options.selector);
155155

156156
const templateSource = apply(url('./files'), [
157157
options.skipTests ? filter(path => !path.endsWith('.spec.ts.template')) : noop(),
158-
options.inlineStyle ? filter(path => !path.endsWith('.__style__.template')) : noop(),
158+
options.inlineStyle ? filter(path => !path.endsWith('.__styleExt__.template')) : noop(),
159159
options.inlineTemplate ? filter(path => !path.endsWith('.html.template')) : noop(),
160160
applyTemplates({
161161
...strings,
162162
'if-flat': (s: string) => options.flat ? '' : s,
163163
...options,
164+
styleExt: styleToFileExtention(options.style),
164165
}),
165166
move(parsedPath.path),
166167
]);
@@ -174,3 +175,12 @@ export default function (options: ComponentOptions): Rule {
174175
]);
175176
};
176177
}
178+
179+
export function styleToFileExtention(style: Style | undefined): string {
180+
switch (style) {
181+
case Style.Sass:
182+
return 'scss';
183+
default:
184+
return style || 'css';
185+
}
186+
}

‎packages/schematics/angular/component/index_spec.ts

+13-4
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/te
1010
import { Schema as ApplicationOptions } from '../application/schema';
1111
import { createAppModule } from '../utility/test';
1212
import { Schema as WorkspaceOptions } from '../workspace/schema';
13-
import { ChangeDetection, Schema as ComponentOptions } from './schema';
13+
import { ChangeDetection, Schema as ComponentOptions, Style } from './schema';
1414

1515
// tslint:disable:max-line-length
1616
describe('Component Schematic', () => {
@@ -24,7 +24,7 @@ describe('Component Schematic', () => {
2424
inlineStyle: false,
2525
inlineTemplate: false,
2626
changeDetection: ChangeDetection.Default,
27-
style: 'css',
27+
style: Style.Css,
2828
skipTests: false,
2929
module: undefined,
3030
export: false,
@@ -43,7 +43,7 @@ describe('Component Schematic', () => {
4343
inlineStyle: false,
4444
inlineTemplate: false,
4545
routing: false,
46-
style: 'css',
46+
style: Style.Css,
4747
skipTests: false,
4848
skipPackageJson: false,
4949
};
@@ -250,7 +250,16 @@ describe('Component Schematic', () => {
250250
});
251251

252252
it('should respect the style option', () => {
253-
const options = { ...defaultOptions, style: 'scss' };
253+
const options = { ...defaultOptions, style: Style.Scss };
254+
const tree = schematicRunner.runSchematic('component', options, appTree);
255+
const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
256+
expect(content).toMatch(/styleUrls: \['.\/foo.component.scss/);
257+
expect(tree.files).toContain('/projects/bar/src/app/foo/foo.component.scss');
258+
expect(tree.files).not.toContain('/projects/bar/src/app/foo/foo.component.css');
259+
});
260+
261+
it('should respect the style preprocessor option', () => {
262+
const options = { ...defaultOptions, style: Style.Sass };
254263
const tree = schematicRunner.runSchematic('component', options, appTree);
255264
const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
256265
expect(content).toMatch(/styleUrls: \['.\/foo.component.scss/);

‎packages/schematics/angular/component/schema.json

+9-2
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,16 @@
7373
"x-deprecated": "Use \"style\" instead."
7474
},
7575
"style": {
76-
"description": "The file extension to use for style files.",
76+
"description": "The file extension or preprocessor to use for style files.",
7777
"type": "string",
78-
"default": "css"
78+
"default": "css",
79+
"enum": [
80+
"css",
81+
"scss",
82+
"sass",
83+
"less",
84+
"styl"
85+
]
7986
},
8087
"spec": {
8188
"type": "boolean",

‎packages/schematics/angular/enum/index_spec.ts

-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ describe('Enum Schematic', () => {
3232
inlineStyle: false,
3333
inlineTemplate: false,
3434
routing: false,
35-
style: 'css',
3635
skipTests: false,
3736
skipPackageJson: false,
3837
};

‎packages/schematics/angular/interface/index_spec.ts

-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ describe('Interface Schematic', () => {
3434
inlineStyle: false,
3535
inlineTemplate: false,
3636
routing: false,
37-
style: 'css',
3837
skipTests: false,
3938
skipPackageJson: false,
4039
};

‎packages/schematics/angular/module/index_spec.ts

-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ describe('Module Schematic', () => {
3434
inlineStyle: false,
3535
inlineTemplate: false,
3636
routing: false,
37-
style: 'css',
3837
skipTests: false,
3938
skipPackageJson: false,
4039
};

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

+9-2
Original file line numberDiff line numberDiff line change
@@ -111,15 +111,22 @@
111111
"alias": "p"
112112
},
113113
"style": {
114-
"description": "The file extension to use for style files.",
114+
"description": "The file extension or preprocessor to use for style files.",
115115
"type": "string",
116116
"default": "css",
117+
"enum": [
118+
"css",
119+
"scss",
120+
"sass",
121+
"less",
122+
"styl"
123+
],
117124
"x-prompt": {
118125
"message": "Which stylesheet format would you like to use?",
119126
"type": "list",
120127
"items": [
121128
{ "value": "css", "label": "CSS" },
122-
{ "value": "scss", "label": "Sass [ http://sass-lang.com ]" },
129+
{ "value": "sass", "label": "Sass [ http://sass-lang.com ]" },
123130
{ "value": "less", "label": "Less [ http://lesscss.org ]" },
124131
{ "value": "styl", "label": "Stylus [ http://stylus-lang.com ]" }
125132
]

‎packages/schematics/angular/pipe/index_spec.ts

-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ describe('Pipe Schematic', () => {
3737
inlineStyle: false,
3838
inlineTemplate: false,
3939
routing: false,
40-
style: 'css',
4140
skipTests: false,
4241
skipPackageJson: false,
4342
};

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

-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ describe('Service Worker Schematic', () => {
3535
inlineStyle: false,
3636
inlineTemplate: false,
3737
routing: false,
38-
style: 'css',
3938
skipTests: false,
4039
skipPackageJson: false,
4140
};

‎packages/schematics/angular/universal/index_spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88
import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
9-
import { Schema as ApplicationOptions } from '../application/schema';
9+
import { Schema as ApplicationOptions, Style } from '../application/schema';
1010
import { Schema as WorkspaceOptions } from '../workspace/schema';
1111
import { Schema as UniversalOptions } from './schema';
1212

@@ -33,7 +33,7 @@ describe('Universal Schematic', () => {
3333
inlineStyle: false,
3434
inlineTemplate: false,
3535
routing: false,
36-
style: 'css',
36+
style: Style.Css,
3737
skipTests: false,
3838
skipPackageJson: false,
3939
};
@@ -44,7 +44,7 @@ describe('Universal Schematic', () => {
4444
inlineStyle: false,
4545
inlineTemplate: false,
4646
routing: false,
47-
style: 'css',
47+
style: Style.Css,
4848
skipTests: false,
4949
skipPackageJson: false,
5050
};

0 commit comments

Comments
 (0)