Check out how flow and typescript types from csstype can be used

[kof]

@frenic did a generated types from MDN, now we should check it out and see what it needs to have a seemless integration for jss, react-jss, styled-jss

https://github.com/frenic/csstype

[HenriBeck]

I did some testing, and I think we are going to have to go a manual way with the type definitions.

Reason: We currently support many plugins which result in vastly different syntax, which means we have to find a way to compose types. Because rules are simple objects, I tried the following two cases:

Approach 1:

type Test1 = {composes?: string};
type Test2 = {[key: string]: number}

const r: {...Test2, ...Test1} = {
  composes: 1,
};

This approach leads to no errors because the types are somehow merged. composes can be a string or number in this case, which makes it not ideal.

Approach 2:

type Test1 = {composes?: string};
type Test2 = {[key: string]: number}

const r: Test2 & Test1 = {
  composes: 1,
};

This approach leads to an error no matter what value composes has. Either it complains that it's not a number or not a string.

Solution:

type Test = {
composes?: string,
[key: string]: number,
};
const r: Test = {
  composes: 1,
};

The above code is the only way flow complains correctly. This means we would have to either have type which has all of the syntaxes provided by the plugin or the user would have to manually copy the types for his setup.