Make it easy to opt out of next/babel preset components

Feature request

Is your feature request related to a problem? Please describe.

Sometimes the provided babel plugins conflict with what I want to do. For example, I would like to use class instead of className and Preact with Next.js.

However, styled-jsx’s babel plugin is overwriting my classes:

since I use Tailwind instead of styled-jsx, I would like to turn the styled-jsx plugin off.

There is an old issue to opt out of styled-jsx, but this no longer works since plugins are no longer self identifying:

GitHub Source

You cant simply do myPreset.plugins.filter any more because there is no identifying name for the plugins. You can’t rely on order because the order varies depending on env.

in order to do what i need i am having to copy out the entire source of the babel plugin in order to delete the specific plugin I need.

Describe the solution you’d like

I would like a simple way to opt out of the babel plugins. I think the best way is to simply attach the name of the plugin to each plugin, so that the user can filter in a babel.config.js:

// note: this is just my proposal - this doesnt actually work bc plugins arent self identifying
const nextbabel = require("next/babel");

const wrapNextBabel = (api) => {
  const temp = nextbabel(api);
  temp.plugins = templ.plugins.filter(plugin => plugin.name !== 'styled-jsx')
  return temp;
};
return {
  presets: [wrapNextBabel],
  plugins: [],
};

(btw - Next.js’ typescript fails when you use babel.config.js as oppose to .babelrc - i ended up routing .babelrc to a babel-preset.js in order to trick Next.js)

Describe alternatives you’ve considered

maintaining this ugly ass fork haha

[sw-yx]

ahh you’re right. i accidentally left some in there when i copied some boilerplate.

[timneutkens]

but i think its also good to no-op styled-jsx when it is not used. could potentially save a lot of kb in wasteful generated classnames.

This should be the case already if you don’t use styled-jsx though. Maybe you have a <style jsx> somewhere 🤔