Added TypeScript types and tests for the emotion package.

[cameron-martin]

What:
Added TypeScript types for the emotion package.

Why:
Because users of TypeScript will want these.

How:

• Added a d.ts file with a "types" field in the package.json pointing to it.
• Added a .ts file which acts as tests. These are run by just testing that this file type checks using tsc --noEmit.

Checklist:

• Documentation - N/A.
• Tests
• Code complete

Comments:

• These are just for the emotion package, and not for the react-emotion package. The main thing that is blocking me from implementing the typings for react-emotion is getting the declaration merging working correctly for adding the css prop to all elements. I will send a PR if I get these to work.
• I've never used lerna before, so I'm not sure if the dependencies are in the correct place (at top level vs in the individual packages).
• The tests don't fully cover the TypeScript definitions, but some of the functions I have never used so I don't feel comfortable blindly writing tests for things that I don't know what are used for.
• A PR already exists for this (WIP: Add typescript typings #37), but this seems to be quite outdated.
• This only tests against the latest version of TypeScript. Potentially the package called test-all-versions could be used to test against multiple versions.
• Any other issues/comments, just shout.

[cameron-martin]

I have added using object literals in the form:

css({
  height: 100,
  width: '100%',
  ':hover': {
    display: 'block'
  }
});

and

const cssObject = {
  height: 100,
  width: '100%',
  ':hover': {
    display: 'block'
  }
};

css`
  font-size: 2rem;
  ${cssObject}
`;

to the definitions.

[cameron-martin]

Ah I must also add arrays of CSS objects. Is there anything else that I've missed?

[tkh44]

@cameron-martin The value of the expression can be a function. #381 (comment)

I just want to make sure you had that one as well.

[cameron-martin]

Ah yeah thanks. I'm guessing only zero-arity functions? I also missed arrays and calling the css function directly with null as well.

Are the same types valid for interpolations, calling the css function directly with, as values in arrays, and as object values?

[cameron-martin]

Also, what is the meaning of true as an object value, as in https://github.com/emotion-js/emotion/blob/master/packages/emotion/test/css.test.js#L45?

[emmatown]

@cameron-martin

Are the same types valid for interpolations, calling the css function directly with, as values in arrays, and as object values?

Yep

Also, what is the meaning of true as an object value, as in https://github.com/emotion-js/emotion/blob/master/packages/emotion/test/css.test.js#L45?

That's just a test to make sure that properties with boolean values get removed.

[cameron-martin]

I updated them, hopefully they are correct now.

[emmatown]

This export doesn't exist anymore, I'm guessing this is from the other TypeScript PR?

[cameron-martin]

I think so, I removed it.

[emmatown]

I'm not familiar with TypeScript but I think this means that it can only have something as the first argument. createStyles accepts an arbitrary length of arguments, so maybe something like this?

(...values: Interpolation[])

[cameron-martin]

Fixed.

[tkh44]

Ah yeah thanks. I'm guessing only zero-arity functions?

In css calls are zero arity.

In styled calls the call recieves props and context arguments.

[tkh44]

Are you ready to merge this @cameron-martin? I wasn't sure if you wanted to add anything else.

[cameron-martin]

Yeah I'm ready. Seems good to me and I'll send types for react-emotion separately :)

[tkh44]

Thanks!