Type safety support for properties which has (string & {}) definition

Hi there,

I use a library typestyle which depends on csstype. And I have a next case:

import {style} from 'typestyle';

export const styles = {
  header: style({
    // There are IDE hints, but I'm still able to put any value
    display: 'flexxxxx',
  })
};

It happens because the definition of display looks like:

  export type Display =
    | Globals
    | DataType.DisplayOutside
    | DataType.DisplayInside
    | DataType.DisplayInternal
    | DataType.DisplayLegacy
    | "contents"
    | "list-item"
    | "none"
    | (string & {});

I understand the definition relies on web specifications and that’s absolutely correct. But it doesn’t make sense from a type safety perspective.

Is it possible to solve the issue? Maybe csstype could do two kind of builds - default and type safe?

[frenic]

It’s pretty intense to generate a union for every possible combination for every property of this kind. That’s why literal template types will come in handy.

[frenic]

As soon as I have time to fix it. Soon I hope.

That’s not true. The display property accepts a two-value syntax even though it’s rarely used. That’s why string & {} is generated.