diff --git a/package.json b/package.json index 81127c6e3..3e2117a42 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 a116d5974..6fe3da333 100644 --- a/packages/emotion/package.json +++ b/packages/emotion/package.json @@ -4,16 +4,20 @@ "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", "macro.js", "react", "server.js", - "babel.js" + "babel.js", + "typings" ], "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", @@ -30,7 +34,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