Support Styled Component Syntex

[owjs3901]

Support Styled Component Syntex

Support styled

1. static

const StyledDiv = styled.div`
  width: 100%
`

=>

const StyledDiv = (props: ComponentProps<'div'>)=><div {...props} className={"a" + " " + props.className} />

2. variable

const StyledDiv = styled.div`
  width: 100%;
  bg: ${props=> props.blue};
  ${props => css`height: 100px`};
`

=>

const StyledDiv = (props: ComponentProps<'div'>)=><div {...props} className={"a b" + " " + (props=>"css-gen-class")(props) +" "+props.className} style={{
c: (props=>props.blue)(props),
...props.style}} />

3. custom component

const StyledDiv = styled(A)`
  width: 100%
`

=>

const StyledDiv = (props: ComponentProps<A>)=><A props={props} className={"a" + " " + props.className} />

4. object expression

const StyledDiv = styled.div({w: '100%'})

=>

const StyledDiv = (props: ComponentProps<'div'>)=><div {...props} className={"a" + " " + props.className} />