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

[carpben]

• emotion version: 9.2.12
• react version: 16.6

Relevant code.
In a typescript .tsx file

const Box = styled("div")`
   label: switch-row; 
   display: flex; 
   justify-content: space-between; 
   align-items: center; 
   margin: 0  0 15px;  
`

It compiles well and works well. But Visual Studio Code complains. There is a green line under label with the following message: "[ts-styled-plugin] Unknown property: 'label'"

[Ailrun]

Thank you for reporting the issue!
However, IMO, the issue is about ts-styled-plugin, not about emotion.
We cannot fix how ts-styled-plugin works.
Could you make an issue on their repo instead of ours?

[carpben]

Of course. Thanks.

[lettertwo]

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

[robinmetral]

Hi @lettertwo, this doesn't fix it for me, do you have anything else in your tsconfig.json?

My project doesn't actually use typescript so I had to create this file.

[hatton]

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]

@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.

[Rocamonde]

@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.

[robinmetral]

@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.

[Rocamonde]

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

[kevinchou-pge]

It appears the input property max-length also has the same issue.

[talentlessguy]

Same with text-underline-offset