Add aspect-ratio as default valid property

[karlhorky]

Hi, thanks for this repo 🙌 (and all of the other packages and projects that make up the Microsoft developer tooling ecosystem). Really amazing.

A quick PR to avoid the problem that aspect-ratio is not recognized as a valid property via typescript-styled-plugin and vscode-styled-components:

Coming over from:

• https://github.com/microsoft/typescript-styled-plugin/issues/58
• https://github.com/styled-components/vscode-styled-components/issues/190

aspect-ratio docs: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

cc @mjbvz @aeschli

[karlhorky]

Or should this be updated over in microsoft/vscode-custom-data/web-data, eg here?

https://github.com/microsoft/vscode-custom-data/blob/main/web-data/css/css-schema.xml

Seems like this file is being used to generate data for...something here:

https://github.com/microsoft/vscode-custom-data/blob/fce2045d6f693c12bf0848ec3602fc433f70d7da/web-data/css/generateData.js#L327-L369

cc @addiment

[addiment]

I'm no expert here (I hardly understand VS Code's architecture, I just happened to have a similar-ish problem once) but I think(?) that vscode-custom-data is the right place. This is with React, so maybe it's a little different, but I think you're on the right track.

[aeschli]

Yes, the update has to happen in https://github.com/microsoft/vscode-custom-data. In fact the latest version (@vscode/web-custom-data@0.4.4)there has aspect-ratio, so all we need it to adopt it..

(Run npm run update-data)

[karlhorky]

In fact the latest version (@vscode/web-custom-data@0.4.4)there has aspect-ratio, so all we need it to adopt it..

Oh that's great! So this npm run update-data needs to be run in microsoft/vscode-css-languageservice, and then the result committed 👍

[aeschli]

https://github.com/microsoft/vscode-css-languageservice/pull/319 updated all dependencies, including vscode-custom-data

[karlhorky]

Amazing, thanks so much @aeschli ! 🙌

[karlhorky]

Copying part of my comment in styled-components/typescript-styled-plugin 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".