Expose OXC config when using vite-plugin-react

[DamianPereira]

Related plugins

• plugin-react

• plugin-react-swc

• plugin-react-oxc

• plugin-rsc

Description

Currently my vite config has this:

    react({
      babel: {
        plugins: [
          [
            'babel-plugin-styled-components',
            {
              displayName: true,
              ssr: true,
              pure: true,
            },
          ],
        ],
      },
    }),

Enabling the ssr and pure options is necessary for my setup. OXC supports styled components as a built in plugin: https://oxc.rs/docs/guide/usage/transformer.html#styled-components.

I am testing rolldown-vite, which should use oxc by default if no babel is provided, according to the depreaction notice of vite-plugin-react-oxc:

This package is deprecated. Please use @vitejs/plugin-react instead, which automatically enables Oxc-based Fast Refresh transform on rolldown-vite.

But currently vite-plugin-react does not allow any customization for inner OXC. Is there a way to accomplish this?

Suggested solution

Add a oxc key to the config, the same purpose as the babel one, which taps into the inner oxc transform config and allows customization. Or if one exists document it.

Also maybe add a explicit option to select which transformer to use instead of depending on which options are provided.

transform: 'babel' | 'oxc' | 'auto' (default)

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[ArnaudBarre]

The idea of the plugin when used with rolldown is to depend on the 'global' oxc config (I didn't check if this option was available or not yet)

[hi-ogawa]

The option is available in vite config https://stackblitz.com/edit/github-kv13j64k?file=vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  oxc: {
    plugins: {
      styledComponents: {
        displayName: true,
        // ...
      },
    },
  },
});

I'm not sure if this is documented anywhere though. We should mention how to migrate maybe both in https://vite.dev/guide/rolldown.html and in @vitejs/plugin-react readme. cc @TheAlexLichter

[DamianPereira]

That's great! Do you know how I could implement 2 different oxc configs for file subsets?

My actual config is more similar to:

plugins: [
    react({
      include:  ['/**/*.jsx']
      exclude: ['**/no-display-name/*.jsx'],
      babel: {
        plugins: [
          [
            'babel-plugin-styled-components',
            {
              displayName: true,
              ssr: true,
              pure: true,
            },
          ],
        ],
      },
    }),
    react({
      include: ['**/no-display-name/*.jsx'],
      babel: {
        plugins: [
          [
            'babel-plugin-styled-components',
            {
              displayName: false,
              ssr: true,
              pure: true,
            },
          ],
        ],
      },
    }),
]

If this is now something that needs to happen at the root config I need to handle multiple exclude/include some other way right?

[hi-ogawa]

I don't think that's supported at the moment. I'm not sure if it's a common usage and switching top-level oxc config might be difficult. Please raise a feature request for that https://github.com/vitejs/rolldown-vite.

As a workaround, you may need babel for one side and use a different plugin https://github.com/owlsdepartment/vite-plugin-babel. Or keep current react plugin babel options (and give up oxc).

[DamianPereira]

Created this ticket there: vitejs/vite#21949

But I was also thinking. Is there a chance that @vitejs/plugin-react supports oxc overrides? I see source code says

// oxc option is only available in rolldown-vite

But would it be possible for plugin-react to provide oxcOverrides key that merges configs there?

[hi-ogawa]

But I was also thinking. Is there a chance that @vitejs/plugin-react supports oxc overrides? I see source code says

@DamianPereira Can you clarify what you suggesting? More or less @vitejs/plugin-react on rolldown-vite is a thin wrapper to setup top-level oxc config override, which cannot be configured based on multiple include. Are you suggesting to automatically swap babel-plugin-styled-components options into equivalent oxc top-level config inside @vitejs/plugin-react? (but that still just override one include over another include).

[DamianPereira]

Oh I understand, I thought that the oxc transform code I was seeing in the source code applied for each file the plugin instance transformed. So I was trying to keep a "2 plugin instances with different transformer config" pattern.

Basically I was thinking about:

plugins: [
    react({
      include:  ['/**/*.jsx']
      exclude: ['**/no-display-name/*.jsx'],
      oxc: {
        plugins: {
          styledComponents: {
          displayName: true,
      },
    },
  },
      },
    }),
    react({
      include: ['**/no-display-name/*.jsx'],
      oxc: {
        plugins: {
          styledComponents: {
          displayName: false,
      },
    },
  },
}),
]

But if both oxc configs will end up in the same root object it won't do anything, it needs some sort of support from root rolldown/vite. I'll wait and see where the vite rolldown issue gets to, but it looks like the plugin won't be able to handle this.

I was suggesting a way to keep 2 configs for different files, but it looks like it is not possible from here.