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

[swyxio]

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

[swyxio]

i think this is a pretty easy PR. if you approve the idea i would be happy to PR> basically just attaching string names to each babel plugin.

[timneutkens]

I think the better solution would be for the styled-jsx plugin to correctly no-op when you don't use styled-jsx 🤔

[swyxio]

ok.. that one might be a bit above my ability haha.

i was just trying to generalize from my bad experience - if i have to opt out of this plugin, i might need to opt out of any of the other plugins - so i'd like next/babel to help me.

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.

[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 🤔

[swyxio]

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