JS support for PostCSS config

[kreuzerk]

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[bot]]

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

[kreuzerk]

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