Allow for custom properties to be defined outside a CSS file

Currently if you define custom properties in a single file, like so:

/* example.css */
:root {
  --color-red: red;
  --spacing-large: 16px;
  --ui-font: normal 20px/32px system-ui;
}

.example {
  background-color: var(--color-red);
  padding: var(--spacing-large);
  font: var(--ui-font);
}

You gain the ability to:

• Use them for autocompletion inside the var function,
• On hover get information of their value,
• On click jump to their definition.

This is great but in most circumstance people are not defining their custom properties directly inside a single file. It's more likely that custom properties are defined in another file that gets imported or one that is concatenated by a build step. For example:

/* colors.css */
:root {
  --color-blue: blue;
}

/* example.css  */
@import url('./colors.css');

.example {
  color: var(--color-blue)
}

As of now, you lose out on all those abilities for the custom properties that you gain when defining them in a single file.

This got me thinking about using Custom Data as means to set custom properties.

Currently you can define a custom property using the properties field for Custom Data, but it only gives you the autocompletion when used as a property not a value inside a var.

{
  "version": 1.1,
  "properties": [
    {
      "name": "--color-green",
      "description": "A really cool green color"
    }
  ]
}

/* example.css  */
.example {
  --color-green: ;
  /*^ This will autocomplete just fine */
  color: var(--color-green)
  /*           ^ This does not */
}

What if instead there was a separate customProperties field that let you define the custom properties with their type, value, and description?

{
  "version": 1.2,
  "customProperties": [
    {
      "name": "--color-green",
      "description": "A really cool green color",
      "type": "<color>",
      "value": "#0F0"
    }
  ]
}

And it would be added to the completion list along side any local custom property with the type known.

Start with the linked Custom Data documentation and trace how the existing properties field is represented and used for completion. Define how a customProperties entry supplies its name, type, value, and description to var() completion alongside local custom properties. Done means externally defined properties provide the same completion information as properties declared in CSS.