Igorbek/typescript-plugin-styled-components

Support style objects

denis-sokolov opened this issue · 2 comments

denis-sokolov commented

Style objects is a way to use styled components with a different syntax, without the use of template literals. Instead of passing a multiline string, we pass in a style object:

styled.div({
  minHeight: "100vh",
});

The benefits of this are most notable in TypeScript projects, where the keys are autocompleted and the values are typechecked. It also reduces the number of nested syntaxes in one spot.

Unfortunately, this plugin does not seem to support this syntax yet. If I use a template literal the class name is set, but if I use the style object, there is no effect. To verify, I have added a getDisplayName option to the transformer option and it is only called for the template literal cases.

I understand if you decide this is a fringe use case and it’s not worth the time to support. Thanks for the plugin as is!

Igorbek commented

Thank you for pointing out to this. This is something that we definitely need to support and will.
The change is rather trivial and will not take long. Probably I can find time to add it within a week.

  • 🎉1
Igorbek commented

Released in 1.2.0