WIP: Add typescript typings

package.json

@@ -3,6 +3,7 @@
   "version": "4.1.2",
   "description": "high performance css-in-js",
   "main": "lib/index.js",
+  "typings": "styled.d.ts",
   "files": [
     "babel.js",
     "src",
@@ -29,6 +30,7 @@
   },
   "dependencies": {
     "babel-plugin-syntax-jsx": "^6.18.0",
+    "@types/react": "^15.0.33",
     "styled-components": "2.0.0",
     "touch": "^1.0.0"
   },

src/styled.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { css } from './index'
 
-export default function (tag, cls, vars = [], content) {
+export default function (tag, cls = '', vars = [], content) {
   if (!tag) {
     throw new Error(
       'You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.'

styled.d.ts

@@ -0,0 +1,57 @@
+declare module "emotion" {
+  export const inserted: Record<string, boolean | undefined>;
+
+  export type InputValue = string | number;
+
+  export function values(cls: string, vars: InputValue[]): string;
+
+  export function flush(): void;
+
+  export function css(
+    cls: string,
+    content: TemplateStringsArray,
+    ...vars: InputValue[],
+  ): string;
+
+  export function injectGlobal(src: string[]): void;
+  export const fontFace = injectGlobal;
+
+  export function keyframes(kfm: string, src: string[]): string;
+
+  export function hydrate(ids: string[]): void;
+}
+
+declare module "emotion/styled" {
+  import { ComponentClass, StatelessComponent, HTMLProps } from "react";
+
+  type Component<P> = ComponentClass<P> | StatelessComponent<P>;
+
+  export type InterpolationValue = string | number;
+
+  export type Tagged<P> = (
+    content: TemplateStringsArray,
+    ...vars: InterpolationValue[],
+  ) => Component<P>;
+
+  export default function<P>(tag: Component<P>): Tagged<P>;
+  export default function(
+    tag: keyof HTMLElementTagNameMap,
+    cls?: string,
+  ): Tagged<HTMLProps<P>>;
+}
+
+declare module "emotion/server" {
+  export interface Rule {
+    cssText: string;
+  }
+
+  export interface Result {
+    html: string;
+    ids: Record<string, boolean | undefined>;
+    css: string;
+    rules: Rule[];
+  }
+
+  export function renderStatic(fn: () => string | undefined): Result;
+  export function renderStaticOptimized(fn: () => string | undefined): Result;
+}