Breaking changes in v10.5.6 - custom css attributes are per type definition not longer allowed

[simonwep]

Reproduction

Any custom style property will now raise an error, example:

const element = <div style={{
    '--progress': '0.5'
}}/>

will result in

error TS2322: Type '{ '--progress': number; }' is not assignable to type 'string | CSSProperties | undefined'.
  Object literal may only specify known properties, and ''--progress'' does not exist in type 'CSSProperties'.

2               style={{'--progress': progress}} 

This was introduced in #1797 as style is no longer { [key: string]: string | number } and released in v10.5.6.

My environment:

OS: Windows 10 Enterprise
Preact: v10.5.7

I hope it's ok that I left out a CodeSandbox example, the problem is clearly visible and broken down to its source.

Steps to reproduce

See reproduction.

Expected Behavior

It should be possible to use custom css properties. Yes, it does improve the auto-complete function as we now have types for the style property but using custom attributes is now broken or the given object needs to be casted.

Actual Behavior

It is giving me an error because of:

interface HTMLAttributes<RefType extends EventTarget = EventTarget>
    extends preact.ClassAttributes<RefType>,
        DOMAttributes<RefType> {
        // Standard HTML Attributes
        ...
        style?: string | CSSProperties; // Breaks custom attributes :(

[developit]

I opened a PR to re-loosen these types for now. We can inherit the correct types from TypeScript's dom.d.ts, but there is unfortunately no way to exempt --custom properties from validation, so we have to use a generic Record<string,string|number|null|undefined> for now.

[bz2]

The argument in frenic/csstype#63 (comment) is that custom properties should not be untyped, but included in the type in such a way that end users can specify them explicitly. How practical that is I'm not completely sure.