Added TypeScript types and tests for the emotion package.

package.json

@@ -6,7 +6,8 @@
     "build": "lerna run build --parallel",
     "test:size": "npm-run-all clean rollup:umd size",
     "clean": "lerna run clean --parallel",
-    "test": "npm-run-all -p lint:check coverage test:size && npm run benchmark",
+    "test": "npm-run-all -p lint:check coverage test:size test:typescript && npm run benchmark",
+    "test:typescript": "lerna run test:typescript --parallel",
     "coverage": "jest --coverage --no-cache --ci --runInBand",
     "lint:check": "eslint .",
     "test:watch": "jest --watch --no-cache",

packages/emotion/package.json

@@ -4,6 +4,7 @@
   "description": "The Next Generation of CSS-in-JS.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
+  "types": "typings/emotion.d.ts",
   "files": [
     "src",
     "dist",
@@ -14,6 +15,8 @@
   ],
   "scripts": {
     "build": "npm-run-all clean rollup rollup:umd",
+    "test:typescript": "tsc --noEmit -p typescript_tests/tsconfig.json",
+    "pretest:typescript": "npm run build",
     "clean": "rimraf dist",
     "rollup": "rollup -c ../../rollup.config.js",
     "watch": "rollup -c ../../rollup.config.js --watch",
@@ -28,7 +31,8 @@
     "cross-env": "^5.0.5",
     "npm-run-all": "^4.0.2",
     "rimraf": "^2.6.1",
-    "rollup": "^0.43.0"
+    "rollup": "^0.43.0",
+    "typescript": "^2.0.0"
   },
   "author": "Kye Hohenberger",
   "homepage": "https://emotion.sh",

packages/emotion/typescript_tests/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node"
+  },
+  "include": [
+    "./*.ts",
+    "./*.tsx"
+  ]
+}

packages/emotion/typescript_tests/typescript_tests.ts

@@ -0,0 +1,65 @@
+import {
+  sheet,
+  useStylisPlugin,
+  injectGlobal,
+  flush,
+  css,
+  fontFace,
+  hydrate
+} from '../';
+
+sheet.speedy(true);
+sheet.inject();
+sheet.insert('.foo { font-size: 1 };', 'some source map');
+sheet.flush();
+
+useStylisPlugin(() => {})([() => {}, () => {}])(null);
+
+flush();
+
+const cssObject = {
+  height: 100,
+  width: '100%',
+  display: (true as boolean) && 'block',
+  position: undefined,
+  color: null,
+  ':hover': {
+    display: 'block'
+  }
+};
+
+const className: string = css`
+  ${(true as boolean) && ''}
+  ${'bar'}
+  ${css``}
+  ${1}
+  ${cssObject}
+`;
+
+const className2: string = css(cssObject);
+
+css(() => ({
+  height: 100
+}));
+
+css([
+  { display: 'none' },
+  [
+    { position: false },
+    { width: 100 }
+  ]
+])
+
+css(null);
+
+fontFace`
+  font-family: 'Foo';
+`;
+
+injectGlobal`
+  #foo {
+    font-face: 'Foo';
+  }
+`;
+
+hydrate(['css-123', 'css-456']);

packages/emotion/typings/emotion.d.ts

@@ -0,0 +1,45 @@
+export type Interpolation = string | number | boolean | null | undefined | _Interpolation1 | _Interpolation2 | _Interpolation3;
+
+// HACK: See https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540
+interface _Interpolation1 extends Record<string, Interpolation> {}
+interface _Interpolation2 extends Array<Interpolation> {}
+interface _Interpolation3 {
+  (): Interpolation;
+}
+
+export type CreateStyles<TRet> = ((...values: Interpolation[]) => TRet)
+  & ((strings: TemplateStringsArray, ...vars: Interpolation[]) => TRet);
+
+export interface StylisUse {
+  // TODO: Make this more precise than just Function
+  (plugin: Function | Function[] | null): StylisUse;
+}
+
+export interface StyleSheet {
+  inject(): void;
+  speedy(bool: boolean): void;
+  insert(rule: string, sourceMap: string): void;
+  flush(): void;
+}
+
+export const sheet: StyleSheet;
+
+export const useStylisPlugin: StylisUse;
+
+export const inserted: Record<string, boolean | undefined>;
+
+export const registered: Record<string, string | undefined>;
+
+export function flush(): void;
+
+export const css: CreateStyles<string>;
+
+export const injectGlobal: CreateStyles<void>;
+
+export const keyframes: CreateStyles<string>;
+
+export const fontFace: CreateStyles<void>;
+
+export function getRegisteredStyles(registeredStyles: string[], classNames: string): string;
+
+export function hydrate(ids: string[]): void;