Bugzilla

If you have the following (invalid) `@property` :

```css
@property --a {
	syntax: '<length>';
	inherits: true;
        /* not computationally independent, because it relies on the value of font-size on the element */
	initial-value: 1em;
}

@property --b {
	syntax: '<length>';
	inherits: true;
        /* not computationally independent, because it relies on the value of a custom property.  */
	initial-value: var(--a);
}

@property --c {
	syntax: '<length>';
	inherits: true;
        /* initial value not matching specified syntax */
	initial-value: red;
}
```

The CSS warning we get in the Console is the same for those 3, and it's: `Ruleset ignored due to bad selector`, which is really not helpful.
Ideally, the warning should indicate the name of the registered property that failed, which of this declaration is not valid and why. So with our 3 cases, something like:

- `@property --a wasn't registered. initial-value is not computationally independent (font size)`
- `@property --b wasn't registered. initial-value can't use var()`
- `@property --c wasn't registered. initial-value does not match specified syntax`

We could also have better errors for other things than initial value:
- `@property --x wasn't registered, missing "syntax/inherits/initial-value" field`

If you have the following (invalid) `@property` :

```css
@property --a {
	syntax: '<length>';
	inherits: true;
        /* not computationally independent, because it relies on the value of font-size on the element */
	initial-value: 1em;
}

@property --b {
	syntax: '<length>';
	inherits: true;
        /* not computationally independent, because it relies on the value of a custom property.  */
	initial-value: var(--a);
}

@property --c {
	syntax: '<length>';
	inherits: true;
        /* initial value not matching specified syntax */
	initial-value: red;
}
```

The CSS warning we get in the Console is the same for those 3, and it's: `Ruleset ignored due to bad selector`, which is really not helpful.
Ideally, the warning should indicate the name of the registered property that failed, which of this declaration is not valid and why. So with our 3 cases, something like:

- `@property --a wasn't registered. initial-value is not computationally independent (font size)`
- `@property --b wasn't registered. initial-value can't use var()`
- `@property --c wasn't registered. initial-value does not match specified syntax`

We could also have better errors for other things than initial value:
- `@property --x wasn't registered, missing "syntax/inherits/initial-value" field`


---


Depending on how we can shape the error message, we could even have the property name in a specific field, so we could consume those in the console, and show the properties that weren't registered in the `@property` section, as well as show the message in the variable tooltip when the non-registered property is used