feat(new): include app level import paths for style preprocessors

- fixed linter errors
- re-run build-config-interface
- refactored variable names to preprocessors instead of style
- use cliConfig to determine preprocessor for project

Author: admosity

packages/angular-cli/lib/config/schema.d.ts

@@ -0,0 +1,94 @@
+export interface CliConfig {
+    /**
+     * The global configuration of the project.
+     */
+    project?: {
+        version?: string;
+        name?: string;
+    };
+    /**
+     * Properties of the different applications in this project.
+     */
+    apps?: {
+        root?: string;
+        outDir?: string;
+        assets?: string | string[];
+        deployUrl?: string;
+        index?: string;
+        main?: string;
+        test?: string;
+        tsconfig?: string;
+        prefix?: string;
+        mobile?: boolean;
+        /**
+         * Global styles to be included in the build.
+         */
+        styles?: (string | {
+            [name: string]: any;
+            input?: string;
+        })[];
+        /**
+         * Global scripts to be included in the build.
+         */
+        scripts?: (string | {
+            [name: string]: any;
+            input?: string;
+        })[];
+        /**
+         * Name and corresponding file for environment config.
+         */
+        environments?: {
+            [name: string]: any;
+        };
+        /**
+         * Options to pass to style loaders in webpack.
+         */
+        webpackStyleLoaderOptions?: {
+            /**
+             * Paths to include. Paths will be resolved to project root.
+             */
+            includePaths?: string[];
+        };
+    }[];
+    /**
+     * Configuration reserved for installed third party addons.
+     */
+    addons?: {
+        [name: string]: any;
+    }[];
+    /**
+     * Configuration reserved for installed third party packages.
+     */
+    packages?: {
+        [name: string]: any;
+    }[];
+    e2e?: {
+        protractor?: {
+            config?: string;
+        };
+    };
+    test?: {
+        karma?: {
+            config?: string;
+        };
+    };
+    defaults?: {
+        styleExt?: string;
+        prefixInterfaces?: boolean;
+        poll?: number;
+        viewEncapsulation?: string;
+        changeDetection?: string;
+        inline?: {
+            style?: boolean;
+            template?: boolean;
+        };
+        spec?: {
+            class?: boolean;
+            component?: boolean;
+            directive?: boolean;
+            module?: boolean;
+            pipe?: boolean;
+            service?: boolean;
+        };
+    };
+}

packages/angular-cli/lib/config/schema.json

@@ -115,6 +115,21 @@
             "description": "Name and corresponding file for environment config.",
             "type": "object",
             "additionalProperties": true
+          },
+          "webpackStyleLoaderOptions": {
+            "description": "Options to pass to style loaders in webpack.",
+            "type": "object",
+            "properties": {
+              "includePaths": {
+                "description": "Paths to include. Paths will be resolved to project root.",
+                "type": "array",
+                "items": {
+                  "type": "string"
+                },
+                "default": []
+              }
+            },
+            "additionalProperties": false
           }
         },
         "additionalProperties": false

packages/angular-cli/models/webpack-build-common.ts

@@ -5,8 +5,10 @@ import { SuppressEntryChunksWebpackPlugin } from '../plugins/suppress-entry-chun
 import { packageChunkSort } from '../utilities/package-chunk-sort';
 import { BaseHrefWebpackPlugin } from '@angular-cli/base-href-webpack';
 import { extraEntryParser, makeCssLoaders, getOutputHashFormat } from './webpack-build-utils';
+import { CliConfig } from '../lib/config/schema.d';
 
 const autoprefixer = require('autoprefixer');
+const postcssDiscardComments = require('postcss-discard-comments');
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
@@ -28,6 +30,7 @@ export function getWebpackCommonConfig(
   projectRoot: string,
   environment: string,
   appConfig: any,
+  cliConfig: CliConfig,
   baseHref: string,
   sourcemap: boolean,
   vendorChunk: boolean,
@@ -49,6 +52,39 @@ export function getWebpackCommonConfig(
     entryPoints['main'] = [path.resolve(appRoot, appConfig.main)];
   }
 
+  // Configure webpack style loaders
+
+  /**
+   * Base settings for webpack preprocessor loaders
+   * @type {Object}
+   */
+  const basePreprocessorLoaderOptions = {
+    sourceMap: sourcemap,
+  };
+
+  // set default to base
+  let preprocessorLoaderOptions = basePreprocessorLoaderOptions;
+
+  if (appConfig.webpackStyleLoaderOptions) {
+    if (appConfig.webpackStyleLoaderOptions.includePaths) {
+      // resolve paths relative to project root
+      let includePaths = appConfig.webpackStyleLoaderOptions.includePaths.map(
+        (includePath: string) => path.resolve(projectRoot, includePath)
+      );
+      if (cliConfig.defaults.styleExt === 'styl' || cliConfig.defaults.styleExt === 'less')  {
+        // stylus and less uses paths
+        preprocessorLoaderOptions = Object.assign({}, basePreprocessorLoaderOptions, {
+          paths: includePaths
+        });
+      } else {
+        // sass use includePaths
+        preprocessorLoaderOptions = Object.assign({}, basePreprocessorLoaderOptions, {
+          includePaths
+        });
+      }
+    }
+  }
+
   // determine hashing format
   const hashFormat = getOutputHashFormat(outputHashing);
 
@@ -191,11 +227,15 @@ export function getWebpackCommonConfig(
       new webpack.LoaderOptionsPlugin({
         test: /\.(css|scss|sass|less|styl)$/,
         options: {
-          postcss: [autoprefixer()],
-          cssLoader: { sourceMap: sourcemap },
-          sassLoader: { sourceMap: sourcemap },
-          lessLoader: { sourceMap: sourcemap },
-          stylusLoader: { sourceMap: sourcemap },
+          postcss: [
+            autoprefixer(),
+            // NOTE: Moved check here for prod build
+            ...(environment === 'prod' ? [postcssDiscardComments] : [])
+          ],
+          cssLoader: preprocessorLoaderOptions,
+          sassLoader: preprocessorLoaderOptions,
+          lessLoader: preprocessorLoaderOptions,
+          stylusLoader: preprocessorLoaderOptions,
           // context needed as a workaround https://github.com/jtangelder/sass-loader/issues/285
           context: projectRoot,
         },

packages/angular-cli/models/webpack-build-production.ts

@@ -1,8 +1,6 @@
 import * as path from 'path';
 import * as webpack from 'webpack';
 import {CompressionPlugin} from '../lib/webpack/compression-plugin';
-const autoprefixer = require('autoprefixer');
-const postcssDiscardComments = require('postcss-discard-comments');
 
 declare module 'webpack' {
   export interface LoaderOptionsPlugin {}
@@ -37,22 +35,6 @@ export const getWebpackProdConfigPartial = function(projectRoot: string,
           test: /\.js$|\.html$|\.css$/,
           threshold: 10240
       }),
-      // LoaderOptionsPlugin needs to be fully duplicated because webpackMerge will replace it.
-      new webpack.LoaderOptionsPlugin({
-        test: /\.(css|scss|sass|less|styl)$/,
-        options: {
-          postcss: [
-            autoprefixer(),
-            postcssDiscardComments
-          ],
-          cssLoader: { sourceMap: sourcemap },
-          sassLoader: { sourceMap: sourcemap },
-          lessLoader: { sourceMap: sourcemap },
-          stylusLoader: { sourceMap: sourcemap },
-          // context needed as a workaround https://github.com/jtangelder/sass-loader/issues/285
-          context: projectRoot,
-        }
-      })
     ]
   };
 };

packages/angular-cli/models/webpack-config.ts

@@ -35,7 +35,8 @@ export class NgCliWebpackConfig {
     deployUrl?: string,
     outputHashing?: string
   ) {
-    const appConfig = CliConfig.fromProject().config.apps[0];
+    const cliConfig = CliConfig.fromProject().config;
+    const appConfig = cliConfig.apps[0];
     const projectRoot = this.ngCliProject.root;
 
     appConfig.outDir = outputDir || appConfig.outDir;
@@ -45,6 +46,7 @@ export class NgCliWebpackConfig {
       projectRoot,
       environment,
       appConfig,
+      cliConfig,
       baseHref,
       sourcemap,
       vendorChunk,