From 6e83975ef86a5d6c5d409f882b61a7a969f96b7b Mon Sep 17 00:00:00 2001 From: Cameron Martin Date: Wed, 4 Oct 2017 22:29:13 +0100 Subject: [PATCH 1/2] Added TypeScript types and tests for the emotion package. --- package.json | 3 +- packages/emotion/package.json | 6 +- .../emotion/typescript_tests/tsconfig.json | 13 ++++ .../typescript_tests/typescript_tests.ts | 73 +++++++++++++++++++ packages/emotion/typings/emotion.d.ts | 45 ++++++++++++ 5 files changed, 138 insertions(+), 2 deletions(-) create mode 100644 packages/emotion/typescript_tests/tsconfig.json create mode 100644 packages/emotion/typescript_tests/typescript_tests.ts create mode 100644 packages/emotion/typings/emotion.d.ts diff --git a/package.json b/package.json index 74b98a508..4b6f2d85f 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "build": "lerna run build --parallel", "test:size": "npm-run-all clean rollup:umd size", "clean": "lerna run clean --parallel", - "test": "npm-run-all -p lint:check coverage test:size && npm run benchmark", + "test": "npm-run-all -p lint:check coverage test:size test:typescript && npm run benchmark", + "test:typescript": "lerna run test:typescript --parallel", "coverage": "jest --coverage --no-cache --ci --runInBand", "lint:check": "eslint .", "test:watch": "jest --watch --no-cache", diff --git a/packages/emotion/package.json b/packages/emotion/package.json index c74fb1941..39003c67f 100644 --- a/packages/emotion/package.json +++ b/packages/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": "typings/emotion.d.ts", "files": [ "src", "dist", @@ -14,6 +15,8 @@ ], "scripts": { "build": "npm-run-all clean rollup rollup:umd", + "test:typescript": "tsc --noEmit -p typescript_tests/tsconfig.json", + "pretest:typescript": "npm run build", "clean": "rimraf dist", "rollup": "rollup -c ../../rollup.config.js", "watch": "rollup -c ../../rollup.config.js --watch", @@ -28,7 +31,8 @@ "cross-env": "^5.0.5", "npm-run-all": "^4.0.2", "rimraf": "^2.6.1", - "rollup": "^0.43.0" + "rollup": "^0.43.0", + "typescript": "^2.0.0" }, "author": "Kye Hohenberger", "homepage": "https://emotion.sh", diff --git a/packages/emotion/typescript_tests/tsconfig.json b/packages/emotion/typescript_tests/tsconfig.json new file mode 100644 index 000000000..8440d264e --- /dev/null +++ b/packages/emotion/typescript_tests/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "es2015", + "strict": true, + "allowSyntheticDefaultImports": true, + "moduleResolution": "node" + }, + "include": [ + "./*.ts", + "./*.tsx" + ] +} \ No newline at end of file diff --git a/packages/emotion/typescript_tests/typescript_tests.ts b/packages/emotion/typescript_tests/typescript_tests.ts new file mode 100644 index 000000000..86b4e6f29 --- /dev/null +++ b/packages/emotion/typescript_tests/typescript_tests.ts @@ -0,0 +1,73 @@ +import { + sheet, + useStylisPlugin, + injectGlobal, + flush, + css, + fontFace, + hydrate +} from '../'; + +sheet.speedy(true); +sheet.inject(); +sheet.insert('.foo { font-size: 1 };', 'some source map'); +sheet.flush(); + +useStylisPlugin(() => {})([() => {}, () => {}])(null); + +flush(); + +const cssObject = { + height: 100, + width: '100%', + display: (true as boolean) && 'block', + position: undefined, + color: null, + ':hover': { + display: 'block' + } +}; + +const className: string = css` + ${(true as boolean) && ''} + ${'bar'} + ${css``} + ${1} + ${cssObject} +`; + +const className2: string = css(cssObject); + +css(() => ({ + height: 100 +})); + +css([ + { display: 'none' }, + [ + { position: false }, + { width: 100 } + ] +]) + +css( + { display: 'none' }, + [ + { position: false }, + { width: 100 } + ] +); + +css(null); + +fontFace` + font-family: 'Foo'; +`; + +injectGlobal` + #foo { + font-face: 'Foo'; + } +`; + +hydrate(['css-123', 'css-456']); diff --git a/packages/emotion/typings/emotion.d.ts b/packages/emotion/typings/emotion.d.ts new file mode 100644 index 000000000..735678ed6 --- /dev/null +++ b/packages/emotion/typings/emotion.d.ts @@ -0,0 +1,45 @@ +export type Interpolation = string | number | boolean | null | undefined | _Interpolation1 | _Interpolation2 | _Interpolation3; + +// HACK: See https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540 +interface _Interpolation1 extends Record {} +interface _Interpolation2 extends Array {} +interface _Interpolation3 { + (): Interpolation; +} + +export type CreateStyles = ((...values: Interpolation[]) => TRet) + & ((strings: TemplateStringsArray, ...vars: Interpolation[]) => TRet); + +export interface StylisUse { + // TODO: Make this more precise than just Function + (plugin: Function | Function[] | null): StylisUse; +} + +export interface StyleSheet { + inject(): void; + speedy(bool: boolean): void; + insert(rule: string, sourceMap: string): void; + flush(): void; +} + +export const sheet: StyleSheet; + +export const useStylisPlugin: StylisUse; + +export const inserted: Record; + +export const registered: Record; + +export function flush(): void; + +export const css: CreateStyles; + +export const injectGlobal: CreateStyles; + +export const keyframes: CreateStyles; + +export const fontFace: CreateStyles; + +export function getRegisteredStyles(registeredStyles: string[], classNames: string): string; + +export function hydrate(ids: string[]): void; \ No newline at end of file From a730d4f96a3d3edceea43ecc9eb22542528e566e Mon Sep 17 00:00:00 2001 From: Mitchell Hamilton Date: Tue, 10 Oct 2017 20:31:29 +1000 Subject: [PATCH 2/2] Add typings to files in emotion package.json --- packages/emotion/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/emotion/package.json b/packages/emotion/package.json index 98a7fef41..6fe3da333 100644 --- a/packages/emotion/package.json +++ b/packages/emotion/package.json @@ -11,7 +11,8 @@ "macro.js", "react", "server.js", - "babel.js" + "babel.js", + "typings" ], "scripts": { "build": "npm-run-all clean rollup rollup:umd",