feat(@angular-devkit/build-angular): add postcss-preset-env with st…

…age 3 features

With this change we add `postcss-preset-env` with stage 3 features. This stage includes support for:

 - all property
 - break properties
 - custom properties
 - font-variant property
 - gap properties
 - media query ranges

See https://preset-env.cssdb.org/features#stage-3

package.json

@@ -114,6 +114,7 @@
     "@types/npm-package-arg": "^6.1.0",
     "@types/parse5-html-rewriting-stream": "^5.1.2",
     "@types/pidusage": "^2.0.1",
+    "@types/postcss-preset-env": "^6.7.1",
     "@types/progress": "^2.0.3",
     "@types/request": "^2.47.1",
     "@types/resolve": "^1.17.1",
@@ -129,7 +130,6 @@
     "@yarnpkg/lockfile": "1.1.0",
     "ajv": "6.12.6",
     "ansi-colors": "4.1.1",
-    "autoprefixer": "10.2.4",
     "babel-loader": "8.2.2",
     "bootstrap": "^4.0.0",
     "browserslist": "^4.9.1",
@@ -193,6 +193,7 @@
     "postcss": "8.2.5",
     "postcss-import": "14.0.0",
     "postcss-loader": "4.2.0",
+    "postcss-preset-env": "6.7.0",
     "prettier": "^2.0.0",
     "protractor": "~7.0.0",
     "puppeteer": "7.0.1",

packages/angular_devkit/build_angular/BUILD.bazel

@@ -130,6 +130,7 @@ ts_library(
         "@npm//@types/minimatch",
         "@npm//@types/node",
         "@npm//@types/parse5-html-rewriting-stream",
+        "@npm//@types/postcss-preset-env",
         "@npm//@types/rimraf",
         "@npm//@types/semver",
         "@npm//@types/speed-measure-webpack-plugin",
@@ -139,7 +140,6 @@ ts_library(
         "@npm//@types/webpack-sources",
         "@npm//ajv",
         "@npm//ansi-colors",
-        "@npm//autoprefixer",
         "@npm//babel-loader",
         "@npm//browserslist",
         "@npm//cacache",
@@ -171,6 +171,7 @@ ts_library(
         "@npm//postcss",
         "@npm//postcss-import",
         "@npm//postcss-loader",
+        "@npm//postcss-preset-env",
         "@npm//raw-loader",
         "@npm//regenerator-runtime",
         "@npm//resolve-url-loader",

packages/angular_devkit/build_angular/package.json

@@ -21,7 +21,6 @@
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
     "@ngtools/webpack": "0.0.0",
     "ansi-colors": "4.1.1",
-    "autoprefixer": "10.2.4",
     "babel-loader": "8.2.2",
     "browserslist": "^4.9.1",
     "cacache": "15.0.5",
@@ -51,6 +50,7 @@
     "postcss": "8.2.5",
     "postcss-import": "14.0.0",
     "postcss-loader": "4.2.0",
+    "postcss-preset-env": "6.7.0",
     "raw-loader": "4.0.2",
     "regenerator-runtime": "0.13.7",
     "resolve-url-loader": "3.1.2",

packages/angular_devkit/build_angular/src/webpack/configs/styles.ts

@@ -10,6 +10,7 @@ import { tags } from '@angular-devkit/core';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as webpack from 'webpack';
+import { BuildBrowserFeatures } from '../../utils/build-browser-features';
 import { WebpackConfigOptions } from '../../utils/build-options';
 import {
   AnyComponentStyleBudgetChecker,
@@ -21,9 +22,9 @@ import { assetNameTemplateFactory, getOutputHashFormat, normalizeExtraEntryPoint
 
 // tslint:disable-next-line:no-big-function
 export function getStylesConfig(wco: WebpackConfigOptions) {
-  const autoprefixer = require('autoprefixer');
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   const postcssImports = require('postcss-import');
+  const postcssPresetEnv: typeof import('postcss-preset-env') = require('postcss-preset-env');
 
   const { root, buildOptions } = wco;
   const entryPoints: { [key: string]: [string, ...string[]] } = {};
@@ -189,6 +190,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
     }
   }
 
+  const { supportedBrowsers } = new BuildBrowserFeatures(wco.projectRoot);
   const postcssOptionsCreator = (sourceMap: boolean, extracted: boolean | undefined) => {
     return (loader: webpack.loader.LoaderContext) => ({
       map: sourceMap && {
@@ -223,7 +225,12 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
           extracted,
         }),
         ...extraPostcssPlugins,
-        autoprefixer(),
+        postcssPresetEnv({
+          // tslint:disable-next-line: no-any
+          browsers: supportedBrowsers as any, // Typings only allow a string
+          autoprefixer: true,
+          stage: 3,
+        }),
       ],
     });
   };

tests/legacy-cli/e2e/tests/build/styles/preset-env.ts

@@ -0,0 +1,21 @@
+import { expectFileToMatch, replaceInFile, writeMultipleFiles } from '../../../utils/fs';
+import { ng } from '../../../utils/process';
+
+export default async function () {
+  await writeMultipleFiles({
+    'src/styles.css': `a {
+        all: initial;
+     }`,
+  });
+
+  // Enable IE 11 support
+  await replaceInFile(
+    '.browserslistrc',
+    'not IE 11',
+    'IE 11',
+  );
+
+  await ng('build');
+  await expectFileToMatch('dist/test-project/styles.css', 'z-index: auto');
+  await expectFileToMatch('dist/test-project/styles.css', 'all: initial');
+}