window.getComputedStyle returns react-style CSSStyleDeclaration?

if i const style = window.getComputedStyle(node) style has type CSSStyleDeclaration which follows react's camelCase formatting. I could cast it to JSX.CSSProperties but JSX.CSSProperties allow for numbers | string while window.getComputedStyle only returns string. what would be the solid way to type this?
9 Replies
lxsmnsyc
lxsmnsyc2y ago
I don't think you can pass it to solid's either given that solid uses the kebab case format
bigmistqke
bigmistqkeOP2y ago
but window.getComputedStyle actually returns kebab-case too right? it just does not return numbers, only strings.
lxsmnsyc
lxsmnsyc2y ago
no, CSSStyleDeclaration is completely different: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration
CSSStyleDeclaration - Web APIs | MDN
The CSSStyleDeclaration interface represents an object that is a CSS declaration block, and exposes style information and various style-related methods and properties.
lxsmnsyc
lxsmnsyc2y ago
although yeah it is partially true
bigmistqke
bigmistqkeOP2y ago
bigmistqke
bigmistqkeOP2y ago
so there is no proper way to type window.getComputedStyle atm? would type CSSStyleDeclarationSolid = {[Property in keyof JSX.CSSProperties]: string} do the trick? wait so all CSSStyleDeclarations are following react's camelCase? that is so so brutal... const element = createElement('div'); element.style["border-width"] = "0px"; gives a type-error?
bigmistqke
bigmistqkeOP2y ago
https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.cssstyledeclaration.html ok I assume this is a typescript-thingy. I am very very very confused about the reasoning behind this choice. that's just superwild to me.
lxsmnsyc
lxsmnsyc2y ago
as mentioned in the link I gave, both kebab and camel cases are supported
bigmistqke
bigmistqkeOP2y ago
Ur correct, didn't notice the Dashed and camel-cased attributes for all supported CSS properties. before. But it seems only the camelCase-versions are covered by typescript... A pity!

Did you find this page helpful?