Error with multiline selectors with Subsitutions

[Tiedye]

This is valid

  a ${'a'}:first + a {}

so is this

  a 
    a:first +
    a {}

but this throws an error (colon expected and semicolon expected line 2)

  a 
    ${'a'}:first +
    a {}

This is a serious problem because prettier is reformatting selectors in a way that causes this error to manifest

[MageJohn]

This is also a problem when shorthand properties with substitutions are broken onto multiple lines.

This is valid:

styled.div`
  border-top: ${cssVar("line-width-weak")} ${cssVar("line-style-main")} ${cssVar("primary-color")};
`

But this is invalid:

styled.div`
  border-top: ${cssVar("line-width-weak")} 
    ${cssVar("line-style-main")} ${cssVar("primary-color")};
`

This is despite the resulting CSS being valid. Again, this is a problem because Prettier formats the code in the second way. A workaround in this case could be splitting the shorthand and putting each one on its own line; however for us this violates a stylelint rule that forbids longhand properties when a shorthand could be used.

[mjbvz]

Closing as this package has been deprecated in favor of the official styled-components/typescript-styled-plugin fork

After updating to that fork, follow up in the styled-components repo if this is still an issue