How to disable css/sass/... processing?

[eduardweigandt0770]

In jest you would have a transformer/mock for all imports with styling resources. How can I disable such processing with vitest?

[sheremet-va]

Do you need to tho? Vite can handle them, Jest cant

[patak-dev]

You could add an alias to an empty stylesheet, or add an inline plugin that returns an empty virtual stylesheet for these files

[sheremet-va]

You can do something like this:

// vite.config.ts
{
   resolve: {
      alias: [
         ...(mode === 'test' && [{ find: /\.css$/, replacement: 'path to empty styleshit' }])
      ]
   }
}

[sheremet-va]

I think Vitest can provide a shortcut to this inside test property

[eduardweigandt0770]

With this config I get a load error with wrong paths, because I match and replace only the extension. So should I write a plugin, because aliases only find/replace parts?

// vite.config.ts
{
   resolve: {
      alias: [
        { find:'@', replacement: new URL('./src/', import.meta.url).pathname },
        { find: /\.(scss|sass|css)$/, replacement: new URL('./tests/empty.css', import.meta.url).pathname },
      ],
   }
}

and the error:
`
❯ tests/unit/components/HelloWorld.spec.js (0)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

FAIL tests/unit/components/HelloWorld.spec.js [ tests/unit/components/HelloWorld.spec.js ]
Error: failed to load ../../../src/components/VApp/VApp/home/user/Workspaces/tmp/migration/tests/empty.css
❯ async node_modules/.pnpm/[email protected][email protected]/node_modules/vuetify/lib/components/VApp/VApp.js:2:31
1| // Styles
2| import "../../../src/components/VApp/VApp.sass"; // Mixins
| ^
3|
4| import Themeable from '../../mixins/themeable'; // Utilities
❯ async node_modules/.pnpm/[email protected][email protected]/node_modules/vuetify/lib/components/VApp/index.js:1:310
❯ async node_modules/.pnpm/[email protected][email protected]/node_modules/vuetify/lib/components/index.js:1:310
`

[eduardweigandt0770]

With this regex the find/replace works:

  resolve: {
    alias: [
      { find:'@', replacement: new URL('./src/', import.meta.url).pathname },
      { find: /.*\.(?:scss|sass|css)$/, replacement: new URL('./tests/empty.css', import.meta.url).pathname },
    ],
  }

[antfu]

An inline plugin might be better?

plugins: [
  {
    enfore: 'pre',
    transform(code, id) {
      if (id.endsWith('.css'))
        return ''
    }
  }
]

[sheremet-va]

@sheremet-va https://stackblitz.com/edit/vitest-dev-vitest-vaeyiy

The deprecation warnings of sass shown in terminal indicates that vitest still process sass code of Vuetify

Can you provide a reproduction with working tests and not working css processing? If I add vuetify to deps.inline css is not processed for me.

[sheremet-va]

Ah, I see. If I replace return '' to replace { code: '' } I don't see deprecation errors. Will create a PR.

[sheremet-va]

Fix released in 0.15.1

[patak-dev]

Uh, good catch. Is this a bug in Vite? I would expect your original code should give the same result

[sheremet-va]

Uh, good catch. Is this a bug in Vite? I would expect your original code should give the same result

I think it might be. Maybe (!result) check instead of result != null?