BuilderIO/mitosis

Sveltosis style directives & React generation

megan-starr9 opened this issue · 0 comments

I am interested in helping provide a fix!

Yes

Which generators are impacted?

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

Reproduction case

https://mitosis.builder.io/?outputTab=E4UwhgxgLkA%3D&inputTab=M4NwpgNgLmQ%3D&code=DwZwxgTglgDgLgAgDYEMB2BzAvAIjiHAPgCgEEBTADxgHsJElzEwak6EsEByLgblIrU6DJggBGdACbkILNhA7c%2BAqrXrJRcKnDntOPfsAD04aPBLFgYgK5w4NNAJBwAnoywBvXQoD8CAAZiKGAA1hgQNNZokgC03gBcCAAkXqx0AL68%2FgiJPOlOrozxEhDSEHFpEJ4lZd75ZM5u5PHenlqUOpX1CA4tSFChxCRkoGxwhADC%2FaEIABYy5MYgYyTGNnYOJEA%3D%3D

Expected Behaviour

When styles are added using Svelte style directives, they should be reflected in the translated styles, just as class directives are.

Further, when styles are translated to React, they should be provided in an object and not a string. (Errors are thrown when trying to provide a string to the style prop)

Actual Behaviour

Style directives are left out of the translated code entirely and lost.

The style prop is provided to React as an untranslated string and breaks the build.

Additional Information

No response