Skip to content

Change Request: Preserve the original casing of selectors in no-duplicate-keyframe-selectors error messages #562

Description

@KumJungMin

Environment

ESLint version: 10.8.0
@eslint/css version: ^2.0.0
Node version: v22.18.0
npm version: v10.9.3
Operating System: darwin 24.6.0

What problem do you want to solve?

  • no-duplicate-keyframe-selectors correctly detects duplicate selectors regardless of casing, but its error messages display the selector in lowercase rather than as written.
/* eslint css/no-duplicate-keyframe-selectors: "error" */

@keyframes test {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
  TO {
    opacity: 2;
  }
}
  • The current error message is:
Unexpected duplicate selector 'to' found within keyframe block.
  • The error location points to TO, but the message displays to.
  • Preserving the reported selector’s original casing could make it easier to match the message to the code.
  • The same plugin’s prefer-logical-properties rule preserves the original casing in the following examples: StackBlitz reproduction.
/* eslint css/prefer-logical-properties: "error" */

.example {
  MARGIN-LEFT: 16PX;
  text-align: RIGHT;
}
Expected logical property 'margin-inline-start' instead of 'MARGIN-LEFT'.
Expected logical value 'end' instead of 'RIGHT'.

What do you think is the correct solution?

  • I’d suggest keeping the value used for duplicate detection separate from the value displayed in the error message, so the message preserves the reported selector’s original casing.
  • The expected message for the example above would be:
Unexpected duplicate selector 'TO' found within keyframe block.

Participation

  • I am willing to submit a pull request for 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

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

  • Status
    Needs Triage

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions