Skip to content

CSS Typed OM get property return types #1864

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

ophirbucai
Copy link

@ophirbucai ophirbucai commented Dec 22, 2024

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

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

Tests:
- `hereby runtests` completed successfully in the TypeScript repo
Copy link
Contributor

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.

@ophirbucai ophirbucai changed the title feat(lib.dom): Improve CSS Typed OM property return types Feature: Improve CSS Typed OM property return types Dec 22, 2024
@ophirbucai
Copy link
Author

@microsoft-github-policy-service agree

@ophirbucai ophirbucai changed the title Feature: Improve CSS Typed OM property return types CSS Typed OM get property return types (#1863) Dec 22, 2024
@ophirbucai ophirbucai changed the title CSS Typed OM get property return types (#1863) CSS Typed OM get property return types Dec 22, 2024
CSSUnparsedValue for custom properties --*
CSSMathValue for properties accepting calc()
CSSImageValue for properties accepting url()
Separate properties by their return values
MDN references for each overloaded function definition
@ophirbucai
Copy link
Author

ophirbucai commented Dec 24, 2024

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().

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant