Allow CSS var function to inject custom properties values

[Sathish kumar]

Currently CSS properties do not accept var function to inject values from custom properties. As a workaround we are using the template literal type and create new type. I'm aware of the workaround for type error but can this be supported natively.

import * as CSS from 'csstype';

type GlobalsWithVars = `var(--${string})` | `var(--${string}, ${string | number})`;

// css variable should be applied to all css properties
type CSSPropertiesWithVar<T extends CSS.Properties = CSS.Properties> = {
    [P in keyof T]: T[P] | GlobalsWithVar
}

const style: CSSPropertiesWithVar = {
   fontWeight: 'var(--font-weight)'
}

[Fredrik Nicol]

Good idea! 👌 Thanks

[Joris W]

Would you recommend libraries that use csstype to work around this until the assigned milestone comes around? Could FontWeight be changed to take arbitrary strings in the meantime?

[Kyle Holmberg]

I was curious if anybody has a workaround in terms of declaration merging.

I ended up with:

import type * as CSS from 'csstype';

declare type LiteralUnion<T extends TPrimitive, TPrimitive = string> = T | (TPrimitive & {});

declare module 'csstype' {
  interface StandardLonghandProperties<TLength = LiteralUnion<string> | 0, TTime = LiteralUnion<string>>
    extends CSS.StandardLonghandProperties<TLength, TTime> {
    [propertyName: string]: `var(--${string})`;
  }
}

but it's not working :(