diff --git a/addon/ng2/blueprints/component/files/__path__/__name__.component.ts b/addon/ng2/blueprints/component/files/__path__/__name__.component.ts index cc31f7820898..7e485321bcbe 100644 --- a/addon/ng2/blueprints/component/files/__path__/__name__.component.ts +++ b/addon/ng2/blueprints/component/files/__path__/__name__.component.ts @@ -10,7 +10,7 @@ import { Component, OnInit } from '@angular/core'; `,<% } else { %> templateUrl: '<%= dasherizedModuleName %>.component.html',<% } if(inlineStyle) { %> styles: []<% } else { %> - styleUrls: ['<%= dasherizedModuleName %>.component.css']<% } %> + styleUrls: ['<%= dasherizedModuleName %>.component.<%= styleExt %>']<% } %> }) export class <%= classifiedModuleName %>Component implements OnInit { diff --git a/addon/ng2/blueprints/component/index.js b/addon/ng2/blueprints/component/index.js index 750b8beb25eb..6e81ce1c77f2 100644 --- a/addon/ng2/blueprints/component/index.js +++ b/addon/ng2/blueprints/component/index.js @@ -54,7 +54,8 @@ module.exports = { route: options.route, isLazyRoute: !!options.isLazyRoute, isAppComponent: !!options.isAppComponent, - selector: this.selector + selector: this.selector, + styleExt: this.styleExt }; }, diff --git a/addon/ng2/blueprints/ng2/files/__path__/app/app.component.ts b/addon/ng2/blueprints/ng2/files/__path__/app/app.component.ts index 7fd0dc4b197d..c9b95fe6be12 100644 --- a/addon/ng2/blueprints/ng2/files/__path__/app/app.component.ts +++ b/addon/ng2/blueprints/ng2/files/__path__/app/app.component.ts @@ -11,7 +11,7 @@ import { APP_SHELL_DIRECTIVES } from '@angular/app-shell';<% } %> `, styles: [], directives: [APP_SHELL_DIRECTIVES]<% } else { %>templateUrl: 'app.component.html', - styleUrls: ['app.component.css']<% } %> + styleUrls: ['app.component.<%= styleExt %>']<% } %> }) export class AppComponent { title = 'app works!'; diff --git a/addon/ng2/blueprints/ng2/files/package.json b/addon/ng2/blueprints/ng2/files/package.json index 467f32648b28..f3027ebe6b7e 100644 --- a/addon/ng2/blueprints/ng2/files/package.json +++ b/addon/ng2/blueprints/ng2/files/package.json @@ -47,6 +47,6 @@ "ts-node": "0.9.1", "tslint": "3.11.0", "typescript": "^1.9.0-dev.20160627-1.0", - "typings": "^1.3.1"<%= stylePackage %> + "typings": "^1.3.1" } } diff --git a/addon/ng2/blueprints/ng2/index.js b/addon/ng2/blueprints/ng2/index.js index 827a95b443e0..146ef7c50023 100644 --- a/addon/ng2/blueprints/ng2/index.js +++ b/addon/ng2/blueprints/ng2/index.js @@ -2,7 +2,6 @@ const Blueprint = require('ember-cli/lib/models/blueprint'); const path = require('path'); const stringUtils = require('ember-cli-string-utils'); const getFiles = Blueprint.prototype.files; -const EOL = require('os').EOL; module.exports = { description: '', @@ -29,17 +28,6 @@ module.exports = { const fullAppName = stringUtils.dasherize(options.entity.name) .replace(/-(.)/g, (_, l) => ' ' + l.toUpperCase()) .replace(/^./, (l) => l.toUpperCase()); - - var stylePackage = ''; - switch(options.style.toLowerCase()) { - case 'sass': - case 'scss': - stylePackage = `,${EOL} "node-sass": "3.7.0"`; - break; - case 'styl': - stylePackage = `,${EOL} "stylus": "0.54.5"`; - break; - } return { htmlComponentName: stringUtils.dasherize(options.entity.name), @@ -50,8 +38,7 @@ module.exports = { prefix: options.prefix, styleExt: this.styleExt, refToTypings: refToTypings, - isMobile: options.mobile, - stylePackage: stylePackage + isMobile: options.mobile }; }, diff --git a/tests/e2e/e2e_workflow.spec.js b/tests/e2e/e2e_workflow.spec.js index 053a4d714360..b4a6b984e054 100644 --- a/tests/e2e/e2e_workflow.spec.js +++ b/tests/e2e/e2e_workflow.spec.js @@ -319,120 +319,93 @@ describe('Basic end-to-end Workflow', function () { expect(existsSync(tmpFileLocation)).to.be.equal(true); }); - it.skip('Installs sass support successfully', function() { + // Mobile mode doesn't have styles + it_not_mobile('Supports scss in styleUrls', function() { this.timeout(420000); - sh.exec('npm install node-sass', { silent: true }); - return ng(['generate', 'component', 'test-component']) - .then(() => { - let componentPath = path.join(process.cwd(), 'src', 'app', 'test-component'); - let cssFile = path.join(componentPath, 'test-component.component.css'); - let scssFile = path.join(componentPath, 'test-component.component.scss'); - let scssPartialFile = path.join(componentPath, '_test-component.component.partial.scss'); - - let scssPartialExample = '.partial {\n @extend .outer;\n }'; - fs.writeFileSync(scssPartialFile, scssPartialExample, 'utf8'); - expect(existsSync(scssPartialFile)).to.be.equal(true); - - expect(existsSync(componentPath)).to.be.equal(true); - sh.mv(cssFile, scssFile); - expect(existsSync(scssFile)).to.be.equal(true); - expect(existsSync(cssFile)).to.be.equal(false); - let scssExample = '@import "test-component.component.partial";\n\n.outer {\n .inner { background: #fff; }\n }'; - fs.writeFileSync(scssFile, scssExample, 'utf8'); - - sh.exec(`${ngBin} build`); - let destCss = path.join(process.cwd(), 'dist', 'app', 'test-component', 'test-component.component.css'); - expect(existsSync(destCss)).to.be.equal(true); - let contents = fs.readFileSync(destCss, 'utf8'); - expect(contents).to.include('.outer .inner'); - expect(contents).to.include('.partial .inner'); - - sh.rm('-f', destCss); - process.chdir('src'); - sh.exec(`${ngBin} build`); - expect(existsSync(destCss)).to.be.equal(true); - contents = fs.readFileSync(destCss, 'utf8'); - expect(contents).to.include('.outer .inner'); - expect(contents).to.include('.partial .inner'); - - process.chdir('..'); - sh.exec('npm uninstall node-sass', { silent: true }); - }); + let cssFilename = 'app.component.css'; + let scssFilename = 'app.component.scss'; + let componentPath = path.join(process.cwd(), 'src', 'app'); + let componentFile = path.join(componentPath, 'app.component.ts'); + let cssFile = path.join(componentPath, cssFilename); + let scssFile = path.join(componentPath, scssFilename); + let scssExample = '@import "app.component.partial";\n\n.outer {\n .inner { background: #fff; }\n }'; + let scssPartialFile = path.join(componentPath, '_app.component.partial.scss'); + let scssPartialExample = '.partial {\n @extend .outer;\n }'; + let componentContents = fs.readFileSync(componentFile, 'utf8'); + + sh.mv(cssFile, scssFile); + fs.writeFileSync(scssFile, scssExample, 'utf8'); + fs.writeFileSync(scssPartialFile, scssPartialExample, 'utf8'); + fs.writeFileSync(componentFile, componentContents.replace(new RegExp(cssFilename, 'g'), scssFilename), 'utf8'); + + sh.exec(`${ngBin} build`); + let destCssBundle = path.join(process.cwd(), 'dist', 'main.bundle.js'); + let contents = fs.readFileSync(destCssBundle, 'utf8'); + expect(contents).to.include('.outer .inner'); + expect(contents).to.include('.partial .inner'); + + sh.mv(scssFile, cssFile); + fs.writeFileSync(cssFile, '', 'utf8'); + fs.writeFileSync(componentFile, componentContents, 'utf8'); + sh.rm('-f', scssPartialFile); }); - it.skip('Installs less support successfully', function() { + // Mobile mode doesn't have styles + it_not_mobile('Supports less in styleUrls', function() { this.timeout(420000); - sh.exec('npm install less', { silent: true }); - return ng(['generate', 'component', 'test-component']) - .then(() => { - let componentPath = path.join(process.cwd(), 'src', 'app', 'test-component'); - let cssFile = path.join(componentPath, 'test-component.component.css'); - let lessFile = path.join(componentPath, 'test-component.component.less'); - - expect(existsSync(componentPath)).to.be.equal(true); - sh.mv(cssFile, lessFile); - expect(existsSync(lessFile)).to.be.equal(true); - expect(existsSync(cssFile)).to.be.equal(false); - let lessExample = '.outer {\n .inner { background: #fff; }\n }'; - fs.writeFileSync(lessFile, lessExample, 'utf8'); - - sh.exec(`${ngBin} build`); - let destCss = path.join(process.cwd(), 'dist', 'app', 'test-component', 'test-component.component.css'); - expect(existsSync(destCss)).to.be.equal(true); - let contents = fs.readFileSync(destCss, 'utf8'); - expect(contents).to.include('.outer .inner'); - - sh.rm('-f', destCss); - process.chdir('src'); - sh.exec(`${ngBin} build`); - expect(existsSync(destCss)).to.be.equal(true); - contents = fs.readFileSync(destCss, 'utf8'); - expect(contents).to.include('.outer .inner'); - - process.chdir('..'); - sh.exec('npm uninstall less', { silent: true }); - }); + let cssFilename = 'app.component.css'; + let lessFilename = 'app.component.less'; + let componentPath = path.join(process.cwd(), 'src', 'app'); + let componentFile = path.join(componentPath, 'app.component.ts'); + let cssFile = path.join(componentPath, cssFilename); + let lessFile = path.join(componentPath, lessFilename); + let lessExample = '.outer {\n .inner { background: #fff; }\n }'; + let componentContents = fs.readFileSync(componentFile, 'utf8'); + + sh.mv(cssFile, lessFile); + fs.writeFileSync(lessFile, lessExample, 'utf8'); + fs.writeFileSync(componentFile, componentContents.replace(new RegExp(cssFilename, 'g'), lessFilename), 'utf8'); + + sh.exec(`${ngBin} build`); + let destCssBundle = path.join(process.cwd(), 'dist', 'main.bundle.js'); + let contents = fs.readFileSync(destCssBundle, 'utf8'); + expect(contents).to.include('.outer .inner'); + + fs.writeFileSync(lessFile, '', 'utf8'); + sh.mv(lessFile, cssFile); + fs.writeFileSync(componentFile, componentContents, 'utf8'); }); - it.skip('Installs stylus support successfully', function() { + // Mobile mode doesn't have styles + it_not_mobile('Supports stylus in styleUrls', function() { this.timeout(420000); - sh.exec('npm install stylus', { silent: true }); - return ng(['generate', 'component', 'test-component']) - .then(() => { - let componentPath = path.join(process.cwd(), 'src', 'app', 'test-component'); - let cssFile = path.join(componentPath, 'test-component.component.css'); - let stylusFile = path.join(componentPath, 'test-component.component.styl'); - - sh.mv(cssFile, stylusFile); - expect(existsSync(stylusFile)).to.be.equal(true); - expect(existsSync(cssFile)).to.be.equal(false); - let stylusExample = '.outer {\n .inner { background: #fff; }\n }'; - fs.writeFileSync(stylusFile, stylusExample, 'utf8'); - - sh.exec(`${ngBin} build`); - let destCss = path.join(process.cwd(), 'dist', 'app', 'test-component', 'test-component.component.css'); - expect(existsSync(destCss)).to.be.equal(true); - let contents = fs.readFileSync(destCss, 'utf8'); - expect(contents).to.include('.outer .inner'); - - sh.rm('-f', destCss); - process.chdir('src'); - sh.exec(`${ngBin} build`); - expect(existsSync(destCss)).to.be.equal(true); - contents = fs.readFileSync(destCss, 'utf8'); - expect(contents).to.include('.outer .inner'); - - process.chdir('..'); - sh.exec('npm uninstall stylus', { silent: true }); - }); + let cssFilename = 'app.component.css'; + let stylusFilename = 'app.component.scss'; + let componentPath = path.join(process.cwd(), 'src', 'app'); + let componentFile = path.join(componentPath, 'app.component.ts'); + let cssFile = path.join(componentPath, cssFilename); + let stylusFile = path.join(componentPath, stylusFilename); + let stylusExample = '.outer {\n .inner { background: #fff; }\n }'; + let componentContents = fs.readFileSync(componentFile, 'utf8'); + + sh.mv(cssFile, stylusFile); + fs.writeFileSync(stylusFile, stylusExample, 'utf8'); + fs.writeFileSync(componentFile, componentContents.replace(new RegExp(cssFilename, 'g'), stylusFilename), 'utf8'); + + sh.exec(`${ngBin} build`); + let destCssBundle = path.join(process.cwd(), 'dist', 'main.bundle.js'); + let contents = fs.readFileSync(destCssBundle, 'utf8'); + expect(contents).to.include('.outer .inner'); + + fs.writeFileSync(stylusFile, '', 'utf8'); + sh.mv(stylusFile, cssFile); + fs.writeFileSync(componentFile, componentContents, 'utf8'); }); - // This test causes complications with path resolution in TS broccoli plugin, - // and isn't mobile specific - it_not_mobile('Turn on `noImplicitAny` in tsconfig.json and rebuild', function () { + it('Turn on `noImplicitAny` in tsconfig.json and rebuild', function () { this.timeout(420000); const configFilePath = path.join(process.cwd(), 'src', 'tsconfig.json'); @@ -443,10 +416,8 @@ describe('Basic end-to-end Workflow', function () { sh.rm('-rf', path.join(process.cwd(), 'dist')); - return ng(['build']) - .then(() => { - expect(existsSync(path.join(process.cwd(), 'dist'))).to.be.equal(true); - }); + sh.exec(`${ngBin} build`); + expect(existsSync(path.join(process.cwd(), 'dist'))).to.be.equal(true); }); it('Turn on path mapping in tsconfig.json and rebuild', function () {