Fix typing for emotion package (#667)

**What**: Fix typing for emotion package

**Why**: Original typing does not support autocompletion, and have redundant types after create-emotion is typed.

**How**: Using create-emotion typing

**Checklist**:
<!-- add "N/A" to the end of each line that's irrelevant to your changes -->
<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
- [N/A] Documentation
- [x] Tests
- [x] Code complete

packages/emotion/package.json

@@ -27,7 +27,7 @@
     "babel-cli": "^6.24.1",
     "babel-plugin-transform-define": "^1.3.0",
     "cross-env": "^5.0.5",
-    "dtslint": "^0.2.0",
+    "dtslint": "^0.3.0",
     "npm-run-all": "^4.0.2",
     "rimraf": "^2.6.1",
     "rollup": "^0.51.3"

packages/emotion/types/index.d.ts

@@ -1,45 +1,20 @@
-// TypeScript Version: 2.2
-export type Interpolation = string | number | boolean | null | undefined | _Interpolation1 | _Interpolation2 | (() => Interpolation);
-
-// HACK: See https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540
-export interface _Interpolation1 extends Record<string, Interpolation> {}
-export interface _Interpolation2 extends Array<Interpolation> {}
-
-export type CreateStyles<TRet> = ((...values: Interpolation[]) => TRet)
-  & ((strings: TemplateStringsArray, ...vars: Interpolation[]) => TRet);
-
-// TODO: Make this more precise than just Function
-// tslint:disable-next-line:ban-types
-export type StylisUse = (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 function getRegisteredStyles(registeredStyles: string[], classNames: string): string;
-
-export function cx(...interpolations: Interpolation[]): string;
-
-export function hydrate(ids: string[]): void;
+// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
+// TypeScript Version: 2.3
+
+import { Emotion, Interpolation } from 'create-emotion';
+
+export { Interpolation };
+
+export const flush: Emotion['flush'];
+export const hydrate: Emotion['hydrate'];
+export const cx: Emotion['cx'];
+export const merge: Emotion['merge'];
+export const getRegisteredStyles: Emotion['getRegisteredStyles'];
+export const css: Emotion['css'];
+export const injectGlobal: Emotion['injectGlobal'];
+export const keyframes: Emotion['keyframes'];
+export const sheet: Emotion['sheet'];
+export const caches: Emotion['caches'];
 
 declare module 'react' {
   interface HTMLAttributes<T> {

packages/emotion/types/tests.tsx

@@ -1,30 +1,27 @@
 import {
-  sheet,
-  useStylisPlugin,
-  injectGlobal,
   flush,
-  css,
   hydrate,
-  cx
+  cx,
+  merge,
+  getRegisteredStyles,
+  css,
+  injectGlobal,
+  keyframes,
+  sheet,
+  caches,
 } from '../';
 // tslint:disable-next-line:no-implicit-dependencies
 import React from 'react';
 
-sheet.speedy(true);
-sheet.inject();
-sheet.insert('.foo { font-size: 1 };', 'some source map');
-sheet.flush();
-
-useStylisPlugin(() => {})([() => {}, () => {}])(null);
-
 flush();
 
+hydrate(['css-123', 'css-456']);
+
 const cssObject = {
   height: 100,
   width: '100%',
-  display: (true as boolean) && 'block',
+  display: 'block',
   position: undefined,
-  color: null,
   ':hover': {
     display: 'block'
   }
@@ -40,22 +37,18 @@ const className: string = css`
 
 const className2: string = css(cssObject);
 
-css(() => ({
-  height: 100
-}));
-
 css([
   { display: 'none' },
   [
-    { position: false },
+    { position: 'relative' },
     { width: 100 }
   ]
 ]);
 
 css(
   { display: 'none' },
   [
-    { position: false },
+    { position: 'relative' },
     { width: 100 }
   ]
 );
@@ -68,12 +61,58 @@ injectGlobal`
   }
 `;
 
-const cxResult: string = cx(() => () => [
-  () => [className, false && className2, 'modal'],
-  () => [() => [className, () => ({ [className2]: true }), 'profile']]
+injectGlobal({
+  html: {
+    width: '100vw',
+    height: '100vh',
+  },
+  '#root': {
+    fontWeight: 'bold',
+  },
+});
+
+keyframes({
+  '0%': {
+    transform: 'scaleY(0.5)',
+  },
+  to: {
+    transform: 'scaleY(1)',
+  },
+});
+
+keyframes`
+  0% {
+    transform: translateX(100%);
+  }
+  40% {
+    transform: translateX(50%);
+  }
+  60% {
+    transform: translateX(30%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+`;
+
+const cxResult: string = cx([
+  [className, false && className2, 'modal'],
+  [[className, { [className2]: true }, 'profile']]
 ]);
 
-hydrate(['css-123', 'css-456']);
+merge(`class1 class2 ${className}`);
+
+getRegisteredStyles([], className);
+
+sheet.speedy(true);
+sheet.inject();
+sheet.insert('.foo { font-size: 1 };', 'some source map');
+sheet.flush();
+
+caches.inserted;
+caches.key;
+caches.nonce;
+caches.registered;
 
 /*
  * Can use css prop, transpiled by babel plugin

packages/emotion/types/tsconfig.json

@@ -1,19 +1,28 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "module": "es2015",
-    "strict": true,
     "allowSyntheticDefaultImports": true,
-    "moduleResolution": "node",
+    "baseUrl": "../",
+    "forceConsistentCasingInFileNames": true,
     "jsx": "react",
-    "lib": ["es6"],
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "module": "commonjs",
+    "noEmit": true,
     "noImplicitAny": true,
     "noImplicitThis": true,
+    "strict": true,
     "strictNullChecks": true,
-    "strictFunctionTypes": true
+    "strictFunctionTypes": true,
+    "target": "es5",
+    "typeRoots": [
+      "../"
+    ],
+    "types": []
   },
   "include": [
     "./*.ts",
     "./*.tsx"
   ]
-}
+}