Add type for 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"
   },

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<C> = { [K in CSS.Pseudos]?: CSSObject<C> };
+export interface CSSOthersObject<C> {
+  [propertiesName: string]: Interpolation<C>;
+}
+export interface CSSObject<C> extends CSSBaseObject, CSSPseudoObject<C>, CSSOthersObject<C> {}
+
+export type FunctionInterpolation<C> = (mergedProps: any, context: C) => Interpolation<C> | void;
+
+export interface ArrayInterpolation<C> extends Array<Interpolation<C>> {}
+
+export type Interpolation<C> =
+  | undefined | null | boolean | string | number
+  | CSSObject<C>
+  | ArrayInterpolation<C>
+  | FunctionInterpolation<C>
+  ;
+
+export type FunctionClassNameArg = () => ClassNameArg | void;
+export interface ArrayClassNameArg extends Array<ClassNameArg> {}
+
+export type ClassNameArg =
+  | undefined | null | boolean | string
+  | { [key: string]: boolean }
+  | FunctionClassNameArg
+  | 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<C> {
+  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<C>>): string;
+  injectGlobal(...args: Array<Interpolation<C>>): void;
+  keyframes(...args: Array<Interpolation<C>>): string;
+  sheet: StyleSheet;
+  caches: EmotionCache;
+}
+
+export interface EmotionBaseContext<C> {
+  __SECRET_EMOTION__?: Emotion<C>;
+}
+
+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<C extends EmotionBaseContext<C>>(context: C, options?: EmotionOption): Emotion<C>;

packages/create-emotion/types/tests.tsx

@@ -0,0 +1,127 @@
+import createEmotion from '../';
+
+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();
+css(1);
+css('abc');
+css(true);
+
+css([]);
+css([1]);
+css([['abc', 'asdf'], 'efw']);
+
+css(() => {
+  return 1;
+});
+css((a: number, b: {}) => {
+  return 1;
+});
+
+css({
+  ':active': {
+    borderRadius: '2px',
+    overflowAnchor: 'none',
+    clear: ['both', 'left'],
+  },
+  '::before': {
+    borderRadius: '2px',
+  },
+});
+
+css(true, true);
+css('fa', 1123);
+css(['123'], 'asdf');
+css('fa', () => {
+});
+css('pa--emp', () => {
+  return null;
+});
+css('squid', () => {
+  return ['other-squid', {
+    alignSelf: 'middle',
+  }];
+});
+
+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"]
+    }
+}

yarn.lock

@@ -3805,6 +3805,10 @@ cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
   dependencies:
     cssom "0.3.x"
 
+csstype@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.2.tgz#4534308476ceede8fbe148b9b99f9baf1c80fa06"
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"