Unable to properly ignore/exclude files for transformation

[marcus-sa]

Steps to reproduce

I'm trying to use Pigment CSS in a project that uses decorators and TextDecoder/TextEncoder.
However this doesn't work because WYW-in-JS uses Babel.
If I add the @babel/plugin-proposal-decorators I now get an error saying that TextDecoder is not defined.
These files are part of separate libraries and not part of the main application.

Here's what I've tried without any luck:

• Installing the libraries as packages in node_modules.
• Using the exclude option only tells the Vite plugin to ignore certain files, but that doesn't affect WYW-in-JS because it still resolves the imports for those files and tries to transform them.
• • If I modify the source code https://github.com/Anber/wyw-in-js/blob/d3c2791adacd7c20e8ace2417fae5aab5fce7814/packages/transform/src/transform/generators/resolveImports.ts#L108 to exclude these imports I end up with a Babel transform failed error.
• Excluding files from Babel transformation results in a Babel transform failed error.
• Adding a custom ignore rule using the rules option completely breaks the plugin causing it to not transform anything at all.

Here's my vite.config.ts.

import { defineConfig } from 'vite';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { vitePlugin as remix } from '@remix-run/dev';
import { remixPWA } from '@remix-pwa/dev';
import { join } from 'node:path';
import { workspaceRoot } from '@nx/devkit';
import tailwindcss from '@tailwindcss/vite';
import { pigment } from '@pigment-css/vite-plugin';
import { createTheme } from '@mui/material';
import { deepkitType } from '@deepkit/vite';

const buildDirectory = join(workspaceRoot, 'dist/apps/web');

const isProd = process.env.NODE_ENV === 'production';

const __dirname = import.meta.dirname;

const transformLibraries = ['@mui/material', '@mui/material-pigment-css', '@pigment-css/react'];

export default defineConfig({
  root: __dirname,
  base: './',
  cacheDir: join(workspaceRoot, 'node_modules/.vite/apps/web'),
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      drafts: {
        customMedia: true,
      },
    },
  },
  plugins: [
    tailwindcss(),
    deepkitType({
      tsConfig: join(__dirname, 'tsconfig.json'),
      compilerOptions: {
        sourceMap: true,
      },
    }),
    remix({
      buildDirectory,
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        // unstable_singleFetch: true,
        unstable_optimizeDeps: true,
        unstable_lazyRouteDiscovery: true,
      },
    }),
    isProd &&
      remixPWA({
        buildVariables: {
          'process.env.REMIX_APP_VERSION': '',
          'process.env.MEDIA_HOST': '',
        },
      }),
    nxViteTsPaths({ buildLibsFromSource: !isProd }),
    pigment({
      transformLibraries: ['@mui/material'],
      theme: createTheme({
        cssVariables: {
          colorSchemeSelector: 'media',
        },
        defaultColorScheme: 'dark',
      }),
      // adding rules breaks the plugin
      rules: [
         {
           test: filename => !filename.endsWith('.tsx') &&
             !filename.endsWith('.css') &&
             !transformLibraries.some(packageName =>
               filename.includes(packageName),
             ),
           action: 'ignore',
         },
       ],
    }),
  ],
  build: {
    commonjsOptions: {
      include: ['@mui/utils', '@toolpad/core'],
    },
  },
  ssr: {
    noExternal: [/@mui/, /@pigment-css/, '@toolpad/core'],
  },
  server: { middlewareMode: true },
  test: {
    setupFiles: [join(__dirname, 'test-setup.ts')],
    watch: false,
    globals: true,
    environment: 'jsdom',
    include: [
      join(__dirname, 'tests/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'),
    ],
    reporters: ['default'],
    coverage: {
      reportsDirectory: join(workspaceRoot, 'coverage/apps/web'),
      provider: 'v8',
    },
  },
});

Search keywords: rules, decorators, exclude, ignore