Cannot use custom sass logger with preprocessorMaxWorkers

[sqal]

Describe the bug

When I try to use custom sass logger and have enabled option preprocessorMaxWorkers, vite throws the following error:

Cannot set property message of which has only a getter

Full log

vite v5.3.5 building for production...
✓ 6 modules transformed.
x Build failed in 63ms
error during build:
[vite:css] Cannot set property message of  which has only a getter
file: C:/Users/.../test/style.scss
    at process (file:///C:/Users/.../test/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:37332:19)    at async compileCSSPreprocessors (file:///C:/Users/.../test/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:36633:28)
    at async compileCSS (file:///C:/Users/.../test/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:36687:32)
    at async Object.transform (file:///C:/Users/.../test/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:36084:11)
    at async transform (file:///C:/Users/.../test/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:18774:16)   
    at async ModuleLoader.addModuleSource (file:///C:/Users/.../test/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:18990:36)
 ELIFECYCLE  Command failed with exit code 1.

This bug also occures in vite version 5.4.0-beta.1.

Steps to reproduce

1. Create new vite project pnpm create vite@latest and vanillajs template

2. Install sass and replace styles.css extension

3. Add vite.config.js

import { defineConfig } from "vite";

export default defineConfig({
  css: {
    preprocessorMaxWorkers: true,
    preprocessorOptions: {
      scss: {
        logger: {
          warn(message, options) {}
        }
      }
    }
  }
});

4. Run build or dev command

System Info

System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 22.4.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.6.0 - C:\Program Files\nodejs\pnpm.CMD
  npmPackages:
    vite: ^5.3.4
    sass: ^1.77.8

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

The error is due to logger.warn function is passed to worker thread for scss processing. This is the actual error,

DOMException [DataCloneError]: warn(message, options) {
          } could not be cloned.
    at new DOMException (node:internal/per_context/domexception:53:5)
    at Worker.postMessage (node:internal/worker:378:5)

but this caught error is throwing due to e.message = ... assignment

vite/packages/vite/src/node/plugins/css.ts

Lines 2439 to 2441 in 0f56e17

	} catch (e) {
	// normalize SASS error
	e.message = `[sass] ${e.message}`

---

It's possible to "fix" it by adding logger to the list of fallback condition, but then it would make preprocessorMaxWorkers to have no effect since it doesn't use workers.

vite/packages/vite/src/node/plugins/css.ts

Lines 2184 to 2190 in 0f56e17

	shouldUseFake(_sassPath, _data, options) {
	// functions and importer is a function and is not serializable
	// in that case, fallback to running in main thread
	return !!(
	(options.functions && Object.keys(options.functions).length > 0) ||
	(options.importer &&
	(!Array.isArray(options.importer) || options.importer.length > 0))

---

Btw, can you explain why you want to use logger.warn? If you only need to silence certain deprecation warning (for example mixed-decls discussed in sass/dart-sass#2276), then it should be now possible (since 5.4.0-beta.1) to use api: "modern" or api: "modern-compiler" and silenceDeprecations options:

export default defineConfig({
  css: {
    preprocessorMaxWorkers: true,
    preprocessorOptions: {
      scss: {
        api: 'modern',
        silenceDeprecations: ['mixed-decls'],
      },
    },
  },
});

[sqal]

I wanted to use logger to filter out some warnings from third-party packages in node_modules. I think I'll just use silenceDeprecations then. Thanks for the tip.