Add TS typings to create-emotion

packages/create-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": "types/index.d.ts",
   "files": [
     "src",
     "dist",
@@ -12,6 +13,7 @@
   "scripts": {
     "build": "npm-run-all clean rollup",
     "clean": "rimraf dist",
+    "test:typescript": "dtslint types",
     "rollup": "rollup -c ../../rollup.config.js",
     "watch": "rollup -c ../../rollup.config.js --watch"
   },
@@ -20,6 +22,7 @@
     "@emotion/memoize": "^0.6.1",
     "@emotion/stylis": "^0.6.5",
     "@emotion/unitless": "^0.6.2",
+    "csstype": "^2.5.2",
     "stylis": "^3.5.0",
     "stylis-rule-sheet": "^0.0.10"
   },
@@ -28,7 +31,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/create-emotion/types/index.d.ts

@@ -0,0 +1,85 @@
+// Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
+// TypeScript Version: 2.3
+
+import * as CSS from 'csstype';
+
+export interface MultiDimensionalArray<T> extends Array<T | MultiDimensionalArray<T>> {}
+
+export type CSSBaseObject = CSS.PropertiesFallback<number | string>;
+export type CSSPseudoObject = { [K in CSS.Pseudos]?: CSSObject };
+export interface CSSOthersObject {
+  [propertiesName: string]: Interpolation;
+}
+export interface CSSObject extends CSSBaseObject, CSSPseudoObject, CSSOthersObject {}
+
+export interface ArrayInterpolation extends Array<Interpolation> {}
+
+export type Interpolation =
+  | undefined | null | boolean | string | number
+  | TemplateStringsArray
+  | CSSObject
+  | ArrayInterpolation
+  ;
+
+export interface ArrayClassNameArg extends Array<ClassNameArg> {}
+
+export type ClassNameArg =
+  | undefined | null | boolean | string
+  | { [key: string]: boolean }
+  | ArrayClassNameArg
+  ;
+
+export interface StyleSheet {
+  inject(): void;
+  speedy(bool: boolean): void;
+  insert(rule: string, sourceMap?: string): void;
+  flush(): void;
+}
+
+export interface EmotionCache {
+  registered: {
+    [key: string]: string;
+  };
+  inserted: {
+    [key: string]: string;
+  };
+  nonce?: string;
+  key: string;
+}
+
+export interface Emotion {
+  flush(): void;
+  hydrate(ids: Array<string>): void;
+  cx(...classNames: Array<ClassNameArg>): string;
+  merge(className: string, sourceMap?: string): string;
+  getRegisteredStyles(registeredStyles: Array<string>, classNames: string): string;
+  css(...args: Array<Interpolation>): string;
+  injectGlobal(...args: Array<Interpolation>): void;
+  keyframes(...args: Array<Interpolation>): string;
+  sheet: StyleSheet;
+  caches: EmotionCache;
+}
+
+export interface EmotionBaseContext {
+  __SECRET_EMOTION__?: Emotion;
+}
+
+export interface EmotionContext extends EmotionBaseContext {
+  [key: string]: any;
+}
+
+export type StylisPlugins =
+  | null
+  | ((...args: Array<any>) => any)
+  | Array<(...args: Array<any>) => any>
+  ;
+
+export interface EmotionOption {
+  nonce?: string;
+  stylisPlugins?: StylisPlugins;
+  prefix?: boolean | ((key: string, value: string, context: 1 | 2 | 3) => boolean);
+  key?: string;
+  container?: HTMLElement;
+}
+
+export default function createEmotion(context: EmotionContext, options?: EmotionOption): Emotion;

packages/create-emotion/types/tests.tsx

@@ -0,0 +1,126 @@
+import createEmotion from '../';
+
+const emotion0 = createEmotion({
+  x: 5,
+});
+const emotion1 = createEmotion({
+  y: 4,
+  __SECRET_EMOTION__: emotion0,
+});
+
+const {
+  flush,
+  hydrate,
+  cx,
+  merge,
+  getRegisteredStyles,
+  css,
+  injectGlobal,
+  keyframes,
+  sheet,
+  caches,
+} = createEmotion({});
+
+flush();
+
+hydrate([]);
+hydrate(['123']);
+
+cx();
+cx(undefined);
+cx(null);
+cx(true);
+cx('123');
+cx('123', null, 'pf');
+cx({
+  abc: false,
+  fp: true,
+});
+cx([]);
+cx(['cl', {
+  fp: true,
+}]);
+
+merge('abc def fpfp');
+
+getRegisteredStyles([], 'abc');
+getRegisteredStyles(['abc'], 'bcd');
+getRegisteredStyles([], 'abc def fpfw');
+
+css`
+  height: 20px;
+`;
+css`
+  color: ${'green'};
+  font-size: ${10 + 4}px;
+`;
+
+css();
+css(1);
+css('abc');
+css(true);
+
+css([]);
+css([1]);
+css([['abc', 'asdf'], 'efw']);
+
+css({
+  ':active': {
+    borderRadius: '2px',
+    overflowAnchor: 'none',
+    clear: ['both', 'left'],
+  },
+  '::before': {
+    borderRadius: '2px',
+  },
+});
+
+css(true, true);
+css('fa', 1123);
+css(['123'], 'asdf');
+
+injectGlobal();
+injectGlobal(30);
+injectGlobal('this-is-class');
+injectGlobal({});
+injectGlobal([{
+  animationDelay: '200ms',
+}]);
+
+keyframes();
+keyframes({
+  from: {
+    marginLeft: '100%',
+  },
+  to: {
+    marginLeft: '50%',
+  },
+});
+keyframes([{
+  from: {
+    marginLeft: '100%',
+  },
+  to: {
+    marginLeft: '50%',
+  },
+}, {
+  '0%': {
+    width: '100px',
+  },
+  '50%': {
+    width: '50px',
+  },
+  '100%': {
+    width: '120px',
+  },
+}]);
+
+sheet.flush();
+sheet.inject();
+sheet.insert('');
+sheet.speedy(false);
+
+caches.inserted;
+caches.key;
+caches.nonce;
+caches.registered;

packages/create-emotion/types/tsconfig.json

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

packages/create-emotion/types/tslint.json

@@ -0,0 +1,7 @@
+{
+    "extends": "dtslint/dtslint.json",
+    "rules": {
+      "no-relative-import-in-test": false,
+      "array-type": [true, "generic"]
+    }
+}