How do you use browser mode with React components that have LESS stylesheets?

[kgetz-arista]

I'm testing out browser mode for the first time and I have it working for a very simple React component (with no styles). However, when I try to run a test for a component with a LESS stylesheet, I get this error:

5:42:14 PM [vite] Internal server error: [less] ENOENT: no such file or directory, open 'C:\Users\kgetz\Work\event-viewer\geiger-lib\geiger-devices\npm:\@arista\styles\dist\flexbox'
  Plugin: vite:css
  File: C:/Users/kgetz/Work/event-viewer/geiger-lib/geiger-devices/src/components/DeviceIssues/styles.less:1:0
  1  |  @import 'npm://@arista/styles/dist/flexbox';
     |  ^
  2  |
  3  |  .device-issues {

Basically, here's what's happening:

1. The test file imports the React component
2. The React component imports a local styles.less LESS stylesheet
3. That stylesheet imports from other LESS stylesheets (via node_modules)

Here's an example of what the stylesheet looks like:

@import 'npm://@arista/styles/dist/flexbox';

.device-issues {
  .flex-horiz;
  align-items: center;
  gap: 5px;
}

You may be wondering how this ends up working at all when building our app. To achieve that, we use less-plugin-npm-import to resolve the import statements; our esbuild config has this:

import { lessLoader } from 'esbuild-plugin-less';
import NpmImportPlugin from 'less-plugin-npm-import';

...

  // ...somewhere in the esbuild config...
  plugins: [
    lessLoader({
      plugins: [new NpmImportPlugin()],
    }),
  ],

I tried using this same approach in my Vitest config, but it didn't help. How can I get LESS stylesheets (with imports) to work in browser mode?

[hi-ogawa]

Vitest's underlying transform/resolution logic is based on Vite, so you likely need to port your esbuild plugin to Vite plugin (likely both lessLoader and npmImportPlugin).

[kgetz-arista]

Hmm, okay, I'll consider that (though I'm not the author of any of those plugins). On the reverse side, do you know if there's a way to tell Vitest to ignore all stylesheets? That could be another option.

[kgetz-arista]

Ah, I think I actually spoke too soon. I forgot that we use these same kinds of imports in our Vite apps, so I tracked down our shared config and realized that the magic incantation for the config is slightly different. This works in Vitest too:

  css: {
    preprocessorOptions: {
      less: {
        plugins: [new NpmImportPlugin()],
      },
    },
  },

[hi-ogawa]

(Btw, I said to port, but it's possible that similar Vite plugin might already exist in Vite ecosystem)

On the reverse side, do you know if there's a way to tell Vitest to ignore all stylesheets? That could be another option.

For that, I think some tiny plugin like this might work fine. This just strips off specific @import via Vite plugin transform system

defineConfig({
  plugins: [
    {
      name: 'strip-npm-imports',
      transform(code, id) {
        if (id.endsWith('.less')) {
          return code.replace(/@import\s+['"]npm:\/\/[^'"]+['"];?/g, '');
        }
      }
    }
  ]
})

[sunnypatell]

@kgetz-arista vitest browser mode uses vite under the hood, so you need to pass your less plugin through vite's css config, not esbuild's.

// vitest.config.ts
import NpmImportPlugin from 'less-plugin-npm-import';

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        plugins: [new NpmImportPlugin({ prefix: '~' })],
      },
    },
  },
  test: {
    browser: { /* your existing browser config */ },
  },
});

one thing though -- the npm:// prefix in your less imports needs to match what less-plugin-npm-import expects. by default it uses ~, so you'd need to update your less files from @import 'npm://@arista/styles/dist/flexbox' to @import '~@arista/styles/dist/flexbox'. or configure the plugin's prefix to match your convention.

ref: vite css.preprocessorOptions