BoxShadow does not support TLength generic

In many CSS-in-JS solutions the following declaration of box-shadow is allowed:

boxShadow: [5, 5, 10, '#000']

For example we’re using custom generics to support such values. However CSS.Property.BoxShadow does not come with support for generics, so it’ll ignore the passed TLength type property.

[frenic]

This would solve that:

type ValueTypes = string | number | boolean | (string | number | boolean)[];

type CustomProperyNames = 'boxShadow';

type CustomProperties = {
  [property in keyof Pick<CSS.PropertiesFallback, CustomProperyNames>]: CSS.PropertiesFallback[property] | ValueTypes;
};

interface Props extends Omit<CSS.PropertiesFallback<ValueTypes>, keyof CustomProperties>, CustomProperties {}

const style: Props = {
  boxShadow: [1, 2, 3, '#000'], // OK 👌
};

[frenic]

Thanks for offering a donation but this one’s on me 🙂 Happy it worked!