IntelliSense for new CSS property names and values

[mahdi-sheibak]

hi I'm using styled components in react native

tsconfig.json

"plugins": [
      {
        "name": "typescript-styled-plugin",
        "lint": {
          "validProperties": [
            "aspect-ratio",
            "elevation",
            "margin-vertical",
            "margin-horizontal",
            "padding-horizontal",
            "padding-vertical",
            "resize-mode",
            "shadow-color",
            "shadow-opacity",
            "shadow-offset",
            "shadow-radius",
            "text-align-vertical",
            "tint-color"
          ]
        }
      }
    ]

but not give me IntelliSense code for new specific properties

example:
aspect-ratio
elevation
margin-vertical
margin-horizontal
padding-horizontal
padding-vertical
resize-mode
shadow-color
shadow-opacity
shadow-offset
shadow-radius
text-align-vertical
tint-color

[karlhorky]

Seems like at least some of these would be resolved by running npm run update-data in vscode-css-languageservice, as mentioned here:

• Add aspect-ratio as default valid property vscode-css-languageservice#317 (comment)

[karlhorky]

Now that microsoft/vscode-css-languageservice#319 is merged, maybe this new version 6.2.1 will trickle in to typescript-styled-plugin at some point!

Edit: Oh, it seems like vscode-css-languageservice is stuck on an old version, can this be updated?

typescript-styled-plugin/package.json

Line 24 in 4f6ad2a

"vscode-css-languageservice": "^5.1.4",

cc @mjbvz @jasonwilliams

[jasonwilliams]

@karlhorky are you on the styled components discord? Could you ping me there if so

[jasonwilliams]

So basically this repo isn't maintained by Microsoft anymore and needs to be forked and moved into the @styled organization. We should also update the dependencies while we're at it.

I don't have much time these days and don't know when i would get around to doing it. But that is the task.
As there's many issues cropping up about this issue I will try to see what I can do.

Once done i will need some people to test the changes have worked. I will also try to link this issue once we've migrated

[karlhorky]

Ok great, are @probablyup or other Styled Components maintainers available to help with any of this migration? Maybe even Emotion maintainers like @emmatown or @Andarist would be able to lend a hand, since this tooling also directly benefits Emotion users.

I can probably devote a bit of time to testing extension updates 👍

[jasonwilliams]

2 things..

1. There's a pre-release version here https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components 1.7.6. This uses the latest version of css language server. However, i don't know if all of those properties will work. I didn't have them working when using the latest version.
2. Please feedback in https://github.com/styled-components/typescript-styled-plugin as this has now been forked and used in 1.7.6

[karlhorky]

Ok, I'll test this, and reply with my feedback in this PR (at least this looks like the correct place 🤔):

• update and fork styled-components/typescript-styled-plugin#2

[karlhorky]

Just copying part of my comment over here for visibility:

Seems like this is actually fixed in the normal release version of styled-components.vscode-styled-components@1.7.5 already, when using VS Code 1.74.0 (the error + warning below is actually a real typo, just to test that the error checking is working):

[karlhorky]

Ran into the problem with a different CSS property just now - accent-color doesn't appear to work, in either the normal styled-components.vscode-styled-components@1.7.5 Release version or the styled-components.vscode-styled-components@1.7.6 Pre-Release version (see below).

Maybe the property is too new and not yet in the vscode-css-languageservice data?

The error message is "Unknown property: 'accent-color".

[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