`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.