JS support for PostCSS config

[nivekcode]

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

[angular-robot]

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.

[mehmet-erim]

@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": {}
  }
}

[nivekcode]

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

[angular-robot]

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.

[zcmk123]

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

[robmanganelly]

@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