eslint / eslint/css

Rule Change: validate `@property` descriptors in `no-invalid-at-rules`

Open
#549 1 comment 0 reactions 1 assignee Claimed by @electrohyun View on GitHub
enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.