refactor(@angular-devkit/build-angular): remove postcss-preset-env

alan-agius4 · alan-agius4 · commit 98bde526b4e2 · 2022-09-08T18:50:47.000+02:00
This change removes the usage of `postcss-preset-env` as this is no longer needed since Angular no longer supports browsers that require polyfills for CSS stage 3 features https://preset-env.cssdb.org/features/#stage-3. We replace this and use autoprefixer directly which is still needed. ``` npx autoprefixer --info Browsers: Chrome: 105 Edge: 105, 104 Firefox: 104, 102, 91 iOS Safari: 15.6, 15.5, 15.4, 15.2-15.3, 15.0-15.1, 14.5-14.8, 14.0-14.4 Safari: 15.6, 15.5, 15.4, 15.2-15.3, 15.1, 15, 14.1, 14 These browsers account for 20.38% of all users globally At-Rules: @resolution: webkit Selectors: ::backdrop: webkit ::file-selector-button: webkit :autofill: webkit :fullscreen: webkit Properties: appearance: webkit backdrop-filter: webkit backface-visibility: webkit background-clip: webkit box-decoration-break: webkit color-adjust: webkit, moz hyphens: webkit mask-border-outset: webkit mask-border-repeat: webkit mask-border-slice: webkit mask-border-source: webkit mask-border-width: webkit mask-border: webkit mask-clip: webkit mask-composite: webkit mask-image: webkit mask-origin: webkit mask-position: webkit mask-repeat: webkit mask-size: webkit mask: webkit print-color-adjust: webkit, moz text-decoration-color: webkit text-decoration-line: webkit text-decoration-skip-ink: webkit text-decoration-skip: webkit text-decoration-style: webkit text-decoration: webkit text-size-adjust: webkit user-select: webkit Values: cross-fade: webkit element: moz fill-available: webkit fill: webkit fit-content: moz image-set: webkit isolate: webkit stretch: webkit, moz ```
diff --git a/package.json b/package.json
@@ -115,7 +115,6 @@
     "@types/pacote": "^11.1.3",
     "@types/parse5-html-rewriting-stream": "^5.1.2",
     "@types/pidusage": "^2.0.1",
-    "@types/postcss-preset-env": "^7.0.0",
     "@types/progress": "^2.0.3",
     "@types/resolve": "^1.17.1",
     "@types/semver": "^7.3.12",
@@ -130,6 +129,7 @@
     "ajv": "8.11.0",
     "ajv-formats": "2.1.1",
     "ansi-colors": "4.1.3",
+    "autoprefixer": "10.4.8",
     "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",
     "bootstrap": "^4.0.0",
@@ -188,7 +188,6 @@
     "postcss": "8.4.16",
     "postcss-import": "15.0.0",
     "postcss-loader": "7.0.1",
-    "postcss-preset-env": "7.8.1",
     "prettier": "^2.0.0",
     "protractor": "~7.0.0",
     "puppeteer": "17.1.2",
diff --git a/packages/angular_devkit/build_angular/BUILD.bazel b/packages/angular_devkit/build_angular/BUILD.bazel
@@ -128,11 +128,11 @@ ts_library(
         "@npm//@types/minimatch",
         "@npm//@types/node",
         "@npm//@types/parse5-html-rewriting-stream",
-        "@npm//@types/postcss-preset-env",
         "@npm//@types/semver",
         "@npm//@types/text-table",
         "@npm//ajv",
         "@npm//ansi-colors",
+        "@npm//autoprefixer",
         "@npm//babel-loader",
         "@npm//babel-plugin-istanbul",
         "@npm//browserslist",
@@ -162,7 +162,6 @@ ts_library(
         "@npm//postcss",
         "@npm//postcss-import",
         "@npm//postcss-loader",
-        "@npm//postcss-preset-env",
         "@npm//regenerator-runtime",
         "@npm//resolve-url-loader",
         "@npm//rxjs",
diff --git a/packages/angular_devkit/build_angular/package.json b/packages/angular_devkit/build_angular/package.json
@@ -22,6 +22,7 @@
     "@discoveryjs/json-ext": "0.5.7",
     "@ngtools/webpack": "0.0.0-PLACEHOLDER",
     "ansi-colors": "4.1.3",
+    "autoprefixer": "10.4.8",
     "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",
     "browserslist": "^4.9.1",
@@ -48,7 +49,6 @@
     "postcss": "8.4.16",
     "postcss-import": "15.0.0",
     "postcss-loader": "7.0.1",
-    "postcss-preset-env": "7.8.1",
     "regenerator-runtime": "0.13.9",
     "resolve-url-loader": "5.0.0",
     "rxjs": "6.6.7",
diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
@@ -76,9 +76,6 @@ export function resolveGlobalStyles(
 
 // eslint-disable-next-line max-lines-per-function
 export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
-  const postcssImports = require('postcss-import');
-  const postcssPresetEnv: typeof import('postcss-preset-env') = require('postcss-preset-env');
-
   const { root, buildOptions } = wco;
   const extraPlugins: Configuration['plugins'] = [];
 
@@ -156,11 +153,9 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
     }
   }
 
-  const postcssPresetEnvPlugin = postcssPresetEnv({
-    browsers: buildOptions.supportedBrowsers,
-    autoprefixer: true,
-    stage: 3,
-  });
+  const postcssImports = require('postcss-import');
+  const autoprefixer: typeof import('autoprefixer') = require('autoprefixer');
+
   const postcssOptionsCreator = (inlineSourcemaps: boolean, extracted: boolean) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const optionGenerator = (loader: any) => ({
@@ -198,7 +193,10 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
           extracted,
         }),
         ...extraPostcssPlugins,
-        postcssPresetEnvPlugin,
+        autoprefixer({
+          ignoreUnknownVersions: true,
+          overrideBrowserslist: buildOptions.supportedBrowsers,
+        }),
       ],
     });
     // postcss-loader fails when trying to determine configuration files for data URIs
diff --git a/tests/legacy-cli/e2e/tests/build/styles/preset-env.ts b/tests/legacy-cli/e2e/tests/build/styles/preset-env.ts
diff --git a/yarn.lock b/yarn.lock
@@ -129,7 +129,6 @@
 
 "@angular/build-tooling@https://github.com/angular/dev-infra-private-build-tooling-builds.git#f2a04c81f9cfbf8a86e595ca5d1ca1da50ddf9dd":
   version "0.0.0-1c648b45459fa32ffd7de8a8fc07bde6bdbef923"
-  uid f2a04c81f9cfbf8a86e595ca5d1ca1da50ddf9dd
   resolved "https://github.com/angular/dev-infra-private-build-tooling-builds.git#f2a04c81f9cfbf8a86e595ca5d1ca1da50ddf9dd"
   dependencies:
     "@angular-devkit/build-angular" "14.2.0-rc.0"
@@ -243,7 +242,6 @@
 
 "@angular/ng-dev@https://github.com/angular/dev-infra-private-ng-dev-builds.git#20aa4d8a5ec774e1f21fbc50bca511c229a1a7f8":
   version "0.0.0-1c648b45459fa32ffd7de8a8fc07bde6bdbef923"
-  uid "20aa4d8a5ec774e1f21fbc50bca511c229a1a7f8"
   resolved "https://github.com/angular/dev-infra-private-ng-dev-builds.git#20aa4d8a5ec774e1f21fbc50bca511c229a1a7f8"
   dependencies:
     "@yarnpkg/lockfile" "^1.1.0"
@@ -1434,14 +1432,6 @@
     "@csstools/selector-specificity" "^2.0.2"
     postcss-selector-parser "^6.0.10"
 
-"@csstools/postcss-cascade-layers@^1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.0.6.tgz#a52da13b91fc184a52337b4e938c3d3188e537b0"
-  integrity sha512-ei4Vh4AJwTCXTNj7uzwduoZDO7nLPksQ0TI7OzUlyFq4P4Uhu6hU7R4AlLimDP/s6D3PQdHmRL4f7UOy370UHA==
-  dependencies:
-    "@csstools/selector-specificity" "^2.0.2"
-    postcss-selector-parser "^6.0.10"
-
 "@csstools/postcss-color-function@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@csstools/postcss-color-function/-/postcss-color-function-1.1.1.tgz#2bd36ab34f82d0497cfacdc9b18d34b5e6f64b6b"
@@ -2436,14 +2426,6 @@
   resolved "https://registry.yarnpkg.com/@types/pidusage/-/pidusage-2.0.2.tgz#3f8c4b19ba7ea438a733d093661e92b60e5f88ee"
   integrity sha512-lHgpGZjXDfjggZDLkgp4zQTYkvXq4S7RxjBjrDcPe1MBU72hESWxubutx8+AM4QkJdRxAhrQyxSA6pzHKJKlsQ==
 
-"@types/postcss-preset-env@^7.0.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@types/postcss-preset-env/-/postcss-preset-env-7.7.0.tgz#b58c07c304b3c3439bf9ce7eba5c9d46db4f2677"
-  integrity sha512-biD8MwSiZo1Nztn1cIBPMcKNKzgFyU05AB96HIF9y3G4f9vdx2O60DHCSpWXChTp6mOEGu15fqIw2DetVVjghw==
-  dependencies:
-    autoprefixer "^10.4.7"
-    postcss "^8.4.14"
-
 "@types/progress@2.0.5", "@types/progress@^2.0.3":
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/@types/progress/-/progress-2.0.5.tgz#6e0febf3a82cc0ffdc1cebb4e56d6949fd108775"
@@ -3246,7 +3228,7 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
-autoprefixer@^10.4.7, autoprefixer@^10.4.8:
+autoprefixer@10.4.8, autoprefixer@^10.4.8:
   version "10.4.8"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.8.tgz#92c7a0199e1cfb2ad5d9427bd585a3d75895b9e5"
   integrity sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==
@@ -4213,7 +4195,7 @@ css-what@^6.0.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
-cssdb@^7.0.0, cssdb@^7.0.1:
+cssdb@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-7.0.1.tgz#3810a0c67ae06362982dfe965dbedf57a0f26617"
   integrity sha512-pT3nzyGM78poCKLAEy2zWIVX2hikq6dIrjuZzLV98MumBg+xMTNYfHx7paUlfiRTgg91O/vR889CIf+qiv79Rw==
@@ -8068,7 +8050,6 @@ npm@^8.11.0:
     "@npmcli/fs" "^2.1.0"
     "@npmcli/map-workspaces" "^2.0.3"
     "@npmcli/package-json" "^2.0.0"
-    "@npmcli/promise-spawn" "^3.0.0"
     "@npmcli/run-script" "^4.2.1"
     abbrev "~1.1.1"
     archy "~1.0.0"
@@ -8079,7 +8060,6 @@ npm@^8.11.0:
     cli-table3 "^0.6.2"
     columnify "^1.6.0"
     fastest-levenshtein "^1.0.12"
-    fs-minipass "^2.1.0"
     glob "^8.0.1"
     graceful-fs "^4.2.10"
     hosted-git-info "^5.1.0"
@@ -8099,7 +8079,6 @@ npm@^8.11.0:
     libnpmteam "^4.0.4"
     libnpmversion "^3.0.7"
     make-fetch-happen "^10.2.0"
-    minimatch "^5.1.0"
     minipass "^3.1.6"
     minipass-pipeline "^1.2.4"
     mkdirp "^1.0.4"
@@ -8915,61 +8894,6 @@ postcss-preset-env@7.8.0, postcss-preset-env@^7.4.2:
     postcss-selector-not "^6.0.1"
     postcss-value-parser "^4.2.0"
 
-postcss-preset-env@7.8.1:
-  version "7.8.1"
-  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-7.8.1.tgz#2bfe935736727ab601a5c718bf24fc9f858eceb0"
-  integrity sha512-8884CHxQaoN1i4iEK+JvzOe8emODb5R4p/0dw4yEdo7QM4RdUk2sBx0fnzFyJt8BLfZSCGeVkKZ4HC564waBpQ==
-  dependencies:
-    "@csstools/postcss-cascade-layers" "^1.0.6"
-    "@csstools/postcss-color-function" "^1.1.1"
-    "@csstools/postcss-font-format-keywords" "^1.0.1"
-    "@csstools/postcss-hwb-function" "^1.0.2"
-    "@csstools/postcss-ic-unit" "^1.0.1"
-    "@csstools/postcss-is-pseudo-class" "^2.0.7"
-    "@csstools/postcss-nested-calc" "^1.0.0"
-    "@csstools/postcss-normalize-display-values" "^1.0.1"
-    "@csstools/postcss-oklab-function" "^1.1.1"
-    "@csstools/postcss-progressive-custom-properties" "^1.3.0"
-    "@csstools/postcss-stepped-value-functions" "^1.0.1"
-    "@csstools/postcss-text-decoration-shorthand" "^1.0.0"
-    "@csstools/postcss-trigonometric-functions" "^1.0.2"
-    "@csstools/postcss-unset-value" "^1.0.2"
-    autoprefixer "^10.4.8"
-    browserslist "^4.21.3"
-    css-blank-pseudo "^3.0.3"
-    css-has-pseudo "^3.0.4"
-    css-prefers-color-scheme "^6.0.3"
-    cssdb "^7.0.1"
-    postcss-attribute-case-insensitive "^5.0.2"
-    postcss-clamp "^4.1.0"
-    postcss-color-functional-notation "^4.2.4"
-    postcss-color-hex-alpha "^8.0.4"
-    postcss-color-rebeccapurple "^7.1.1"
-    postcss-custom-media "^8.0.2"
-    postcss-custom-properties "^12.1.8"
-    postcss-custom-selectors "^6.0.3"
-    postcss-dir-pseudo-class "^6.0.5"
-    postcss-double-position-gradients "^3.1.2"
-    postcss-env-function "^4.0.6"
-    postcss-focus-visible "^6.0.4"
-    postcss-focus-within "^5.0.4"
-    postcss-font-variant "^5.0.0"
-    postcss-gap-properties "^3.0.5"
-    postcss-image-set-function "^4.0.7"
-    postcss-initial "^4.0.1"
-    postcss-lab-function "^4.2.1"
-    postcss-logical "^5.0.4"
-    postcss-media-minmax "^5.0.0"
-    postcss-nesting "^10.1.10"
-    postcss-opacity-percentage "^1.1.2"
-    postcss-overflow-shorthand "^3.0.4"
-    postcss-page-break "^3.0.4"
-    postcss-place "^7.0.5"
-    postcss-pseudo-class-any-link "^7.1.6"
-    postcss-replace-overflow-wrap "^4.0.0"
-    postcss-selector-not "^6.0.1"
-    postcss-value-parser "^4.2.0"
-
 postcss-pseudo-class-any-link@^7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.6.tgz#2693b221902da772c278def85a4d9a64b6e617ab"
@@ -9012,7 +8936,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@8.4.16, postcss@^8.2.14, postcss@^8.3.7, postcss@^8.4.14, postcss@^8.4.7, postcss@^8.4.8:
+postcss@8.4.16, postcss@^8.2.14, postcss@^8.3.7, postcss@^8.4.7, postcss@^8.4.8:
   version "8.4.16"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.16.tgz#33a1d675fac39941f5f445db0de4db2b6e01d43c"
   integrity sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==
