CSS syntax highlighting in VSCode: @layer keyword support

user_7523969 0
Viewed 325

As you might know some browsers already support CSS Cascade Layers (https://caniuse.com/?search=%40layer). The main keyword of this feature is @layer. Unfortunately VSCode displays a warning message:

Unknown at rule @layer css(unknownAtRules)

enter image description here

Is there any list of css keywords to include @layer keyword in my VSCode settings?

I tried to use the "css.customData" option. But I didn't manage to get any results. I created a css-data.json file in the same folder as the settings.json file.

What the correct path to the file should look like? I would like to have a relative path but I tried an absolute path as well. Nothing happened. I'm using portable VSCode if it is matter. Here are my attempts:

"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"],

Here is a content of css-data.json:

{
    "version": 1.0,
    "properties": [],
    "atDirectives": [
        {
            "name": "@layer",
            "description": "Declares a cascade layer."
        }
    ],
    "pseudoClasses": [],
    "pseudoElements": []
}
vscode-settings visual-studio-code
1 Answers

You probably just need to use

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

but in case that doesn't work; I fixed this for myself in the following way:

in: .vscode/settings.json

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

and then the .vscode/css_custom_data.json file itself:

{
    "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"
                }
            ]
        }
    ]
}

This however fails to fully permit the use of the @layer spec as @import rules still can't include a layer() as an example:

@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*/

now throws 3 errors and 0 warnings whereas without this fix it also throws a warning.

user_168854290
Related