我可以选择性地忽略 PostCSS 和 Vite 的 CSS 警告吗？

Question

在使用 Vite 和 PostCSS（通过 SvelteKit）时，我正在从使用已弃用选择器的库中导入样式表，并收到如下警告：

[vite:css] Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
651|  @media print {
652|    /* Prevent printers from removing background-images of controls. */
653|    .leaflet-control {
   |       ^
654|            -webkit-print-color-adjust: exact;
655|            color-adjust: exact;

我无法控制此文件，因此最好禁止仅来自此库的警告（以及可能来自从 node_modules 导入的文件的所有警告）。

有人可以指出我在 Vite 和/或 PostCSS 配置中可以做到的地方吗？

Answer 1

看起来有几个选项可以解决这个问题：

• Override the CSS for the particular property 在应用程序样式表中。
• fork 并将 PR 提交到具有已弃用属性的库。
• Use a plugin。我没有尝试此选项，因为我决定更愿意解决警告而不是忽略它。

Answer 2

你可以忽略你的 svelte 配置中的 CSS 错误

// svelte.config.js

export default {
    ...
    onwarn: (warning, handler) => {
            const { code } = warning;
            if (code === 'css-unused-selector') {
                return;
            }

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

编辑：在jrh 对我的回答发表评论后，我记得我在最初只关注文档时忽略警告也遇到了一些麻烦，结果我也将它添加到了我的 .eslintrc.js 中：

module.exports = {
    ...
    plugins: ['svelte3'],
    overrides: [
        {
            files: ['*.svelte'],
            processor: 'svelte3/svelte3',
            settings: {
                'svelte3/ignore-styles': () => true,
                'svelte3/ignore-warnings': (warning) =>
                    warning.code.includes('selector')
                        || warning.code.includes('some-other-pattern')
            }
        }
    ],
    ...
};

我的错，在写我的答案时，我搜索了“未使用的选择器”，但没有捕捉到我的代码部分，因为它在那个文件中是“选择器”。