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

Open
#549 1 comment 0 reactions 1 assignee View on GitHub

@electrohyun is already working on this.

Since Aug 30, 2026.

Assessment

This issue has not been assessed yet.

Description

enhancement
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
@property --size {
	syntax: "<length>";
	inherits: false;
	initial-value: red;
}

@property --theme {
	syntax: "<not-a-type-name>";
	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. "<length>" 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 <length>.
Second example

The rule handles it as follows:

  1. "<not-a-type-name>" 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 <length>.

The second example will report "<not-a-type-name>" because that type does not exist.

The rule should not report missing descriptors. In the current specification, 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:

@property --anything {
	initial-value: red;
}

@property --size {
	syntax: "<length>";
}
Participation
  • I am willing to submit a pull request to implement this change.
AI acknowledgment
  • I did not use AI to generate this issue report.
  • (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 checks the syntax definition inside the string.
  2. Biome noInvalidPropertyInitValue checks whether initial-value matches syntax.

Disclosure: I'm a participant of open source contribution program OSSCA

Dominant language
JavaScript
Stars
308
Forks
44
Avg merge
2d 6h
Merged PRs (30d)
18

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from eslint/css

All issues in eslint/css

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.