Cannot use custom sass logger with `preprocessorMaxWorkers`

sqal commented 1 month ago

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/vite@5.3.5_sass@1.77.8/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:37332:19) at async compileCSSPreprocessors (file:///C:/Users/.../test/node_modules/.pnpm/vite@5.3.5_sass@1.77.8/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:36633:28) at async compileCSS (file:///C:/Users/.../test/node_modules/.pnpm/vite@5.3.5_sass@1.77.8/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:36687:32) at async Object.transform (file:///C:/Users/.../test/node_modules/.pnpm/vite@5.3.5_sass@1.77.8/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:36084:11) at async transform (file:///C:/Users/.../test/node_modules/.pnpm/rollup@4.19.2/node_modules/rollup/dist/es/shared/node-entry.js:18774:16) at async ModuleLoader.addModuleSource (file:///C:/Users/.../test/node_modules/.pnpm/rollup@4.19.2/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

Create new vite project pnpm create vite@latest and vanillajs template
Install sass and replace styles.css extension
Add vite.config.js

import { defineConfig } from "vite";

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

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

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

hi-ogawa commented 1 month ago

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

https://github.com/vitejs/vite/blob/0f56e1724162df76fffd5508148db118767ebe32/packages/vite/src/node/plugins/css.ts#L2439-L2441

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.

https://github.com/vitejs/vite/blob/0f56e1724162df76fffd5508148db118767ebe32/packages/vite/src/node/plugins/css.ts#L2184-L2190

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 https://github.com/sass/dart-sass/issues/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 commented 1 month ago

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.

vitejs / vite