feat(@angular/cli): add fallback for CSS variables #7514

.eslintrc.json

@@ -143,7 +143,7 @@
     "brace-style": [2, "1tbs", { "allowSingleLine": false }],
     "callback-return": "off",
     "camelcase": "off",
-    "comma-dangle": "error",
+    "comma-dangle": "off",
     "comma-spacing": "off",
     "comma-style": "off",
     "complexity": ["off", 11],

package.json

@@ -44,7 +44,6 @@
     "@angular-devkit/build-optimizer": "~0.0.18",
     "@angular-devkit/schematics": "~0.0.21",
     "@schematics/angular": "~0.0.30",
-    "autoprefixer": "^6.5.3",
     "chalk": "^2.0.1",
     "circular-dependency-plugin": "^3.0.0",
     "common-tags": "^1.3.1",
@@ -77,6 +76,7 @@
     "nopt": "^4.0.1",
     "opn": "~5.1.0",
     "portfinder": "~1.0.12",
+    "postcss-cssnext": "^3.0.2",
     "postcss-loader": "^1.3.3",
     "postcss-url": "^5.1.2",
     "raw-loader": "^0.5.1",
@@ -121,12 +121,13 @@
     "@types/semver": "^5.3.30",
     "@types/source-map": "^0.5.0",
     "@types/webpack": "^3.0.5",
-    "conventional-changelog": "^1.1.0",
+    "conventional-changelog": "1.1.0",
     "dtsgenerator": "^0.9.1",
     "eslint": "^3.11.0",
     "express": "^4.14.0",
     "jasmine": "^2.6.0",
     "jasmine-spec-reporter": "^4.1.0",
+    "license-checker": "^14.0.0",
     "minimist": "^1.2.0",
     "mock-fs": "^4.0.0",
     "npm-run": "^4.1.0",

packages/@angular/cli/commands/generate.ts

@@ -137,10 +137,15 @@ export default Command.extend({
       dryRun: commandOptions.dryRun
     };
     const parsedPath = dynamicPathParser(dynamicPathOptions);
+    const root = appConfig.root + path.sep;
     commandOptions.sourceDir = appConfig.root;
-    commandOptions.path = parsedPath.dir
-      .replace(appConfig.root + path.sep, '')
-      .replace(separatorRegEx, '/');
+    commandOptions.appRoot = parsedPath.appRoot.startsWith(root)
+      ? parsedPath.appRoot.substr(root.length)
+      : parsedPath.appRoot;
+    commandOptions.path = parsedPath.dir.replace(separatorRegEx, '/');
+    if (parsedPath.dir.startsWith(root)) {
+      commandOptions.path = commandOptions.path.substr(root.length);
+    }
 
     const cwd = this.project.root;
     const schematicName = rawArgs[0];
@@ -149,6 +154,12 @@ export default Command.extend({
       if (commandOptions.prefix === undefined) {
         commandOptions.prefix = appConfig.prefix;
       }
+
+      if (schematicName === 'component' || schematicName === 'c') {
+        if (commandOptions.styleext === undefined) {
+          commandOptions.styleext = CliConfig.getValue('defaults.styleExt');
+        }
+      }
     }
 
     const SchematicRunTask = require('../tasks/schematic-run').default;

packages/@angular/cli/models/webpack-configs/styles.ts

@@ -9,7 +9,7 @@ import { pluginArgs, postcssArgs } from '../../tasks/eject';
 
 const cssnano = require('cssnano');
 const postcssUrl = require('postcss-url');
-const autoprefixer = require('autoprefixer');
+const cssnext = require('postcss-cssnext');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 /**
@@ -78,14 +78,14 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
           }
         }
       }),
-      autoprefixer(),
+      cssnext(),
     ].concat(
         minimizeCss ? [cssnano(minimizeOptions)] : []
     );
   };
   (postcssPluginCreator as any)[postcssArgs] = {
     variableImports: {
-      'autoprefixer': 'autoprefixer',
+      'postcss-cssnext': 'cssnext',
       'postcss-url': 'postcssUrl',
       'cssnano': 'cssnano'
     },
@@ -97,13 +97,17 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
 
   // use includePaths from appConfig
   const includePaths: string[] = [];
+  let lessPathOptions: { paths: string[] };
 
   if (appConfig.stylePreprocessorOptions
     && appConfig.stylePreprocessorOptions.includePaths
     && appConfig.stylePreprocessorOptions.includePaths.length > 0
   ) {
     appConfig.stylePreprocessorOptions.includePaths.forEach((includePath: string) =>
       includePaths.push(path.resolve(appRoot, includePath)));
+    lessPathOptions = {
+      paths: includePaths,
+    };
   }
 
   // process global styles
@@ -136,7 +140,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
         loader: 'less-loader',
         options: {
           sourceMap: cssSourceMap,
-          paths: includePaths
+          ...lessPathOptions,
         }
       }]
     },

packages/@angular/cli/package.json

@@ -32,7 +32,6 @@
     "@ngtools/json-schema": "1.1.0",
     "@ngtools/webpack": "1.8.0-beta.0",
     "@schematics/angular": "~0.0.30",
-    "autoprefixer": "^6.5.3",
     "chalk": "^2.0.1",
     "circular-dependency-plugin": "^3.0.0",
     "common-tags": "^1.3.1",
@@ -61,6 +60,7 @@
     "nopt": "^4.0.1",
     "opn": "~5.1.0",
     "portfinder": "~1.0.12",
+    "postcss-cssnext": "^3.0.2",
     "postcss-loader": "^1.3.3",
     "postcss-url": "^5.1.2",
     "raw-loader": "^0.5.1",

packages/@angular/cli/tasks/schematic-run.ts

@@ -177,8 +177,7 @@ function prepOptions(schematic: Schematic<{}, {}>, options: SchematicOptions): S
 
   const properties = (<any>schematic.description).schemaJson.properties;
   const keys = Object.keys(properties);
-
-  if (schematic.description.name === 'component') {
+  if (['component', 'c', 'directive', 'd'].indexOf(schematic.description.name) !== -1) {
     options.prefix = (options.prefix === 'false' || options.prefix === '')
       ? '' : options.prefix;
   }

packages/@ngtools/webpack/src/angular_compiler_plugin.ts

@@ -363,13 +363,22 @@ export class AngularCompilerPlugin implements Tapable {
       // being built.
       const angularCoreModuleDir = path.dirname(angularCoreModulePath).split(/node_modules/).pop();
 
+      // Also support the es2015 in Angular versions that have it.
+      let angularCoreEs2015Dir: string | undefined;
+      if (angularCorePackageJson['es2015']) {
+        const angularCoreEs2015Path = path.resolve(path.dirname(angularCorePackagePath),
+          angularCorePackageJson['es2015']);
+        angularCoreEs2015Dir = path.dirname(angularCoreEs2015Path).split(/node_modules/).pop();
+      }
+
       cmf.plugin('after-resolve', (result: any, callback: (err?: any, request?: any) => void) => {
         if (!result) {
           return callback();
         }
 
         // Alter only request from Angular.
-        if (angularCoreModuleDir && !result.resource.endsWith(angularCoreModuleDir)) {
+        if (!(angularCoreModuleDir && result.resource.endsWith(angularCoreModuleDir))
+          && !(angularCoreEs2015Dir && result.resource.endsWith(angularCoreEs2015Dir))) {
           return callback(null, result);
         }
 

packages/@ngtools/webpack/src/plugin.ts

@@ -358,6 +358,14 @@ export class AotPlugin implements Tapable {
       // being built.
       const angularCoreModuleDir = path.dirname(angularCoreModulePath).split(/node_modules/).pop();
 
+      // Also support the es2015 in Angular versions that have it.
+      let angularCoreEs2015Dir: string | undefined;
+      if (angularCorePackageJson['es2015']) {
+        const angularCoreEs2015Path = path.resolve(path.dirname(angularCorePackagePath),
+        angularCorePackageJson['es2015']);
+        angularCoreEs2015Dir = path.dirname(angularCoreEs2015Path).split(/node_modules/).pop();
+      }
+
       cmf.plugin('after-resolve', (result: any, callback: (err?: any, request?: any) => void) => {
         if (!result) {
           return callback();
@@ -368,7 +376,8 @@ export class AotPlugin implements Tapable {
         //   The other logic is for flat modules and requires reading the package.json of angular
         //     (see above).
         if (!result.resource.endsWith(path.join('@angular/core/src/linker'))
-            && (angularCoreModuleDir && !result.resource.endsWith(angularCoreModuleDir))) {
+            && !(angularCoreModuleDir && result.resource.endsWith(angularCoreModuleDir))
+            && !(angularCoreEs2015Dir && result.resource.endsWith(angularCoreEs2015Dir))) {
           return callback(null, result);
         }