JS support for PostCSS config

Command

config

Description

Currently the CLI supports custom PostCSS configurations in the format of JSON files. The problem is that the JSON format has its limitation. In our case for example we try to configure CSS purging with the fullhuman/postcss-purgecss plugin.

{
  "plugins": {
    "@fullhuman/postcss-purgecss": {
      "content": ["**/*.html", "**/*.ts", "**/*.js"],
      "skippedContentGlobs": ["node_modules/**"],
    }
  }
}

Unfortunately this config is not enough and therefore we would need to configure some extractors:

import purgeJs from "purgecss-from-js";
import purgeHtml from "purgecss-from-html";

const options = {
  content: [], // files to extract the selectors from
  css: [], // css
  extractors: [
    {
      extractor: purgeJs,
      extensions: ["js"],
    },
    {
      extractor: purgeHtml,
      extensions: ["html"],
    },
  ],
};
export default options;

Describe the solution you'd like

Support PostCSS configuration files writen in JavaScript.

Describe alternatives you've considered

No response

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

@kreuzerk I had a similar requirement and created my own PostCSS plugin as a workaround. You can import @fullhuman/postcss-purgecss in your plugin and pass the necessary configuration to it.

This is an example plugin:

// custom-postcss-plugin.js
const postcss = require('postcss');
const rtlcss = require('postcss-rtlcss');

module.exports = (opts = {}) => {
  return {
    postcssPlugin: 'esbuild-postcss-rtlcss',
    Once(...args) {
      const options = // my options
      rtlcss(options).Once(...args);
    }
  };
};

module.exports.postcss = true;

After that, you need to move this plugin to node_modules. Adding it to the package.json as a package is the easiest way to do it.

"devDependencies": {
"my-custom-postcss-plugin": "./plugins/postcss-plugins/my-custom-postcss-plugin",
}

And define your plugin as follows:

postcss.config.json

{
  "plugins": {
    "tailwindcss": {
      "config": "tailwind.config.js"
    },
    "autoprefixer": {},
    "my-custom-postcss-plugin": {}
  }
}

@mehmet-erim

Nice. Thx @mehmet-erim for sharing, will give it a try.

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

I've been looking for a long time to custom postcss config, then i found your issue, it helps...
official doc did not mention how to config postcss lol

@zcmk123

@zcmk123 same issue here, did you find the official way to config postcss in angular cli ?
I'm currently exploring a library called primeflex, which uses the same approach for css as Tailwinds. Builds are bloated and definitely, some cleanup is needed, but I'm not able to find a solid source of information, all I've found so far are workarounds.

@zcmk123

@zcmk123 same issue here, did you find the official way to config postcss in angular cli ? I'm currently exploring a library called primeflex, which uses the same approach for css as Tailwinds. Builds are bloated and definitely, some cleanup is needed, but I'm not able to find a solid source of information, all I've found so far are workarounds.

@robmanganelly i believe there isn't an official way to config postcss, at least in angular official docs. angular cli support tailwindcss and i've check their source code, angular cli load postcss config for sure, but only in json format.
https://github.com/angular/angular-cli/blob/main/packages/angular/build/src/utils/postcss-configuration.ts#L20
https://github.com/angular/angular-cli/blob/main/packages/angular/build/src/utils/postcss-configuration.ts#L77

currently in my project, i created a postcss.config.json to customize postcss

Any updates on this enhancement? it would be very useful.

The worst postcss config support ever in frontend community :(

@mehmet-erim

A slight improvement, IMO, on @mehmet-erim's comment #27819 (comment):

You can just make a js file in the same directory as the postcss.config.json, e.g. my-plugin.js, which might contain like

const fooPlugin = require('foo-plugin');

module.exports = (opts = {}) => {
  // touch up opts
  return fooPlugin(opts);
};
module.exports.postcss = true

{
  "plugins": {
    "./my-plugin": {}
  }
}

and then you don't have to mess around with devDependencies, and at least in my case, the custom plugin logic is simpler. (I needed to pass js functions in the options...)

Navigation Menu

Repository navigation

JS support for PostCSS config #27819

Command

Description

Describe the solution you'd like

Describe alternatives you've considered

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

JS support for PostCSS config #27819

Description

Command

Description

Describe the solution you'd like

Describe alternatives you've considered

Activity

angular-robot commented on Jun 12, 2024

mehmet-erim commented on Jun 26, 2024

nivekcode commented on Jun 26, 2024

angular-robot commented on Jul 22, 2024

zcmk123 commented on Aug 1, 2024

robmanganelly commented on Aug 17, 2024

zcmk123 commented on Aug 19, 2024

stefankoserkov commented on Mar 26, 2025

7iomka commented on May 25, 2026

imirkin commented on Sep 25, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions