chore(css): css preprocessors support enhancement

Author: jkuri

addon/ng2/blueprints/ng2/files/__path__/style.__styleext__

@@ -0,0 +1,3 @@
+body <% if (styleExt !== 'sass') { %>{<% } %>
+  background: #F9F9F9;
+<% if (styleExt !== 'sass') { %>}<% } %>

addon/ng2/blueprints/ng2/files/angular-cli.json

@@ -7,7 +7,10 @@
     {
       "main": "<%= sourceDir %>/main.ts",
       "tsconfig": "<%= sourceDir %>/tsconfig.json",
-      "mobile": <%= isMobile %>
+      "mobile": <%= isMobile %>,
+      "styles": {
+        "src/style.<%= styleExt %>": { "output": "style.css", "autoImported": true }
+      }
     }
   ],
   "addons": [],

addon/ng2/models/index.ts

@@ -4,3 +4,4 @@ export * from './webpack-build-production';
 export * from './webpack-build-development';
 export * from './webpack-build-mobile';
 export * from './webpack-build-utils';
+export * from './webpack-build-css';

addon/ng2/models/webpack-build-common.ts

@@ -7,6 +7,7 @@ import { CliConfig } from './config';
 
 export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
   return {
+    name: 'main',
     devtool: 'inline-source-map',
     resolve: {
       extensions: ['', '.ts', '.js'],
@@ -73,7 +74,10 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
         filename: 'inline.js',
         sourceMapFilename: 'inline.map'
       }),
-      new CopyWebpackPlugin([{from: path.resolve(projectRoot, './public'), to: path.resolve(projectRoot, './dist')}])
+      new CopyWebpackPlugin([{
+        from: path.resolve(projectRoot, './public'), 
+        to: path.resolve(projectRoot, './dist')
+      }])
     ],
     node: {
       global: 'window',

addon/ng2/models/webpack-build-css.ts

@@ -0,0 +1,46 @@
+import * as path from 'path';
+import * as ExtractTextPlugin from 'extract-text-webpack-plugin';
+import * as existsSync from 'exists-sync';
+import { InjectStylesWebpackPlugin } from '../utilities/inject-styles-webpack-plugin';
+import { CliConfig } from './config';
+
+export function getWebpackCSSConfig(projectRoot: string, sourceDir: string) {
+  const styles = CliConfig.fromProject().apps.map(app => app.styles);
+  let entries = {};
+
+  styles.forEach(style => {
+    for (let src in style) {
+      if (existsSync(path.resolve(projectRoot, src))) {
+        entries[style[src].output] = `./${src}`;
+      }
+    }
+  });
+
+  return {
+    name: 'styles',
+    resolve: {
+      root: path.resolve(projectRoot)
+    },
+    entry: entries,
+    output: {
+      path: path.resolve(projectRoot, './dist'),
+      filename: '[name]'
+    },
+    module: {
+      loaders: [
+        { test: /\.css$/i, loader: ExtractTextPlugin.extract(['css-loader']) },
+        { test: /\.sass$|\.scss$/i, loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader']) },
+        { test: /\.less$/i, loader: ExtractTextPlugin.extract(['css-loader', 'less-loader']) },
+        { test: /\.styl$/i, loader: ExtractTextPlugin.extract(['css-loader', 'stylus-loader']) }
+      ]
+    },
+    plugins: [
+      new ExtractTextPlugin('[name]'),
+      new InjectStylesWebpackPlugin({
+        template: path.resolve(projectRoot, sourceDir, 'index.html'),
+        styles: styles,
+        projectRoot: projectRoot
+      });
+    ]
+  }
+};

addon/ng2/models/webpack-config.ts

@@ -9,6 +9,7 @@ import {
   getWebpackProdConfigPartial,
   getWebpackMobileConfigPartial,
   getWebpackMobileProdConfigPartial
+  getWebpackCSSConfig
 } from './';
 
 export class NgCliWebpackConfig {
@@ -22,15 +23,18 @@ export class NgCliWebpackConfig {
   private webpackMaterialE2EConfig: any;
   private webpackMobileConfigPartial: any;
   private webpackMobileProdConfigPartial: any;
+  private webpackCSSConfig: any;
 
   constructor(public ngCliProject: any, public target: string, public environment: string) {
     const sourceDir = CliConfig.fromProject().defaults.sourceDir;
+    const publicDir = 'public';
 
     const environmentPath = `./${sourceDir}/app/environments/environment.${environment}.ts`;
 
     this.webpackBaseConfig = getWebpackCommonConfig(this.ngCliProject.root, sourceDir);
     this.webpackDevConfigPartial = getWebpackDevConfigPartial(this.ngCliProject.root, sourceDir);
     this.webpackProdConfigPartial = getWebpackProdConfigPartial(this.ngCliProject.root, sourceDir);
+    this.webpackCSSConfig = getWebpackCSSConfig(this.ngCliProject.root, sourceDir);
 
     if (CliConfig.fromProject().apps[0].mobile){
       this.webpackMobileConfigPartial = getWebpackMobileConfigPartial(this.ngCliProject.root, sourceDir);
@@ -40,7 +44,7 @@ export class NgCliWebpackConfig {
     }
 
     this.generateConfig();
-    this.config.plugins.unshift(new NgCliEnvironmentPlugin({
+    this.config[0].plugins.unshift(new NgCliEnvironmentPlugin({
       path: path.resolve(this.ngCliProject.root, `./${sourceDir}/app/environments/`),
       src: 'environment.ts',
       dest: `environment.${this.environment}.ts`
@@ -50,10 +54,16 @@ export class NgCliWebpackConfig {
   generateConfig(): void {
     switch (this.target) {
       case "development":
-        this.config = webpackMerge(this.webpackBaseConfig, this.webpackDevConfigPartial);
+        this.config = [
+          webpackMerge(this.webpackBaseConfig, this.webpackDevConfigPartial),
+          this.webpackCSSConfig
+        ];
         break;
       case "production":
-        this.config = webpackMerge(this.webpackBaseConfig, this.webpackProdConfigPartial);
+        this.config = [
+          webpackMerge(this.webpackBaseConfig, this.webpackProdConfigPartial),
+          this.webpackCSSConfig
+        ];
         break;
       default:
         throw new Error("Invalid build target. Only 'development' and 'production' are available.");

addon/ng2/tasks/serve-webpack.ts

@@ -18,7 +18,7 @@ module.exports = Task.extend({
     var config: NgCliWebpackConfig = new NgCliWebpackConfig(this.project, commandOptions.target, commandOptions.environment).config;
     // This allows for live reload of page when changes are made to repo.
     // https://webpack.github.io/docs/webpack-dev-server.html#inline-mode
-    config.entry.main.unshift(`webpack-dev-server/client?http://${commandOptions.host}:${commandOptions.port}/`);
+    config[0].entry.main.unshift(`webpack-dev-server/client?http://${commandOptions.host}:${commandOptions.port}/`);
     webpackCompiler = webpack(config);
 
     webpackCompiler.apply(new ProgressPlugin({

addon/ng2/utilities/inject-styles-webpack-plugin.ts

@@ -0,0 +1,68 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as parse5 from 'parse5';
+
+export class InjectStylesWebpackPlugin {
+  
+  constructor(options: any) {
+    this.options = Object.assign({}, this.options, options);
+  }
+
+  apply(compiler) {
+    compiler.plugin('done', () => {
+      this.importStyles();
+    });
+  }
+
+  importStyles() {
+    let imports = this.getImports();
+    let document = parse5.parse(this.readFileSync(this.options.template))
+    let head = document.childNodes[1].childNodes[0];
+    let links = head.childNodes.filter(childNode => childNode.nodeName === 'link');
+    let hrefs = new Set(links.map(link => link.attrs.filter(attr => attr.name === 'href')[0].value));
+    imports = imports.filter(i => !hrefs.has(i));
+    
+    let adapter = parse5.treeAdapters.default;
+
+    imports.forEach(i => {
+      let linkEl = adapter.createElement('link', null, [
+        { name: 'rel', value: 'stylesheet' },
+        { name: 'href', value: i }
+      ]);
+      adapter.appendChild(head, linkEl);
+    });
+
+    if (imports.length) {
+      fs.writeFileSync(this.options.template, parse5.serialize(document), 'utf8');
+    }
+  }
+
+  getImports() {
+    let imports = [];
+
+    this.options.styles.forEach(style => {
+      for (let src in style) {
+        if (this.existsSync(path.resolve(this.options.projectRoot, src))) {
+          if (style[src].autoImported) {
+            imports.push(style[src].output);
+          }
+        }
+      }
+    });
+
+    return imports;
+  }
+
+  readFileSync(path: string) {
+    return (this.existsSync(path)) ? fs.readFileSync(path, 'utf8') : false;
+  }
+
+  existsSync(path: string) {
+    try {
+      fs.accessSync(path);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+}

package.json

@@ -48,6 +48,7 @@
     "exit": "^0.1.2",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
+    "extract-text-webpack-plugin": "^2.0.0-beta.3",
     "file-loader": "^0.8.5",
     "fs-extra": "^0.30.0",
     "glob": "^7.0.3",
@@ -74,7 +75,7 @@
     "remap-istanbul": "^0.6.4",
     "resolve": "^1.1.7",
     "rimraf": "^2.5.3",
-    "sass-loader": "^3.2.0",
+    "sass-loader": "^3.2.3",
     "shelljs": "^0.7.0",
     "silent-error": "^1.0.0",
     "source-map-loader": "^0.1.5",