teleporthq/teleport-code-generators

Improve Code Generation for StyledComponents

JayaKrishnaNamburu opened this issue · 0 comments

When generating React with StyledComponents, we can improve when we are inheriting projectStyles. Example

<Container2>Testing</Container2>

const Container2 = styled.div`
  ${PrimaryButton};
`

Container2 is inheriting PrimaryButton, but since Container2 doesn't have any styles specified on it directly. We can just directly assign it to the node.

It can be improved to be

<PrimaryButton>Testing</PrimaryButton>

Codesandbox link to check the code - https://codesandbox.io/s/gon6z?file=/pages/page.js:1211-1242
UIDL - https://repl.teleporthq.io/project/4edd4d00-bea7-477d-8afb-fc5b57fb82d5