From cdcb3fec8f7cd6d713afde8e8be4c5204c302b42 Mon Sep 17 00:00:00 2001 From: Junyoung Clare Jang Date: Fri, 18 May 2018 21:25:06 -0400 Subject: [PATCH] Add type for create-emotion --- packages/create-emotion/package.json | 3 + packages/create-emotion/types/index.d.ts | 85 +++++++++++++ packages/create-emotion/types/tests.tsx | 127 ++++++++++++++++++++ packages/create-emotion/types/tsconfig.json | 27 +++++ packages/create-emotion/types/tslint.json | 7 ++ yarn.lock | 4 + 6 files changed, 253 insertions(+) create mode 100644 packages/create-emotion/types/index.d.ts create mode 100644 packages/create-emotion/types/tests.tsx create mode 100644 packages/create-emotion/types/tsconfig.json create mode 100644 packages/create-emotion/types/tslint.json diff --git a/packages/create-emotion/package.json b/packages/create-emotion/package.json index ce1aaeae5..26bd40630 100644 --- a/packages/create-emotion/package.json +++ b/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" }, diff --git a/packages/create-emotion/types/index.d.ts b/packages/create-emotion/types/index.d.ts new file mode 100644 index 000000000..abbcec292 --- /dev/null +++ b/packages/create-emotion/types/index.d.ts @@ -0,0 +1,85 @@ +// Definitions by: Junyoung Clare Jang +// TypeScript Version: 2.3 + +import * as CSS from 'csstype'; + +export interface MultiDimensionalArray extends Array> {} + +export type CSSBaseObject = CSS.PropertiesFallback; +export type CSSPseudoObject = { [K in CSS.Pseudos]?: CSSObject }; +export interface CSSOthersObject { + [propertiesName: string]: Interpolation; +} +export interface CSSObject extends CSSBaseObject, CSSPseudoObject, CSSOthersObject {} + +export type FunctionInterpolation = (mergedProps: any, context: C) => Interpolation | void; + +export interface ArrayInterpolation extends Array> {} + +export type Interpolation = + | undefined | null | boolean | string | number + | CSSObject + | ArrayInterpolation + | FunctionInterpolation + ; + +export type FunctionClassNameArg = () => ClassNameArg | void; +export interface ArrayClassNameArg extends Array {} + +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 { + flush(): void; + hydrate(ids: Array): void; + cx(...classNames: Array): string; + merge(className: string, sourceMap?: string): string; + getRegisteredStyles(registeredStyles: Array, classNames: string): string; + css(...args: Array>): string; + injectGlobal(...args: Array>): void; + keyframes(...args: Array>): string; + sheet: StyleSheet; + caches: EmotionCache; +} + +export interface EmotionBaseContext { + __SECRET_EMOTION__?: Emotion; +} + +export type StylisPlugins = + | null + | ((...args: Array) => any) + | Array<(...args: Array) => 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: C, options?: EmotionOption): Emotion; diff --git a/packages/create-emotion/types/tests.tsx b/packages/create-emotion/types/tests.tsx new file mode 100644 index 000000000..db3d72bc3 --- /dev/null +++ b/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; diff --git a/packages/create-emotion/types/tsconfig.json b/packages/create-emotion/types/tsconfig.json new file mode 100644 index 000000000..ea6734342 --- /dev/null +++ b/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" + ] +} diff --git a/packages/create-emotion/types/tslint.json b/packages/create-emotion/types/tslint.json new file mode 100644 index 000000000..6aa4e9a8f --- /dev/null +++ b/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"] + } +} diff --git a/yarn.lock b/yarn.lock index 9020958c8..182cd6112 100644 --- a/yarn.lock +++ b/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"