Support for SVG attributes like rx and ry

[jylertones]

Describe the bug

I was writing a style that would be for an SVG element, and everything works great! However, I get type errors from this simple style:

export const button = style({
  cursor: 'pointer',
  fill: backgroundColor,
  rx: baseTheme.border.radius[2],
  ry: baseTheme.border.radius[2],
});

Vanilla extract tells me that rx and ry aren't valid for ComplexStyleRule

I can try to create a PR with the change, but would this change be acceptable?

Reproduction

https://codesandbox.io/p/devbox/lk7fvk?file=%2Fsrc%2FSvgStyles.css.ts%3A4%2C4

System Info

Simple setup: TypeScript, React, Vanilla Extract with Vite

Used Package Manager

pnpm

Logs

Object literal may only specify known properties, and 'rx' does not exist in type 'ComplexStyleRule'.ts(2353)

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[askoufis]

There's a previous discussion on this topic: #1380.

Vanilla Extract will still generate styles with these properties, the type error is only happening because csstype, the package we use for CSS types, doesn't know about the SVG properties yet. You could make your own typed wrapper function in the meantime.

There has been some recent movement to get the relevant data available in mdn/data (what csstype uses to generate its types) mdn/data#750, but who knows when that will eventually be picked up by csstype (see frenic/csstype#69).

[jylertones]

Wow, thanks for finding all of these! So in short summary, we're waiting for a csstype update with the update.