如何禁用 Svelte 警告 "Unused CSS selector"

Question

我的平面设计师格式化我们的 Svelte 应用程序的方法是在 LESS 中有一套系统的类，在组件或页面中导入适当的 LESS 文件，然后应用那些类无论他需要他们。因此，我们有大量未使用的类，我们可能会在以后使用。

Svelte 的伟大之处在于未使用的 CSS 不会被编译，所以所有那些（还）多余的类无论如何都不会妨碍。然而，每当我们编译时，我们都会收到一大串警告："Unused CSS selector"。这是一个主要的麻烦，因为它使得在创建实际错误时更难注意到。再加上它看起来很丑。

我检查了 the documentation 并且有一种方法可以抑制警告，但这只适用于 HTML 部分。

有什么方法可以消除这些警告吗？请注意，我们使用 Svelte Preprocess.

Answer 1

似乎没有任何可能以适当的方式关闭此警告。但是，有一个解决方法。

在node_modules/svelte/compiler.js中，去掉第24842行或者放在注释中：

this.stylesheet.warn_on_unused_selectors(this);

当您更新或重新安装 svelte 时，您将不得不再次执行此操作。

Answer 2

我发现 this 解决方案更流畅一些，我稍作修改：

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

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

Answer 3

我使用了一个简单的explicit忽略机制：

首先，定义警告键和正则表达式来捕获忽略消息的内容。然后，循环 ignore patterns 并至少匹配一个

// 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);
  },
  ...
});

Explicit is better than implicit!

如何禁用 Svelte 警告 "Unused CSS selector"

How to disable Svelte warning "Unused CSS selector"

css

svelte