Microsoft/TypeScript

Error when accessing CSS property value using kebab case in `CSSStyleDeclaration` object

Open

#59,968 opened on Sep 14, 2024

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (6,726 forks)batch import
BugDomain: lib.d.tsHelp Wanted

Repository metrics

Stars
 (48,455 stars)
PR merge metrics
 (Avg merge 6d 17h) (9 merged PRs in 30d)

Description

🔎 Search Terms

"CSS property value kebab case dash", "CSSStyleDeclaration", "getComputedStyle", "getPropertyValue"

🕗 Version & Regression Information

  • This is the behavior in every version I tried, and I reviewed the FAQ for entries about "CSSStyleDeclaration", "getComputedStyle"

⏯ Playground Link

https://www.typescriptlang.org/play/?ts=5.7.0-dev.20240914#code/OYUwLgwg9gtgDgVzCAJgZTATwDYgBQpQDGCMIAdmAHQBGUKmAlANoDkNAhkQNbABOUBORQBaIlGxQ+rALpA

💻 Code

getComputedStyle(document.body)['background-color']

🙁 Actual behavior

TypeScript reports following error:

Element implicitly has an 'any' type because index expression is not of type 'number'.

🙂 Expected behavior

TypeScript should not report any error.

Additional information about the issue

If I update the file node_modules/typescript/lib/lib.dom.d.ts to include background-color as follows:

interface CSSStyleDeclaration {
  // ...
  'background-color': string;
  // ...
}

the error does not occur for background-color property.

Contributor guide

Research direction
Open the lib.dom.d.ts file in the TypeScript repository, locate the CSSStyleDeclaration interface, and add kebab case variants for common CSS properties.
Tech stack
typescript
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
Git
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80