From 0f0aac22588d52c1c9419f5d54dad1b536bcfee1 Mon Sep 17 00:00:00 2001 From: Hans Larsen Date: Wed, 20 Jan 2016 10:20:38 -0800 Subject: [PATCH] build(): build a -rtl.css file along the css, and compile _every_ sass files under src/components. It's simpler. --- ember-cli-build.js | 73 +++++++++++++++++++++++++++++++--------------- package.json | 1 + 2 files changed, 51 insertions(+), 23 deletions(-) diff --git a/ember-cli-build.js b/ember-cli-build.js index 709ef0733836..e81a33ec7815 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -1,3 +1,4 @@ +'use strict'; var fs = require('fs'); var path = require('path'); @@ -5,12 +6,13 @@ 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 cssjanus = require('cssjanus'); var autoprefixerOptions = require('./build/autoprefixer-options'); module.exports = function(defaults) { var demoAppCssTree = new BroccoliSass(['src/demo-app'], './demo-app.scss', 'demo-app/demo-app.css'); - var componentCssTree = getComponentsCssTree(); + var componentCssTree = getCssTree('src/components/', 'components/'); var angularAppTree = new Angular2App(defaults); return mergeTrees([ @@ -21,27 +23,52 @@ module.exports = function(defaults) { }; +/** Generate RTL CSS files along side regular CSS. */ +class BroccoliSassWithRtl extends BroccoliSass { + build() { + // This will output the regular CSS. + super.build(); + + // We then read that file and output the RTL CSS. + const cssOutputPath = path.join(this.outputPath, this.outputFile); + const cssRtlOutputPath = path.join(this.outputPath, + path.dirname(this.outputFile), + path.basename(this.outputFile, '.css') + '-rtl.css'); + fs.writeFileSync(cssRtlOutputPath, cssjanus.transform(fs.readFileSync(cssOutputPath).toString())); + } +} + + + /** 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 - `./${fileName}.scss`, // Root scss input file - `components/${component}/${fileName}.css`); // Css output file - }).concat(trees); - }, []); - - return broccoliAutoprefixer(mergeTrees(componentCssTrees), autoprefixerOptions); +function getCssTree(source, destination) { + function walk(dir) { + const dirs = fs.readdirSync(dir) + .filter(file => fs.statSync(path.join(dir, file)).isDirectory()); + if (!dirs.length) { + return [dir]; + } + + return dirs.reduce((previous, current) => { + return previous.concat(walk(path.join(dir, current))); + }, [dir]); + } + + const trees = walk(source) + .reduce((previous, current) => { + const dir = path.join(destination, current.substr(source.length)); + const scssFiles = fs.readdirSync(current) + .filter(file => path.extname(file) === '.scss') + .map(file => path.basename(file, '.scss')); + + return scssFiles.map(filename => { + return new BroccoliSassWithRtl( + [current, 'src/core/style'], + path.join('.', filename + '.scss'), + path.join(dir, filename + '.css') + ); + }).concat(previous); + }, []); + + return broccoliAutoprefixer(mergeTrees(trees), autoprefixerOptions); } diff --git a/package.json b/package.json index e2e14d53fac4..8c33fe7e9c02 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ }, "dependencies": { "angular2": "2.0.0-beta.0", + "cssjanus": "^1.1.2", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2",