add support for custom loaders in next.js plugin

[Dwlad90]

This PR enables the option to pass additional webpack loaders to the next.js plugin through a config object.

This is useful, for instance, in order to add a post-css pipeline to process the generated css file.

I will add tests once you indicate this is how you'd like to handle this, and that you have interest in the PR

[johanholmerin]

Is there any reason you couldn't add your post-css pipeline directly to webpack, with your own next.js plugin?

[TxHawks]

Next supports post-css out of the box for static css files, but how would you target the CSS file created by Style9 from within Next?

[johanholmerin]

Next.js is just a wrapper over Webpack. Take a look at the Webpack documentation regarding loaders.

[TxHawks]

I'm aware of loaders, and though I'm by no stretch an expert on their use, I don't see how adding them to the Next.js webpack config will help in this specific situation. I mean, it's doable, but in a way that feels kind of crooked to me. If I understand correctly, the only place that "knows" of the css file generated by Style9 is the inlineLoader in the Style Next plugin. so to do that, you'd basically have to monkeypatch it with something like this:

for (const rule of config.module.rules) {
  if (String(rule.test) === String(/\.(tsx|ts|js|mjs|jsx)$/) && Array.isArray(rule.use)) {
    rule.use[0].options.inlineLoader += 'postcss-loader?{"postcssOptions":{"plugins":[["autoprefixer",{}]]}}!'
  }
}

It works, but feels very brittle.

Since applying PostCSS transforms is a pretty common requirement, it makes sense to me to add first class support for it in the plugin (for the same reasons Next itself supports it as a config option). Up to you of course.

[johanholmerin]

Performing post-processing is better done as hook in a plugin - this is already how style9 does it. I made an example with how this could be done in Next.js.

[Dwlad90]

The problem is that PostCss isn't available as a plugin but only as a loader. I'm not sure it's possible to write a plugin that will wrap the PostCss loader, but even if it is, I feel that processing CSS is such a common task, that it makes sense to allow an easier way to augment the loaders used internally. Right now, it just sets a very high bar for doing something that is a pretty basic task

[johanholmerin]

If it doesn't exist this is a great opportunity to create and publish that plugin. You could start with the style9 plugin I linked to before - it is almost exactly what you want, it post-processes all CSS files with PostCSS. Just remove the parts related to the loader.

style9 does one thing - I don't want to complicate it with features that belong in a bundler

[TxHawks]

Fair enough, though I'd argue this isn't about extending what Style9 does, but rather providing hooks into the next.js plugin, which is basically a predefined webpack config.

Completely up to you of course

[johanholmerin]

Closing this since it's solvable by using a Webpack plugin