Rule Change: validate `@property` descriptors in `no-invalid-at-rules`
- Dominant language
- JavaScript
- Stars
- 308
- Forks
- 44
- Avg merge
- 2d 6h
- Merged PRs (30d)
- 18
Description
### What rule do you want to change?
`no-invalid-at-rules`
### What change do you want to make?
Generate more warnings
### How do you think the change should be implemented?
A new default behavior
### Example code
```css
@property --size {
syntax: "";
inherits: false;
initial-value: red;
}
@property --theme {
syntax: "";
inherits: false;
initial-value: red;
}
```
### What does the rule currently do for this code?
The rule does not report either example.
### First example
The rule checks each value separately:
1. `""` is a string, so `syntax` passes.
2. `red` is a CSS value, so `initial-value` passes.
3. The rule does not check whether `red` matches ``.
### Second example
The rule handles it as follows:
1. `""` is a string, so `syntax` passes.
2. The rule does not check the syntax definition inside the string.
### What will the rule do after it's changed?
The rule will perform two additional checks.
1. Check whether the value inside `syntax` is a valid registered custom property syntax definition.
2. Check whether a specified `initial-value` matches that syntax.
The first example will report `red` because a color does not match ``.
The second example will report `""` because that type does not exist.
The rule should not report missing descriptors. In the [current specification](https://drafts.css-houdini.org/css-properties-values-api-1/#at-property-rule), all `@property` descriptors are optional:
- `syntax` defaults to `"*"`.
- `inherits` defaults to `true`.
- `initial-value` defaults to the guaranteed-invalid value.
These examples should remain valid:
```css
@property --anything {
initial-value: red;
}
@property --size {
syntax: "";
}
```
### Participation
- [x] I am willing to submit a pull request to implement this change.
### AI acknowledgment
- [ ] I did not use AI to generate this issue report.
- [x] (If the above is not checked) I have reviewed the AI-generated content before submitting.
### Additional comments
There are existing implementations.
1. Stylelint [`syntax-string-no-invalid`](https://stylelint.io/user-guide/rules/syntax-string-no-invalid/) checks the syntax definition inside the string.
2. Biome [`noInvalidPropertyInitValue`](https://biomejs.dev/linter/rules/no-invalid-property-init-value/) checks whether `initial-value` matches `syntax`.
Disclosure: I'm a participant of [open source contribution program OSSCA](https://github.com/eslint-ossca)
Contributor guide
Assessment
This issue has not been assessed yet.