`ts-styled-plugin` error on valid syntax with 2 interpolation strings

The error occurs in this code in a css prop:

${this.props.whichSide}: ${this.state.isActive ? 0 : '-90vw' };

It looks kinda weird, but it’s for a sidebar component that can be either left or right (this.props.whichSide). This code works and results in left/right: 0/-90vw; to conditionally activate/deactivate the sidebar on the left/right.

The only problem is that the vscode plugin gives an error on the first $ sign: } expected ts-styled-plugin(9999) and later on closing the css prop with `}>: at-rule or selector expected ts-styled-plugin(9999)

There seem to be a plethora of issues with similar, rather uncommon use cases of string interpolation. Many also in the typescript plugin (which, as I understand it, is used by this plugin):
microsoft/typescript-styled-plugin#71, microsoft/typescript-styled-plugin#74, microsoft/typescript-styled-plugin#88 and microsoft/typescript-styled-plugin#89. (I’m not using typescript, so I don’t understand why I’m getting the typescript ts-styled-plugin error.)

Is this being addressed? Even a stopgap solution like an // eslint-disable-next-line would be helpful, does that exist?

[ricardobossan]

https://gitmemory.com/issue/microsoft/typescript-styled-plugin/100/572014717 this solved it for me.

[sumbad]

@breadadams, unfortunately, a set of curly brackets doesn’t fix the error. Additionally, I’ve gotten a new error:

I use lit-html.