如何禁用 Svelte 的警告信息 "未使用的 CSS 选择器"？

Question

我的平面设计师在格式化我们的Svelte应用程序时采用了一种系统化的LESS类集合方法，在组件或页面中导入适当的LESS文件，然后在需要的地方应用这些类。结果是我们有大量未使用的类，可能会在以后使用。

Svelte的好处是未使用的CSS不会被编译，因此所有这些（尚未）冗余的类都不会妨碍任何事情。但是，每当我们编译时，就会得到一个大警告列表：“未使用的CSS选择器”。这是一个主要的麻烦，因为它使人更难注意到实际错误。而且它看起来很丑。

我查阅了文档，发现有一种方法可以抑制警告，但那只适用于HTML部分。

有没有什么办法可以摆脱这些警告？请注意，我们使用Svelte Preprocess。

- Mielipuoli

---

https://github.com/sveltejs/svelte/issues/1594 - Wtower

Answer 1

我发现这个解决方案更加顺畅，我稍微修改了一下：

// rollup.config.js
...
svelte({
    ...
    onwarn: (warning, handler) => {
        const { code, frame } = warning;
        if (code === "css-unused-selector")
            return;

        handler(warning);
    },
    ...
}),
...

- Fractalf

---

是的，这是解决这个问题的正确方式。非常感谢！ - Mielipuoli

我查找了解决这个问题的方法，发现你链接到了我的Github评论。天啊。 - NetOperator Wibby

只是想提一下，在 SvelteKit 中这个也是一样的：将 onWarn 函数添加到 svelte.config.js 文件中 "config" 对象的根部。 - Johannes

如果您将Svelte用作Vite插件，则需要将其放入vite.config.js文件中。 - yunzen

我认为你应该提供一个完整的答案，说明如何使用Vite或Sveltekit来完成它。 - Isaac Weingarten

我认为你应该给出一个完整的答案，说明如何使用Vite或SvelteKit来实现它。 - undefined

Answer 2

似乎没有合适的方法可以关闭这个警告。但是，有一个解决方法。

在node_modules/svelte/compiler.js中，删除第24842行或将其注释掉:

this.stylesheet.warn_on_unused_selectors(this);

当您更新或重新安装svelte时，您需要再次执行此操作。

- Mielipuoli

---

这是唯一真正解决我的问题的方法（我的问题是每个文件生成成千上万个警告，VSCode在保存时停止自动完成或格式化我的代码，系统陷入停顿等，导致性能严重下降）。谢谢。 - Jay

不用谢，但是...请查看 Fractalf 提供的其他答案。如果你使用 Rollup，你可以在配置文件中直接采纳他的代码建议。 - Mielipuoli

是的，我正在使用Rollup并尝试了那种方法。对我来说没有起作用。性能仍然很差。 - Jay

Answer 3

你得让编译器别吐出来，还得让VSCode别对你大喊大叫。

工作区级别的VSCode设置

  "svelte.plugin.svelte.compilerWarnings": {
    "css-unused-selector": "ignore",
  }

sveltekit.config.ts

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://kit.svelte.dev/docs/integrations#preprocessors
    // for more information about preprocessors
    preprocess: vitePreprocess(),
    onwarn: (warning, handler) => {
        if (warning.code === 'css-unused-selector') {
            return;
        }
        handler(warning);
    },
    kit: {
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter()
    },
    preprocess: vitePreprocess()
};

export default config;

来源: https://github.com/sveltejs/language-tools/issues/650#issuecomment-1729917996

- Duke

Answer 4

我使用简单的“显式”忽略机制：

首先，定义警告键和一个正则表达式来捕获忽略消息的主体。然后，循环遍历“忽略模式”并至少匹配一个。

// rollup.config.js
...
const warnIgnores = {
  'css-unused-selector': {
    capture: /.*"(.*)"$/,
    ignore: [
      /^\.p\d+/,
      /^\.sm\d+/,
      /^\.md\d+/,
      /^\.lg\d+/,
      /^\.xg\d+/,
      /^\.all\d+/,
      /^\.row(::after)?/
    ]
  }
}
...
svelte({
  ...
  // Explicitely ignore warnings
  onwarn: (warning, handler) => {
    const { message, code } = warning;
    const patterns = warnIgnores[code];
    if (patterns != undefined) {
      /* Find the meat. */
      const meat = message.match(patterns.capture);
      if (meat != null) {
        for (var i = 0; i < patterns.ignore.length; i++) {
          if (meat[1].match(patterns.ignore[i]) != null) {
            return;
          }
        }
      }
    }
    handler(warning);
  },
  ...
});

"明确比含蓄更好！"

- pylover

---

你是否知道如何编写这种条件忽略，但仅适用于已导入的文件？我想保留来自相同组件的未使用选择器的警告，但如果例如导入了我的 _forms.scss 文件并且没有使用其中的任何一个表单元素，则看到警告是荒谬的，而那些就是我想要忽略的。 - Digital Ninja

不确定，请在 message 上执行 console.log 并循环文件名。如果找到，使用正则表达式修改代码以提取文件名并进行预测。 - pylover

Answer 5

不需要创建一个 `rollup.config.js` 文件，只需在 `vite.config.js` 中进行配置即可。

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
    plugins: [sveltekit()],
    build: {
        rollupOptions: {
            onwarn: (warning, handler) => {
                const { code, frame } = warning;
                if (code === "anchor-is-valid" || code === "a11y-autofocus") {
                    return;
                }
                if (code === "css-unused-selector" && frame && frame.includes("shape")) {
                    return;
                }
                handler(warning);
            }
        }
    },
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}']
    }
});

- qed