using function for build.postcss config option

[suits-at]

What problem does this feature solve?

I am using a function inside of a .postcssrc.js config file, to react to the current processed file. Doing this, I am able to use purgeCss only on one specific file.
So basically I am doing this:

module.exports = ({ file }) => {
	const doPurgeCSS = file.basename === 'example.scss';

	if (doPurgeCSS) {
		plugins['@fullhuman/postcss-purgecss'] = {
			someOtherOptions
		};
	}

	return {
		plugins
	};
};

I know that I would lose the default nuxt config using this code, but for the reproduction I ommited this part due to simplicity.

The docs (https://nuxtjs.org/faq/postcss-plugins/) say using a config file is already deprecated and won't work in nuxt 3. But as far as I understand, you can not pass a function to the build.postcss option right now and therefore there is no other way to do this at the moment.

What does the proposed changes look like?

Allow build.postcss to use a function, and expose CTX to it, just like postcss-loader does (https://github.com/postcss/postcss-loader#context-ctx) to make the config file dynamic.

[simllll]

Some details for a scenario like this:

• we have tailwindcss which has by default a lot of css classes ;-)
• we used nuxt-purgecss to clean up unused css classes
• all fine, but our project was growing and growing and at the end the build time grow up to 15-30 minutes.
• we found out that most of the time consuming task is actually the purgecss process, as this process has to look through ALL files to see if css classes are used. super slow.
• so we tried to figure out some ways, and stumpled upon postcss-purgecss's contentFunction. most of our components use scoped css anyways, therefore we decided to give it a try and only scan through the files that are necessary for each "css" part. This improved compile time already drastically, but we had some other issues with unscoped css (nothing that could not be solved, but still..)
• but we were thinking about css and purgecss again, and finally came up with the idea that our components actually do not have any unused css (or even if they have it is a very minimal overhead), and purgecss is mainly used for tailwind. so can't we just purge the "main" css?
• as it turned out there is a "css" filter in purgecss which has some other effects, and is not the function we were looking for, there are some other purgecss "filter" modules to apply a purgecss plugin only to some files, but then we found following sentence on postcss-loader

postcss-loader exposes context ctx to the config file, making your postcss.config.js dynamic, so can use it to do some real magic

which would solve all our problems ;)

our postcss file looks now somethign like @suits-at has mentioned, adds all the "postcss" config that nuxt adds automatically manually in there again (which is kinda worring us..) and finally adds purgecss plugin only in case it is our "main" css file.

this works great, we have dropped our build time by more than the half :-)

But, again... the postcss.config.js "method" is deprecated, so we are looking for alternatives, and it would also be great to just "modify" the postcss config for each processed file beforehand, so that nuxt could still build the config, other modules could extend it etc. and then a hook just "modifies" it to your own need. this hook should get a copy of the "original" config object and the postcss ctx, and returns a modified version of the config (or just the same...)

pinging @manniL

Thanks
Simon

[simllll]

bump

[danielroe]

@simllll You should be able to pass a function to the config of each plugin which lets you access the loader context - see https://codesandbox.io/s/wizardly-cdn-ts7sq?file=/pages/index.vue

[simllll]

@danielroe it's not about passing a function to the plugin, it's about passing a function to postcss-loader directly. see https://webpack.js.org/loaders/postcss-loader/#postcssoptions
Since nuxt now supports postcss8 too, it would be great to get this feature also into core. I'll finish some tests and will open a PR for it