Styled-components: styles wrongly composed when border-style is used

[ivan-navarro-75]

When I am using border-style: solid in combination with some other border properties the result that styled-components is returning me is not working

const Input = styled.input`
  width: 100%;

  border-style: solid
  border-top-width: ${props => (props.underline ? '0' : '2px')};
  border-bottom-width: 2px;
`

is returning this:

width: 100%;
border-style: solid border-top-width: 0;  <---BAD
border-bottom-width: 2px;

Version

2.0.0-10

Reproduction

https://www.webpackbin.com/bins/-KlTAoiCcv59O0CuMANn

[k15a]

You forgot a semicolon.

const Input = styled.input`
  width: 100%;

  border-style: solid;
  border-top-width: ${props => (props.underline ? '0' : '2px')};
  border-bottom-width: 2px;
`

[ivan-navarro-75]

god! thanks! :weary:

with the old version I didn't realize it.

[kitten]

The next patch version is going to use stylis 3 which adds missing semicolons :)