Custom Properties contribution for CSS

[octref]

Related: #47775

Problem

• PostCSS has plugins like postcss-size and postcss-circle that adds custom, non-standard properties

• People working on large code bases often have their own variant of CSS, for example: Allow contributions of custom CSS properties to CSS extension #47775 (comment)

• unknownProperties suppress diagnostic warnings, but do not provide other Language Features

  

• In CSS Language Service, we are adding more and more data from MDN. We would hope the data can be loaded separately from the app. For example:

  • createCSSLS({ propertySets: [standardProperties] }) creates a normal CSS LS
  • createCSSLS({ propertySets: [standardProperties, postcssProperties] }) creates a CSS LS that supports postcssProperties.

Solution

• December: Similar to HTML custom tags/attributes support, we'll add css.experimental.custom.properties as a setting that allows loading extra properties through JSON
• Planned Language Features for custom properties:
  • Completion for property / property-value
  • Hover information that shows property documentation
  • CodeAction that fixes properties typo
• Engage with PostCSS community and other parties that need custom contributions to CSS, and look for further improvements:
  • Allow contributes.css.custom.properties as Extension Contribution
  • Allow at-rule contribution