Add type definition

package.json

@@ -10,12 +10,14 @@
   "main": "dist/vue-emotion.cjs.js",
   "cdn": "dist/vue-emotion.min.js",
   "unpkg": "dist/vue-emotion.min.js",
+  "types": "types/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "test": "npm run lint && echo 'no tests!'",
+    "test": "npm run lint && npm run dtslint && echo 'no tests!'",
     "lint": "xo",
+    "dtslint": "dtslint types",
     "prepublishOnly": "npm run build",
     "build": "bili --format umd,cjs,es,umd-min --module-name emotionVue",
     "example": "poi",
@@ -27,6 +29,7 @@
   "devDependencies": {
     "babel-plugin-emotion": "^9.1.0",
     "bili": "^3.0.13",
+    "dtslint": "^0.3.0",
     "emotion": "^9.1.0",
     "eslint-config-rem": "^3.0.0",
     "markdown-toc": "^1.1.0",
@@ -48,6 +51,7 @@
   },
   "dependencies": {
     "emotion-utils": "^9.1.0",
-    "nano-assign": "^1.0.0"
+    "nano-assign": "^1.0.0",
+    "vue-tsx-support": "^1.2.0"
   }
 }

src/index.js

@@ -7,9 +7,8 @@ function stringifyClass(klass) {
     return klass.join(' ')
   }
   if (typeof klass === 'object') {
-    return Object.keys(klass)
-      .filter(key => Boolean(klass[key]))
-      .join(' ')
+    // prettier-ignore
+    return Object.keys(klass).filter(key => Boolean(klass[key])).join(' ')
   }
   return klass
 }

types/index.d.ts

@@ -0,0 +1,103 @@
+// TypeScript Version: 2.3
+// tslint:disable-next-line:no-implicit-dependencies
+import Vue from 'vue'
+import { TsxComponent } from 'vue-tsx-support/lib/api'
+import { Interpolation as EmotionInterpolation } from 'emotion'
+
+export * from 'emotion'
+
+export type InterpolationFn<Props = {}> = (
+  props: Props
+) => EmotionInterpolation | InterpolationFn<Props>
+
+export type InterpolationTypes<Props = {}> =
+  | InterpolationFn<Props>
+  | EmotionInterpolation
+
+export type Interpolation<Props = {}> =
+  | InterpolationTypes<Props>
+  | Array<InterpolationTypes<Props>>
+
+export interface Options {
+  string?: string
+}
+
+type ElementProps<
+  Tag extends keyof JSX.IntrinsicElements
+> = JSX.IntrinsicElements[Tag]
+
+export interface StyledComponent<Props, IntrinsicProps>
+  extends TsxComponent<Vue, Props & IntrinsicProps> {
+  withComponent<Tag extends keyof JSX.IntrinsicElements>(
+    tag: Tag
+  ): StyledComponent<Props, ElementProps<Tag>>
+
+  withComponent(component: any): StyledComponent<Props, {}>
+
+  displayName: string
+  __emotion_styles: string[]
+  __emotion_base: string | {}
+  __emotion_real: ThemedVueEmotionInterface
+}
+
+export type ObjectStyleAttributes =
+  | object
+  | object[]
+  | { [key: string]: ObjectStyleAttributes }
+
+export interface CreateStyled<Props, IntrinsicProps> {
+  // overload for template string as styles
+  (
+    strings: TemplateStringsArray,
+    ...vars: Array<Interpolation<Props & IntrinsicProps>>
+  ): StyledComponent<Props, IntrinsicProps>
+
+  // overload for object as styles
+  (
+    ...styles: Array<
+      | ObjectStyleAttributes
+      | ((props: Props & IntrinsicProps) => ObjectStyleAttributes)
+    >
+  ): StyledComponent<Props, IntrinsicProps>
+}
+
+type ShorthandsFactories = {
+  [Tag in keyof JSX.IntrinsicElements]: {
+    // overload for template string as styles
+    <Props = {}>(
+      strings: TemplateStringsArray,
+      ...vars: Array<Interpolation<Props & JSX.IntrinsicElements[Tag]>>
+    ): StyledComponent<Props, ElementProps<Tag>>
+
+    // overload for object as styles
+    <Props = {}>(
+      ...styles: Array<
+        | ObjectStyleAttributes
+        | ((props: Props & JSX.IntrinsicElements[Tag]) => ObjectStyleAttributes)
+      >
+    ): StyledComponent<Props, ElementProps<Tag>>
+  }
+}
+
+export interface ThemedVueEmotionInterface extends ShorthandsFactories {
+  // overload for dom tag
+  <Props, Tag extends keyof JSX.IntrinsicElements>(
+    tag: Tag,
+    options?: Options
+  ): // tslint:disable-next-line:no-unnecessary-generics
+  CreateStyled<Props, ElementProps<Tag>>
+
+  // overload for component
+  <Props, CustomProps>(
+    component: any,
+    options?: Options
+  ): // tslint:disable-next-line:no-unnecessary-generics
+  CreateStyled<Props & CustomProps, {}>
+}
+
+export interface ThemedVueEmotionModule {
+  default: ThemedVueEmotionInterface
+}
+
+declare const styled: ThemedVueEmotionInterface
+export default styled

types/test.tsx

@@ -0,0 +1,83 @@
+import styled, { flush, ThemedVueEmotionInterface } from './'
+
+let Component
+let mount
+
+/*
+ * Inference HTML Tag Props
+ */
+Component = styled.div({ color: 'red' })
+mount = <Component onClick={(event: any) => event} />
+
+Component = styled('div')({ color: 'red' })
+mount = <Component onClick={(event: any) => event} />
+
+Component = styled.div`
+  color: red;
+`
+mount = <Component onClick={(event: any) => event} />
+
+Component = styled('div')`
+  color: red;
+`
+mount = <Component onClick={(event: any) => event} />
+
+Component = styled.a({ color: 'red' })
+mount = <Component href="#" />
+
+Component = styled('a')({ color: 'red' })
+mount = <Component href="#" />
+
+/*
+ * Passing custom props
+ */
+interface CustomProps {
+  lookColor: string
+}
+
+Component = styled.div<CustomProps>(
+  { color: 'blue' },
+  props => ({
+    background: props.lookColor
+  }),
+  props => ({
+    border: `1px solid ${props.lookColor}`
+  })
+)
+mount = <Component lookColor="red" />
+
+Component = styled<CustomProps, 'div'>('div')({ color: 'blue' }, props => ({
+  background: props.lookColor
+}))
+mount = <Component lookColor="red" />
+
+const anotherColor = 'blue'
+Component = styled<CustomProps, 'div'>('div')`
+  background: ${props => props.lookColor};
+  color: ${anotherColor};
+`
+mount = <Component lookColor="red" />
+
+/*
+ * withComponent
+ */
+
+interface CustomProps3 {
+  bgColor: string
+}
+
+Component = styled.div<CustomProps3>(props => ({
+  bgColor: props.bgColor
+}))
+
+const Link = Component.withComponent('a')
+mount = <Link href="#" bgColor="red" />
+
+const Button = Component.withComponent('button')
+mount = <Button type="submit" bgColor="red" />
+
+/*
+ * Can use emotion helpers importing from vue-emotion
+ */
+
+flush()

types/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "module": "commonjs",
+    "declaration": true,
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "lib": ["es6"],
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true
+  },
+  "include": [
+    "./*.ts",
+    "./*.tsx",
+    "../node_modules/vue-tsx-support/enable-check.d.ts"
+  ]
+}

types/tslint.json

@@ -0,0 +1,8 @@
+{
+  "extends": "dtslint/dtslint.json",
+  "rules": {
+    "no-relative-import-in-test": false,
+    "no-empty-interface": false,
+    "semicolon": false
+  }
+}