VSCode 中的 CSS 语法高亮：@layer 关键字支持

Question

您可能知道，某些浏览器已经支持 CSS Cascade Layers ( https://caniuse.com/?search=%40layer )。该功能的主要关键字是@layer。不幸的是 VSCode 显示一条警告消息：

Unknown at rule @layer css(unknownAtRules)

是否有任何 css 关键字列表可以在我的 VSCode 设置中包含 @layer 关键字？

我尝试使用“css.customData”选项。但我没有得到任何结果。我在与 settings.json 文件相同的文件夹中创建了一个 css-data.json 文件。

文件的正确路径应该是什么样子？我想要一个相对路径，但我也尝试了绝对路径。什么都没发生。如果有必要的话，我正在使用便携式 VSCode。这是我的尝试：

"css.customData": ["c:\\app\\VSCode\\data\\user-data\\User\\css-data.json"],
"css.customData": ["css-data.json"],
"css.customData": [".\\data\\user-data\\User\\css-data.json"],
"css.customData": ["./data/user-data/User/css-data.json"],

这是css-data.json的内容：

{
    "version": 1.0,
    "properties": [],
    "atDirectives": [
        {
            "name": "@layer",
            "description": "Declares a cascade layer."
        }
    ],
    "pseudoClasses": [],
    "pseudoElements": []
}

Answer 1

你可能只需要使用

"css.customData": [".vs-code/css-data.json"]

但万一这不起作用；我通过以下方式为自己解决了这个问题：

在：.vscode/settings.json

"css.customData": [".vscode/css_custom_data.json"]

然后是 .vscode/css_custom_data.json 文件本身：

{
    "atDirectives": [
      {
        "name": "@layer",
        "description": "The @layer CSS at-rule is used to declare a cascade layer and can also used to define the order of precedence in case of multiple cascade layers.",
        "references": [
                {
                    "name": "@layer",
                    "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@layer"
                }
            ]
        }
    ]
}

然而，这无法完全允许使用 @layer 规范，因为 @import 规则仍然不能包含 layer() 作为示例：

@layer reset, pallet, base, layout, local;
@import "style/reset.css"   layer(reset);      /* unifies / css reset */
@import "style/pallet.css"  layer(pallet);     /* color pallets */
@import "style/main.css"    layer(base);       /* primary css*/

现在抛出 3 个错误和 0 个警告，而如果没有此修复，它也会抛出警告。