How to document CSS custom properties (CSS variables) ?

[jpradelle]

I tried with a web-types file like

{
    "$schema": "http://json.schemastore.org/web-types",
    "name": "test",
    "version": "0.0.0",
    "contributions": {
        "css": {
            "properties": [
                {
                    "name": "--demo-css-var",
                    "description": "Demo CSS var"
                }
            ]
        }
    }
}

But it seems not to be working: I don't have completion in CSS file. Or it's working with some other conditions I don't get. I have something working in some context, but I'm not sure if this is due to web-types file.

[piotrtomiak]

@jpradelle - I've just tested it with 2022.3 and it works fine. Could you please check with latest 2022.3 RC, or share the whole project?

[jpradelle]

Hi, This is still not working with 2023.1 (Build #IU-231.8109.175, built on March 28, 2023) Here is full project: package.json

{
  "name": "test",
  "version": "0.0.0",
  "dependencies": {},
  "devDependencies": {}
}

web-types.json

{
    "$schema": "http://json.schemastore.org/web-types",
    "name": "test",
    "version": "0.0.0",
    "contributions": {
        "css": {
            "properties": [
                {
                    "name": "--demo-css-var",
                    "description": "Demo CSS var"
                }
            ]
        }
    }
}

test.css

p {
  color: var(--demo-css-var)
}

Var is not recognized and I have no completion on it:

[piotrtomiak]

@jpradelle I am sorry - I think I've misunderstood your previous question - thanks for an example. I have not added support for CSS variables, unfortunately. I will implement them ASAP. It's not much works, but they will land only in 2023.2 (and maybe 2023.1.2)

[piotrtomiak]

Please follow https://youtrack.jetbrains.com/issue/WEB-60530 for updates