Add postcss-preset-env to Angular build process / allow for configuring custom PostCSS plugins

[PrinceGupta1999]

Command

build, serve

Description

The Angular docs mention The Angular CLI uses Browserslist to ensure compatibility with different browser versions. And while this story works great in the Javascript side, the CSS story is not as good.

Currently for processing CSS PostCSS is used during the build process, and the only plugin used for increasing browser compatibility is the use of the autoprefixer plugin.

That would be fine if the build process allowed configuration of the postcss plugins being used but not allowing that severely limits the extent of browser support which could have been otherwise extended using plugins like postcss-preset-env. For example, in our use case we are required to support Chrome version 80 but since more and more UI libraries like PrimeNg are moving towards use of @layer which is not supported by earlier browsers it is proving impossible for us to upgrade to use newer versions of these UI libraries.

Describe the solution you'd like

Similar to the configuration being done for Tailwind it could be possible to add support for loading postCss configuration from the standard postcss.config.js file.

There may also be need to either merge / override the default configuration in case the postcss config is provided.

Describe alternatives you've considered

The only alternate that seemed to work for us at the moment was to switch to angular-builders/custom-webpack for building / serving the application and loading the postcss.config.js file using the postcss-loader in webpack.

However the drawback of that was that we could no longer take advantage of the faster Vite / ESBuild speeds that the Angular v17 provides by default.

[alan-agius4]

Hi @PrinceGupta1999,

Appreciate your feature request, but enabling postcss configuration isn't in our plans currently. At this stage, postcss is utilized solely within Angular CLI for tailwind CSS, as this forces a slower path for stylesheet compilations.

Regarding, adding a postcss plugin in this case will not yield the desired outcome. As the application build pipeline doesn't transform CSS within components present in libraries. Instead, components CSS in libraries is processed based on their configured minimum browser support version before publishing to NPM.

It's important to note that the esbuild-based pipeline does handle the transformation of various CSS syntaxes, such as nesting, among others without the need of postcss.

Angular only officially supports the latest 2 major versions of Chrome currently being 118 and 119. See https://angular.io/guide/browser-support for more information about supported browsers.

See: #8427 (comment) and #8427 for more context about why we do not support custom postcss plugins.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}