Allow for custom properties to be defined outside a CSS file

[philipbordallo]

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.

[DavidSouther]

Your customProperties proposal is interesting for @Property & custom properties defined in JS. The base case of "better recognize custom props from other files" is also discussed in #156