Skip to content

fix(schematics): do not generate invalid stylesheet files #15235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 20, 2019
Merged

fix(schematics): do not generate invalid stylesheet files #15235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions src/cdk/schematics/ng-generate/drag-drop/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,19 @@ describe('CDK drag-drop schematic', () => {
expect(tree.files).toContain('/projects/material/src/app/foo/foo.component.scss');
});

it('should not generate invalid stylesheets', () => {
const tree = runner.runSchematic(
'drag-drop', {styleext: 'styl', ...baseOptions}, createTestApp(runner));

// In this case we expect the schematic to generate a plain "css" file because
// the component schematics are using CSS style templates which are not compatible
// with all CLI supported styles (e.g. Stylus or Sass)
expect(tree.files).toContain('/projects/material/src/app/foo/foo.component.css',
'Expected the schematic to generate a plain "css" file.');
expect(tree.files).not.toContain('/projects/material/src/app/foo/foo.component.styl',
'Expected the schematic to not generate a "stylus" file');
});

it('should fall back to the @schematics/angular:component option value', () => {
const tree = runner.runSchematic(
'drag-drop', baseOptions, createTestApp(runner, {style: 'less'}));
Expand Down
14 changes: 14 additions & 0 deletions src/cdk/schematics/utils/build-component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,12 @@ import {getProjectFromWorkspace} from './get-project';
import {getDefaultComponentOptions} from './schematic-options';
import {ts} from './version-agnostic-typescript';

/**
* List of style extensions which are CSS compatible. All supported CLI style extensions can be
* found here: angular/angular-cli/master/packages/schematics/angular/ng-new/schema.json#L118-L122
*/
const supportedCssExtensions = ['css', 'scss', 'less'];

function readIntoSourceFile(host: Tree, modulePath: string) {
const text = host.read(modulePath);
if (text === null) {
Expand Down Expand Up @@ -195,6 +201,14 @@ export function buildComponent(options: ComponentOptions,
validateName(options.name);
validateHtmlSelector(options.selector!);

// In case the specified style extension is not part of the supported CSS supersets,
// we generate the stylesheets with the "css" extension. This ensures that we don't
// accidentally generate invalid stylesheets (e.g. drag-drop-comp.styl) which will
// break the Angular CLI project. See: https://github.com/angular/material2/issues/15164
if (!supportedCssExtensions.includes(options.styleext!)) {
options.styleext = 'css';
}

// Object that will be used as context for the EJS templates.
const baseTemplateContext = {
...strings,
Expand Down