microsoft/typescript-styled-plugin

ts-styled-plugin(9999)

JohnathanHuggett opened this issue · 6 comments

Im seeing this error whenever I try to interpolate a css property.

Screen Shot 2021-08-24 at 12 33 16 PM
Screen Shot 2021-08-24 at 12 33 35 PM

I have same problem

Assuming you use vscode, try pressing ctrl+shift+p and then running the TypeScript: Restart TS Server command.
Seems to work for me.

Same problem. Restarting TS Server didn't help.

I solved it by creating the jconfig.json inside the root of my project and adding:

if your project is in Typescript then create tsconfig.json*

{
"compilerOptions": {
"plugins": [
{
"name": "typescript-styled-plugin",
"lint": {
"validProperties": [
"margin-vertical",
"margin-horizontal",
"padding-vertical",
"padding-horizontal",
"shadow-color",
"shadow-opacity",
"shadow-radius",
"elevation"
]
}
}
]
}
}

The CTRL + SHIFT + p and "Restart TS Server" solution might seem to solve this, but it doesn't really (or at least it didn't for me). All the errors disappeared the moment I did it ... but that was just because the TS server was restarting. When it finally finished restarting, the errors were back.

@Justin9606 is there some equivalent directive for CSS values? I'm getting this issue from this line of styled CSS:

 display: inline-block;

So whitelisting the property name won't help.

P.S. And it should go without saying (and yet this bug has been ignored for over a year, so I feel the need to say it) that developers should not have to copy every hyphenated property name and value into their jsconfig.json file just to be able to use the plugin :)

mjbvz commented

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