如何禁用Svelte警告“未使用的CSS选择器”

avwztpqn  于 12个月前  发布在  其他
关注(0)|答案(5)|浏览(122)

我的图形设计师格式化我们的Svelte应用程序的方法是在LESS中有一组系统的类,在组件或页面中导入适当的LESS文件,然后在需要的地方应用这些类。因此,我们有大量的未使用的类,我们可能会在以后使用。
关于Svelte的伟大之处在于,未使用的CSS不会被编译,所以所有那些(尚未)冗余的类都不会碍事。然而,每当我们编译时,我们都会得到一个很大的警告列表:未使用的CSS选择器。这是一个很大的麻烦,因为它使得在创建实际错误时更难注意到。而且看起来很丑
我检查了文档,有一种方法可以抑制警告,但这只适用于HTML部分。
有没有办法消除这些警告?请注意,我们使用Svelte Preprocess

dldeef67

dldeef671#

我发现这个解决方案有点平滑,我稍微修改了一下:

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

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

pxyaymoc2#

似乎没有任何可能以适当的方式关闭此警告。但是,有一个变通办法。
node_modules/svelte/compiler.js 中,删除第24842行或将其放入注解中:
this.stylesheet.warn_on_unused_selectors(this);
当您更新或重新安装svelte时,您将不得不再次执行此操作。

11dmarpk

11dmarpk3#

你必须让编译器不呕吐,也让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

ajsxfq5m

ajsxfq5m4#

我使用一个简单的explicit忽略机制:
首先,定义warning键和正则表达式来捕获ignore消息的内容。然后,循环遍历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);
  },
  ...
});

显式比隐式更好!

9avjhtql

9avjhtql5#

无需创建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}']
    }
});

相关问题