diff --git a/packages/emotion/types/index.d.ts b/packages/emotion/types/index.d.ts index c6c6e68b36..a186a17c44 100644 --- a/packages/emotion/types/index.d.ts +++ b/packages/emotion/types/index.d.ts @@ -1,45 +1,20 @@ -// TypeScript Version: 2.2 -export type Interpolation = string | number | boolean | null | undefined | _Interpolation1 | _Interpolation2 | (() => Interpolation); - -// HACK: See https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540 -export interface _Interpolation1 extends Record {} -export interface _Interpolation2 extends Array {} - -export type CreateStyles = ((...values: Interpolation[]) => TRet) - & ((strings: TemplateStringsArray, ...vars: Interpolation[]) => TRet); - -// TODO: Make this more precise than just Function -// tslint:disable-next-line:ban-types -export type StylisUse = (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 function getRegisteredStyles(registeredStyles: string[], classNames: string): string; - -export function cx(...interpolations: Interpolation[]): string; - -export function hydrate(ids: string[]): void; +// Definitions by: Junyoung Clare Jang +// TypeScript Version: 2.3 + +import { Emotion, Interpolation } from 'create-emotion'; + +export { Interpolation }; + +export const flush: Emotion['flush']; +export const hydrate: Emotion['hydrate']; +export const cx: Emotion['cx']; +export const merge: Emotion['merge']; +export const getRegisteredStyles: Emotion['getRegisteredStyles']; +export const css: Emotion['css']; +export const injectGlobal: Emotion['injectGlobal']; +export const keyframes: Emotion['keyframes']; +export const sheet: Emotion['sheet']; +export const caches: Emotion['caches']; declare module 'react' { interface HTMLAttributes { diff --git a/packages/emotion/types/tests.tsx b/packages/emotion/types/tests.tsx index e7e3007eb8..892f25ad29 100644 --- a/packages/emotion/types/tests.tsx +++ b/packages/emotion/types/tests.tsx @@ -1,30 +1,27 @@ import { - sheet, - useStylisPlugin, - injectGlobal, flush, - css, hydrate, - cx + cx, + merge, + getRegisteredStyles, + css, + injectGlobal, + keyframes, + sheet, + caches, } from '../'; // tslint:disable-next-line:no-implicit-dependencies import React from 'react'; -sheet.speedy(true); -sheet.inject(); -sheet.insert('.foo { font-size: 1 };', 'some source map'); -sheet.flush(); - -useStylisPlugin(() => {})([() => {}, () => {}])(null); - flush(); +hydrate(['css-123', 'css-456']); + const cssObject = { height: 100, width: '100%', - display: (true as boolean) && 'block', + display: 'block', position: undefined, - color: null, ':hover': { display: 'block' } @@ -40,14 +37,10 @@ const className: string = css` const className2: string = css(cssObject); -css(() => ({ - height: 100 -})); - css([ { display: 'none' }, [ - { position: false }, + { position: 'relative' }, { width: 100 } ] ]); @@ -55,7 +48,7 @@ css([ css( { display: 'none' }, [ - { position: false }, + { position: 'relative' }, { width: 100 } ] ); @@ -68,12 +61,58 @@ injectGlobal` } `; -const cxResult: string = cx(() => () => [ - () => [className, false && className2, 'modal'], - () => [() => [className, () => ({ [className2]: true }), 'profile']] +injectGlobal({ + html: { + width: '100vw', + height: '100vh', + }, + '#root': { + fontWeight: 'bold', + }, +}); + +keyframes({ + '0%': { + transform: 'scaleY(0.5)', + }, + to: { + transform: 'scaleY(1)', + }, +}); + +keyframes` + 0% { + transform: translateX(100%); + } + 40% { + transform: translateX(50%); + } + 60% { + transform: translateX(30%); + } + 100% { + transform: translateX(100%); + } +`; + +const cxResult: string = cx([ + [className, false && className2, 'modal'], + [[className, { [className2]: true }, 'profile']] ]); -hydrate(['css-123', 'css-456']); +merge(`class1 class2 ${className}`); + +getRegisteredStyles([], className); + +sheet.speedy(true); +sheet.inject(); +sheet.insert('.foo { font-size: 1 };', 'some source map'); +sheet.flush(); + +caches.inserted; +caches.key; +caches.nonce; +caches.registered; /* * Can use css prop, transpiled by babel plugin diff --git a/packages/emotion/types/tsconfig.json b/packages/emotion/types/tsconfig.json index a8d0732ab7..485b990d9d 100644 --- a/packages/emotion/types/tsconfig.json +++ b/packages/emotion/types/tsconfig.json @@ -1,19 +1,28 @@ { "compilerOptions": { - "target": "es5", - "module": "es2015", - "strict": true, "allowSyntheticDefaultImports": true, - "moduleResolution": "node", + "baseUrl": "../", + "forceConsistentCasingInFileNames": true, "jsx": "react", - "lib": ["es6"], + "lib": [ + "es6", + "dom" + ], + "module": "commonjs", + "noEmit": true, "noImplicitAny": true, "noImplicitThis": true, + "strict": true, "strictNullChecks": true, - "strictFunctionTypes": true + "strictFunctionTypes": true, + "target": "es5", + "typeRoots": [ + "../" + ], + "types": [] }, "include": [ "./*.ts", "./*.tsx" ] -} \ No newline at end of file +}