TypeScript-DOM-lib-generator icon indicating copy to clipboard operation
TypeScript-DOM-lib-generator copied to clipboard

CSS Typed OM get property return types

Open ophirbucai opened this issue 1 year ago • 3 comments

Narrow down return type of StylePropertyMapReadOnly.get() to match CSS Types OM specification. Properties now return their specific CSSStyleValue sub classes:

  • CSSUnitValue
  • CSSKeywordValue
  • CSSTransformValue
  • Default: CSSStyleValue

This change provides better type safety and autocompletion when working with computedStyleMap().

Changes:

  • Added specific return types for common CSS properties in StylePropertyMap
  • Maintained backwards compatibility with fallback to CSSStyleValue
  • Included links to MDN documentation

ophirbucai avatar Dec 22 '24 15:12 ophirbucai

Thanks for the PR!

This section of the codebase is owned by @saschanaz - if they write a comment saying "LGTM" then it will be merged.

github-actions[bot] avatar Dec 22 '24 15:12 github-actions[bot]

@microsoft-github-policy-service agree

ophirbucai avatar Dec 22 '24 17:12 ophirbucai

I realized that there are more type definitions such as:

  • CSSImageValue
  • CSSUnparsedValue
  • CSSMathValue I've mapped all the properties listed in MDN and consolidated those into a couple of function overloads.

The process involved:

  1. Querying MDN for all possible properties.
  2. Testing each property with common values to reflect the CSSStyleValue subclasses:
[
    /* Units: */
    '10px', 
    '10%', 
    /* Keywords: */ 
    'auto', 
    'none',
    /* Math: */
    'calc(100% - 20px)',
    /* Style: */
    'rgb(255,0,0)',
    /* Image: */
    'url("test.jpg")',
    /* Transform: */
    'matrix(1, 0, 0, 1, 0, 0)'
]
  1. Grouping properties by their return type combinations.
  2. Adding relevant MDN references for each group

Hope it helps people use computedStyleMap().

ophirbucai avatar Dec 24 '24 02:12 ophirbucai