Allow contributions of custom CSS properties to CSS extension

[octref]

The motivation is that today, css Language Service would suggest that you have invalid properties.

microsoft/vscode-css-languageservice#68

Although by adopting MDN data we should solve the problem, however if new properties come up CSS LS can still fall behind.

We should provide a config [css/less/scss].validate.acceptedProperties or something similar that stops CSS LS from complaining about "unknown property".

[octref]

@aeschli Actually today we already have a config css.lint.unknownProperties, you can set it to ignore to suppress this error. Can you link to original issues that describe the issue?

[usernamehw]

Isn't this setting ignores all properties? For instance, this will pass:

body {
    teapot: yes;
}

[octref]

@usernamehw My worry is that we are offering too much surface area for linting settings, when all we offer is a subset of https://github.com/CSSLint/csslint and now we are forking with some more options...

When we have MDN data for properties it'll actually solve all three existing "unknown properties" issues:

• overscroll-behavior: [css] Unknown property: 'overscroll-behavior' #46866
• font-display: [css] Add support for 'font-display' CSS property #46423
• backdrop-filter: [css] add backdrop-filter (experimental) #27204

[usernamehw]

Then this issue is not really needed.

[octref]

Yea looking for @aeschli’s input

[aeschli]

@octref yes, you can use "less.lint.unknownProperties" to turn off all validation warnings.
But the idea is to just be able to pass a list accepted properties, so you can still get validation for all others.
You still want to get a warning when there's a typo in the name. But you want to get rid of that error on 'appearance' that is not yet a standardized property but well understood by your cssnext post-processor. Given that post-processors become more and more common, custom properties getting more used to.

[octref]

@aeschli The MDN data contains experimental properties such as appearance. CSSNext only implements what's already in Recommendation Candidate, by which point MDN would already have a data point on it.

I suggest that we pull in the MDN data, see if that addresses people's complaint

Given that post-processors become more and more common, custom properties getting more used to.

If the need arises we can always add that. But I think if someone is using a property not known on MDN (as compared to now known on our outdated css-schema), it's fair we output a warning.

[shockthetoast]

Would it be possible to fix the type in the title of this issue? As it is, it doesn't show up in a search for "unknown property". It would help those of us searching for this exact issue know it is being worked on. Thanks!

[octref]

@shockthetoast Done, thanks!

[octref]

This is no longer an issue — using latest data from MDN so we don't have "unknown properties" any more.

[carlosrovira]

Hi, I'm searching for a way to add custom properties to css.lint, since in our project (Apache Royale) we have custom properties related only to our project, since I'm using VSCode, I'd love to have some way to add custom properties and even create some extension for it. Thanks for any advice on this.

[aeschli]

I also think we should have this for custom properties.

[carlosrovira]

Great,

I think so, since CSS is open its capabilities and used in many new ways that can't be controlled.
Here's a screenshot of a typical Apache Royale use case:

I expect that we can remove the css lint error configuring in some way a config file. Even add this config file to extensions like AS3 & MXML Extension that already manages Apache Royale projects so we can catch error typing this kind of custom css properties.

Thanks!

[connorshea]

I think this'd be where the custom properties would be injected?: https://github.com/Microsoft/vscode-css-languageservice/blob/5d43b341a3b149bcabc3e178ada73ef0b876f2f3/src/services/languageFacts.ts#L777

[connorshea]

So I've gotten a decent way through making this work, but I can't figure out the correct way to pass the custom property configuration into the place it's needed.

I see this line elsewhere in the vscode-css-languageservice repo, but I can't figure out how to pass a settings object to the languageFacts.ts file in a similar way.

The docs say to use vscode.workspace.getConfiguration('myExtension'), but I can't get the vscode module imported into the vscode-css-languageservice extension for whatever reason. I just end up with Cannot find module 'vscode'. (this is after adding vscode as a dependency in the package.json, installing, and restarting).

I suppose it's also important to note that I added the configuration to the package.json for vscode/extensions/css-language-features, rather than vscode-css-languageservice, because all other existing configuration options were there already.

Any guidance on how I should pass the user's configuration into vscode-languageservice's languageFacts.ts? I can share my current code if that'd help.

[carlosrovira]

Hi connor, thanks for working on this. Just to understand the progress. Are you implementing some kind of property file where we can add the custom css properties we want to be recognized by vscode lint, and get rid of lint errors? (event get code-intelligence for those custom properties defined in that property file? Thanks!

[connorshea]

@carlosrovira Right now it's a WIP so it's hard-coded until I can figure out how to pass the configuration into it, but it looks like this:

Currently the description isn't able to be customized, it's just set as "Custom property", but that can probably be changed relatively easily if you'd really like to be able to do that.

The properties would be defined in a VS Code settings.json file, which could be user-specific or workspace-specific (e.g. you'd have a file at .vscode/settings.json and it defines various custom properties you use in that project), like this:

{
  "css.customProperties": [
    "custom-property-name",
    "another-custom-property",
    "custom-property-three"
  ]
}

[octref]

@connorshea It would be better start working after discussing with me or @aeschli. I don't think we'll go with that approach (more likely going with the direction of the Markdown Extension API https://code.visualstudio.com/docs/extensionAPI/api-markdown), specify a JSON format and add contribution points.

This issue is only for adding a setting to make VS Code not complain about unknown properties.

[carlosrovira]

Hi @octref,
as a user; right is to make VS Code not complain about unknown properties, but as well, providing code-intelligence of the custom properties will be a huge plus and will make this very usable for the community.

Thanks.

[connorshea]

@octref

@connorshea It would be better start working after discussing with me or aeschli.

Fair enough, that's my bad :)

This issue is only for adding a setting to make VS Code not complain about unknown properties.

A setting to make VS Code not complain about unknown properties already exists as you mentioned above ("css.lint.unknownProperties": "ignore"), the issue description does mention a [css/less/scss].validate.acceptedProperties setting, though, which is what I was trying to implement.

Also, just to clarify, a "CSS Extension API" would be preferable because it would allow extensions to add CSS properties, or am I missing other reasons?

[octref]

Oops, the title tricked me, updated.

Also, just to clarify, a "CSS Extension API" would be preferable because it would allow extensions to add CSS properties, or am I missing other reasons?

As compared to saving everything in the project config, I think putting all the custom CSS property definitions in a JSON and allow a setting/contribution to refer to it would be better. This keeps clutter away from workspace config and allows others to auto-generate the JSON file.

[aeschli]

@octref I'm not against allowing users to define sets of properties in a separate file, but IMO a simple user setting is a good start/ The css language service doesn't deal with files anyways, it's just a library, also to be used in Monaco. All validation configuration comes in through config objects, so LanguageSettings is the right place.
Where this gets relevant is in the server that uses the service. Let's discuss how we proceed once we are there.

@Connormiha The validation happens here:
https://github.com/Microsoft/vscode-css-languageservice/blob/83462f41b87303ffc32b58b714a18806da389182/src/services/lint.ts#L413

Here you would say, only report error of not a known property or not in the list.

[carlosrovira]

Also, just to clarify, a "CSS Extension API" would be preferable because it would allow extensions to add CSS properties, or am I missing other reasons?

I expect the AS3 & MXML(http://as3mxml.com/) extension could add a file so we have our custom properties manages directly by the extension that provide all the language support.

Thanks

[aeschli]

I added a new setting that allows specifying 'valid' properties that are not verified.

fixed by microsoft/vscode-css-languageservice@e0a7d58

[octref]

FYI: #64164