emotion: TS Styled Plugin doesn't recognize the label property as legitimate

In case it is useful for anyone else googling their way through this and other closed issues, there is now a way to get ts-styled-plugin to accept the label property:

in tsconfig.json:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-styled-plugin",
        "lint": {
          "validProperties": "label"
        }
      }
    ]
  }
}

Discovered in https://github.com/Microsoft/typescript-styled-plugin/issues/58#issuecomment-444733368

https://github.com/microsoft/typescript-styled-plugin was archived, I don’t know if due to this reason, It has not been working lint validProperties. I tried to install an older version and it still didn’t work, so I’ll probably have to live with that warning.

I think I figured it out:

Inside the tsconfig.json instead of:

 "plugins": [
    {
      "name": "typescript-styled-plugin",
      "lint": {
        "validProperties": ["label"]
      }
    }
  ]

Try to use

 "plugins": [
    {
      "name": "@styled/typescript-styled-plugin",
      "lint": {
        "validProperties": ["label"]
      }
    }
  ]

For me, it worked this way!

@hatton you’re right, according to the plugin’s README, validProperties takes an array.

However this still didn’t fix it for us, probably because our project doesn’t use Typescript (yet 😛).

I found the fix, at least for VS Code. Instead of a tsconfig.json file, I added a jsconfig.json at the root of the project:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-styled-plugin",
        "lint": {
          "validProperties": ["label"]
        }
      }
    ]
  },
  "include": ["src/**/*"]
}

After restarting VS Code (to trigger a new linting), the warning disappeared.

this doesn’t fix it for me, do you have anything else in your tsconfig.json?

I found I had to give it an array:

"validProperties": ["label"]

(and then reload my vscode window).

@robinmetral tsconfig.json is a configuration file for the TypeScript runtime/compiler. If you are not using TypeScript, this file will obviously have no effect in your runtime.

@dylancagnotti wow… I finally resolve this. Thanks!

@robinmetral my apologies. I didn’t know that the plugin also worked for JS files — thought it was TypeScript only.

@Rocamonde in this case tsconfig.json has nothing to do with compiling. We’re just using it to pass custom linting rules to the ts-styled-plugin dependency of Emotion.

And as explained here:

`jsconfig.json` is `tsconfig.json` with `"allowJs"` attribute set to true.

So tsconfig.json for JS projects obviously doesn’t compile the code, but it does have an effect on linting, which is what this issue is about.