diff --git a/build/autoprefixer-options.js b/build/autoprefixer-options.js new file mode 100644 index 00000000000..7747b94f43e --- /dev/null +++ b/build/autoprefixer-options.js @@ -0,0 +1,9 @@ +// Options for autoprefixer. See https://github.com/postcss/autoprefixer#options +module.exports = { + // To see the full list of supported browers, you can direcly use `browserslist` + browsers: [ + 'last 2 versions', + 'not ie <= 10', + 'not ie_mob <= 10', + ] +}; diff --git a/ember-cli-build.js b/ember-cli-build.js index 99c6edd0a3a..c76c8afe39b 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -1,8 +1,47 @@ -/* global require, module */ +var fs = require('fs'); +var path = require('path'); +var mergeTrees = require('broccoli-merge-trees'); var Angular2App = require('angular-cli/lib/broccoli/angular2-app'); +var BroccoliSass = require('broccoli-sass'); +var broccoliAutoprefixer = require('broccoli-autoprefixer'); + +var autoprefixerOptions = require('./build/autoprefixer-options'); module.exports = function(defaults) { - var app = new Angular2App(defaults); - return app.toTree(); + var demoAppCssTree = new BroccoliSass(['src/demo-app'], './demo-app.scss', 'demo-app.css'); + var componentCssTree = getComponentsCssTree(); + var angularAppTree = new Angular2App(defaults); + + return mergeTrees([ + angularAppTree.toTree(), + componentCssTree, + demoAppCssTree, + ]); }; + + +/** Gets the tree for all of the components' CSS. */ +function getComponentsCssTree() { + // Assume that the list of components is all directories in `src/components/` + var componentsSrc = 'src/components/'; + var components = fs.readdirSync(componentsSrc) + .filter(file => fs.statSync(path.join(componentsSrc, file)).isDirectory()); + + var componentCssTrees = components.reduce((trees, component) => { + // We want each individual scss file to be compiled into a corresponding css file + // so that they can be individually included in styleUrls. + var scssFiles = fs.readdirSync(path.join(componentsSrc, component)) + .filter(file => path.extname(file) === '.scss') + .map(file => path.basename(file, '.scss')); + + return scssFiles.map(fileName => { + return BroccoliSass( + [`src/components/${component}`, 'src/core/style'], // Directories w/ scss sources + `./${component}.scss`, // Root scss input file + `components/${component}/${fileName}.css`); // Css output file + }).concat(trees); + }, []); + + return broccoliAutoprefixer(mergeTrees(componentCssTrees), autoprefixerOptions); +} diff --git a/package.json b/package.json index a5a2a342752..687132f8130 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,9 @@ "devDependencies": { "angular-cli": "0.0.*", "angular-cli-github-pages": "^0.2.0", + "broccoli-autoprefixer": "^4.1.0", + "broccoli-merge-trees": "^1.1.1", + "broccoli-sass": "^0.7.0", "ember-cli-inject-live-reload": "^1.3.0", "jasmine-core": "^2.3.4", "karma": "^0.13.15", diff --git a/src/components/button/button.scss b/src/components/button/button.scss index e69de29bb2d..c60557c4497 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -0,0 +1,7 @@ +@import 'variables'; + +.hello { + display: flex; + width: $size; + height: $size; +} diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 2a4a8e04838..5006503e142 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -12,10 +12,8 @@ import {Component, View, ViewEncapsulation, OnChanges, SimpleChange} from 'angul '(blur)': 'onBlur()', '[class.md-button-focus]': 'isKeyboardFocused', }, -}) -@View({ - templateUrl: 'package:angular2_material/src/components/button/button.html', - styleUrls: ['package:angular2_material/src/components/button/button.css'], + templateUrl: './components/button/button.html', + styleUrls: ['./components/button/button.css'], encapsulation: ViewEncapsulation.None, }) export class MdButton { @@ -56,9 +54,8 @@ export class MdButton { '[class.md-button-focus]': 'isKeyboardFocused', '[attr.aria-disabled]': 'isAriaDisabled', }, -}) -@View({ - templateUrl: 'package:angular2_material/src/components/button/button.html', + templateUrl: './components/button/button.html', + styleUrls: ['./components/button/button.css'], encapsulation: ViewEncapsulation.None }) export class MdAnchor extends MdButton implements OnChanges { diff --git a/src/core/style/variables.scss b/src/core/style/variables.scss new file mode 100644 index 00000000000..676a81118fc --- /dev/null +++ b/src/core/style/variables.scss @@ -0,0 +1 @@ +$size: 25px; diff --git a/src/demo-app/demo-app.html b/src/demo-app/demo-app.html index bea449c8898..6cc3e751064 100644 --- a/src/demo-app/demo-app.html +++ b/src/demo-app/demo-app.html @@ -1,3 +1,5 @@

material2 Works! -

\ No newline at end of file + + +

diff --git a/src/demo-app/demo-app.scss b/src/demo-app/demo-app.scss new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/demo-app/demo-app.ts b/src/demo-app/demo-app.ts index 7600e84024e..9589221d781 100644 --- a/src/demo-app/demo-app.ts +++ b/src/demo-app/demo-app.ts @@ -1,17 +1,12 @@ import {Component} from 'angular2/core'; +import {MdButton} from '../components/button/button'; @Component({ selector: 'demo-app', providers: [], templateUrl: 'demo-app/demo-app.html', - directives: [], + directives: [MdButton], pipes: [] }) -export class DemoApp { - defaultMeaning: number = 42; - - meaningOfLife(meaning: number) { - return `The meaning of life is ${meaning || this.defaultMeaning}`; - } -} +export class DemoApp { } diff --git a/src/index.html b/src/index.html index 30e1e3e5b9c..c89b6cfc438 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,10 @@ 'demo-app': { format: 'register', defaultExtension: 'js' + }, + 'components': { + format: 'register', + defaultExtension: 'js' } } });