Skip to content

Commit

Permalink
feat(SASS): when installing ember-bootstrap and ember-cli-sass is pre…
Browse files Browse the repository at this point in the history 
…sent, the SASS port of Bootstrap 3 is installed and an `@import` statement is automatically added to app.sass

Note: if you had ember-bootstrap installed previously and want to switch to SASS afterwards, first install ember-cli-sass and then run ember-bootstrap's default blueprint again (`ember generate ember-bootstrap`) to add support for it!
  • Loading branch information
@simonihmig
simonihmig committed Jan 21, 2017
1 parent 992b65f commit 5666a06
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 58 deletions.
19 changes: 16 additions & 3 deletions blueprints/ember-bootstrap/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,30 @@ const fs = require('fs');
const path = require('path');
const writeFile = rsvp.denodeify(fs.writeFile);

const bs3Version = '^3.3.7';

module.exports = {
normalizeEntityName() {
},

afterInstall() {
return this.addBowerDependencies()
return this.addDependencies()
.then(() => this.addPreprocessorImport());
},

addBowerDependencies() {
return this.addBowerPackageToProject('bootstrap', '~3.3.7');
addDependencies() {
let dependencies = this.project.dependencies();

let promises = [
];

if ('ember-cli-sass' in dependencies) {
promises.push(this.addPackageToProject('bootstrap-sass', bs3Version));
} else {
promises.push(this.addBowerPackageToProject('bootstrap', bs3Version));
}

return rsvp.all(promises);
},

addPreprocessorImport() {
Expand Down
78 changes: 51 additions & 27 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@ const defaultOptions = {
importBootstrapFont: true
};

const supportedPreprocessors = [
'less',
'sass'
];

module.exports = {
name: 'ember-bootstrap',

Expand All @@ -26,53 +31,72 @@ module.exports = {
}
this.app = app;

let options = extend(defaultOptions, app.options['ember-bootstrap']);
let bootstrapPath = path.join(app.bowerDirectory, 'bootstrap/dist');
this.preprocessor = this.findPreprocessor();

let hasLess = !!this.app.project.findAddonByName('ember-cli-less');
let hasPreprocessor = hasLess;
let options = extend(defaultOptions, app.options['ember-bootstrap']);
this.bootstrapOptions = options;

if (!hasPreprocessor) {
if (!this.hasPreprocessor()) {
let cssPath = this.getBootstrapStylesPath();
// Import css from bootstrap
if (options.importBootstrapCSS) {
app.import(path.join(bootstrapPath, 'css/bootstrap.css'));
app.import(path.join(bootstrapPath, 'css/bootstrap.css.map'), { destDir: 'assets' });
app.import(path.join(cssPath, 'bootstrap.css'));
app.import(path.join(cssPath, 'bootstrap.css.map'), { destDir: 'assets' });
}

if (options.importBootstrapTheme) {
app.import(path.join(bootstrapPath, 'css/bootstrap-theme.css'));
app.import(path.join(bootstrapPath, 'css/bootstrap-theme.css.map'), { destDir: 'assets' });
app.import(path.join(cssPath, 'bootstrap-theme.css'));
app.import(path.join(cssPath, 'bootstrap-theme.css.map'), { destDir: 'assets' });
}
}

// Import glyphicons
if (options.importBootstrapFont) {
app.import(path.join(bootstrapPath, 'fonts/glyphicons-halflings-regular.eot'), { destDir: '/fonts' });
app.import(path.join(bootstrapPath, 'fonts/glyphicons-halflings-regular.svg'), { destDir: '/fonts' });
app.import(path.join(bootstrapPath, 'fonts/glyphicons-halflings-regular.ttf'), { destDir: '/fonts' });
app.import(path.join(bootstrapPath, 'fonts/glyphicons-halflings-regular.woff'), { destDir: '/fonts' });
app.import(path.join(bootstrapPath, 'fonts/glyphicons-halflings-regular.woff2'), { destDir: '/fonts' });
}

if (!process.env.EMBER_CLI_FASTBOOT) {
app.import('vendor/transition.js');
}
},

treeForStyles(tree) {
let styleTrees = [];
findPreprocessor() {
return supportedPreprocessors.find((name) => !!this.app.project.findAddonByName(`ember-cli-${name}`));
},

getBootstrapStylesPath() {
switch (this.preprocessor) {
case 'sass':
return path.join(this.app.project.nodeModulesPath, 'bootstrap-sass', 'assets', 'stylesheets');
case 'less':
return path.join(this.app.bowerDirectory, 'bootstrap', 'less');
default:
return path.join(this.app.bowerDirectory, 'bootstrap', 'dist', 'css');
}
},

if (this.app.project.findAddonByName('ember-cli-less')) {
let lessTree = new Funnel(path.join(this.app.bowerDirectory, 'bootstrap/less'), {
getBootstrapFontPath() {
switch (this.preprocessor) {
case 'sass':
return path.join(this.app.project.nodeModulesPath, 'bootstrap-sass', 'assets', 'fonts');
case 'less':
default:
return path.join(this.app.bowerDirectory, 'bootstrap', 'fonts');
}
},

hasPreprocessor() {
return !!this.preprocessor;
},

treeForStyles() {
if (this.hasPreprocessor()) {
return new Funnel(this.getBootstrapStylesPath(), {
destDir: 'ember-bootstrap'
});
styleTrees.push(lessTree);
}
},

if (tree) {
styleTrees.push(tree);
treeForPublic() {
if (this.bootstrapOptions.importBootstrapFont) {
return new Funnel(this.getBootstrapFontPath(), {
destDir: 'fonts'
});
}

return mergeTrees(styleTrees, { overwrite: true });
}
};
56 changes: 28 additions & 28 deletions node-tests/blueprints/ember-bootstrap-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,34 +38,34 @@ describe('Acceptance: ember generate ember-bootstrap', function() {
}));
});

// it('creates app.scss if not existing', function() {
// let args = ['ember-bootstrap'];
//
// return emberNew()
// .then(() => modifyPackages([
// { name: 'ember-cli-sass' }
// ]))
// .then(() => emberGenerate(args))
// .then(() => {
// expect(file('app/styles/app.scss'))
// .to.contain('@import "ember-bootstrap/bootstrap";');
// expect(file('app/styles/app.less')).to.not.exist;
// });
// });
//
// it('adds @import to existing app.scss', function() {
// let args = ['ember-bootstrap'];
//
// return emberNew()
// .then(() => modifyPackages([
// { name: 'ember-cli-sass' }
// ]))
// .then(() => createStyleFixture('app.scss'))
// .then(() => emberGenerate(args, (file) => {
// expect(file('app/styles/app.scss')).to.contain('@import "ember-bootstrap/bootstrap";');
// expect(file('app/styles/app.less')).to.not.exist;
// }));
// });
it('creates app.scss if not existing', function() {
let args = ['ember-bootstrap'];

return emberNew()
.then(() => modifyPackages([
{ name: 'ember-cli-sass' }
]))
.then(() => emberGenerate(args))
.then(() => {
expect(file('app/styles/app.scss'))
.to.contain('@import "ember-bootstrap/bootstrap";');
expect(file('app/styles/app.less')).to.not.exist;
});
});

it('adds @import to existing app.scss', function() {
let args = ['ember-bootstrap'];

return emberNew()
.then(() => modifyPackages([
{ name: 'ember-cli-sass' }
]))
.then(() => createStyleFixture('app.scss'))
.then(() => emberGenerate(args, (file) => {
expect(file('app/styles/app.scss')).to.contain('@import "ember-bootstrap/bootstrap";');
expect(file('app/styles/app.less')).to.not.exist;
}));
});

it('creates app.less if not existing', function() {
let args = ['ember-bootstrap'];
Expand Down

0 comments on commit 5666a06

Please sign in to comment.