`svelte-check`: Warn: Unknown property: 'r' (scss)

[threema-gian]

Describe the bug

When I use the r property (SVG circle radius) in CSS, svelte-check displays the following warning: Warn: Unknown property: 'r' (scss).

For reference:

• https://svgwg.org/svg2-draft/geometry.html#R.
• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/r (note the following info box: "Note: Starting with SVG2, r is a Geometry Property meaning this attribute can also be used as a CSS property for circles.").

Possibly related issues:

• https://github.com/sveltejs/language-tools/issues/977.

Reproduction

Reproducer here (built with the latest Vite + Svelte starter at the time of writing): https://github.com/threema-gian/svelte-check-unknown-property-reproducer.

Expected behaviour

Using the following CSS block should not produce any svelte-check warnings:

svg circle {
  r: 5px;
}

System Info

• OS: Fedora 40
• IDE: VSCode
• Package:
  • svelte: 4.2.12
  • svelte-check: 3.6.6
  • typescript: 5.3.3
  • ...others, probably not relevant

Relevant npm script:

• "lint:svelte": "svelte-check --workspace src/app/ --no-tsconfig --compiler-warnings \"a11y-click-events-have-key-events:ignore\""

Which package is the issue about?

svelte-check

Additional Information, eg. Screenshots

No response

[jasonlyu123]

This would need support from upstream vscode-css-languageservice which pulls data from MDN. And MDN also doesn't have a dedicated page for these geometry properties.

[phobetron]

@jasonlyu123 It seems these properties should be registered in current versions of svelte-check, based on the version numbers/dates of vscode-css-languageservice and vscode-custom-data, but they're still being reported as unknown. We can see this specific property registered here.

I'm not sure whether bumping vscode-css-languageservice again would solve the issue, but I'm hopeful it may.

[jasonlyu123]

Seems like it was filtered out because of the browser: none. Judging from the generation script, I think that file is from an old source, and they merged it with the data from MDN. But MDN doesn't have it. So you might need to ask MDN or ask the vscode team if they can manually update the browser capability.

[phobetron]

I've created an issue in the vscode-custom-data repository. Hopefully they'll have a solution 🤞🏻

[jasonlyu123]

Oh, wait. I saw you linked the MDN page for the CSS property in the upstream issue. So MDN actually added the page recently. I didn't check it before I sent the last comment😅. Then it'll be solved after vscode-custom-data updates the dependencies and regeneate the data.

[AlbertMarashi]

fyi this also occurs with x, y, rx, ry