Vue SVG: fillRule and fillOpacity should convert to fill-rule/ fill-opacity

[kingzez]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• All
• Angular
• HTML
• Qwik
• React
• React-Native
• Solid
• Stencil
• Svelte
• Vue
• Web components

Reproduction case

https://mitosis.builder.io/?outputTab=G4VwpkA%3D&code=JYWwDg9gTgLgBAbzgVwM4FMAi6BmBDZAGxgAUoIxU4BfOHckOAcgAEAjZYQgE3SgDpgEAPQhgMCKmComAKFnoAHpFhxe%2BIvBzIAdgGMYQnXADCAC3R6A1gDEuhABRhylAJSJ5cOFHQxkUYwdZLy8AHlQANwBzYJCvRRBCHVQAXgAiMxgYMAAuYWEAdyL%2BAoBmfmgo4QAmAAZ64UiotNivAD5WkNCount0nQgddDTewkIAJSJ0dPQI9AHubjSOuLjQsDwYM1HCdIBiG0ORnHsAeQ29cQBPFIRa%2FgBWWm50gFlauFqzauqIn4AJWoALxGFDwlxgNzu%2FFqAEZaMIVqtQsIokiwo1okjXLJqLIgA

Expected Behaviour

<g fill="none" fillRule="evenodd">
  <path fill="#FFF" fillOpacity={0.5} d="M0 0h22v22H0z" opacity={0.01} />
</g>

fillRule should convert to fill-rule
fillOpaticy should convert to fill-opaticy

Actual Behaviour

fillRule should convert to fillRule
fillOpaticy should convert to fillOpaticy

Additional Information

No response

[samijaber]

This is somewhat a duplicate of #526: we had a long discussion there and decided to:

• make Mitosis use camelcased attributes, e.g. fillRule
• add logic to all generators (except solid/react) to lowercase those attributes

This is actually not a bug at the moment because fillRule is not a valid attribute in Mitosis JSX types: it is currently expecting you to write fillrule, and you can see that the fiddle complains about it being invalid:

Closing as it's a duplicate of #526