reorganize @emotion/utils types

.changeset/six-hotels-double.md

@@ -0,0 +1,10 @@
+---
+'@emotion/cache': minor
+'@emotion/css': minor
+'@emotion/react': minor
+'@emotion/serialize': minor
+'@emotion/server': minor
+'@emotion/utils': minor
+---
+
+Reorganize @emotion/utils types

packages/cache/types/index.d.ts

@@ -1,8 +1,32 @@
 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
 // TypeScript Version: 2.2
-import { EmotionCache } from '@emotion/utils'
+import { SerializedStyles } from '@emotion/serialize'
+import { StyleSheet } from '@emotion/sheet'
 
-export { EmotionCache }
+export interface RegisteredCache {
+ [key: string]: string
+}
+
+export interface EmotionStyleSheet extends StyleSheet {
+ constructor: typeof StyleSheet
+}
+
+export interface EmotionCache {
+ inserted: {
+ [key: string]: string | true
+ }
+ registered: RegisteredCache
+ sheet: EmotionStyleSheet
+ key: string
+ compat?: true
+ nonce?: string
+ insert(
+ selector: string,
+ serialized: SerializedStyles,
+ sheet: StyleSheet,
+ shouldCache: boolean
+ ): string | void
+}
 
 export interface StylisElement {
  type: string

packages/cache/types/tests.ts

@@ -5,4 +5,10 @@ declare const testOptions: Options
 // $ExpectType EmotionCache
 createCache({ key: 'test-key' })
 // $ExpectType EmotionCache
-createCache(testOptions)
+const cache = createCache(testOptions)
+
+// $ExpectType StyleSheet
+new cache.sheet.constructor({
+ key: 'css',
+ container: document.createElement('div')
+})

packages/react/types/tests-css.tsx

@@ -29,6 +29,21 @@ css`
  top: ${'20px'};
 `
 
+// $ExpectType SerializedStyles
+css([{ display: null }])
+
+// $ExpectType SerializedStyles
+css({
+ ':hover': [{ color: 'green' }, { backgroundColor: 'yellow' }]
+})
+
+// $ExpectType SerializedStyles
+css({
+ ':hover': css`
+ color: hotpink;
+ `
+})
+
 // $ExpectError
 css(() => 'height: 300px;')
 

packages/serialize/types/index.d.ts

@@ -1,19 +1,26 @@
 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
 // TypeScript Version: 2.8
-
-import { RegisteredCache, SerializedStyles } from '@emotion/utils'
+import type { RegisteredCache } from '@emotion/cache'
 import * as CSS from 'csstype'
 
-export { RegisteredCache, SerializedStyles }
+export interface SerializedStyles {
+ name: string
+ styles: string
+ map?: string
+ next?: SerializedStyles
+}
 
 export type CSSProperties = CSS.PropertiesFallback<number | string>
 export type CSSPropertiesWithMultiValues = {
  [K in keyof CSSProperties]:
+ | null
+ | undefined
+ | false
  | CSSProperties[K]
  | Array<Extract<CSSProperties[K], string>>
 }
 
-export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject }
+export type CSSPseudos = { [K in CSS.Pseudos]?: CSSInterpolation }
 
 export interface ArrayCSSInterpolation extends Array<CSSInterpolation> {}
 

packages/server/types/create-instance.d.ts

@@ -2,7 +2,7 @@
 // TypeScript Version: 2.8
 
 /// <reference types="node" />
-import { EmotionCache } from '@emotion/utils'
+import { EmotionCache } from '@emotion/cache'
 
 export interface EmotionCritical {
  html: string

packages/server/types/tests-create-instance.ts

@@ -1,5 +1,5 @@
 import createEmotionServer from '@emotion/server/create-instance'
-import { EmotionCache } from '@emotion/utils'
+import { EmotionCache } from '@emotion/cache'
 
 declare const cache: EmotionCache
 

packages/utils/types/index.d.ts

@@ -1,10 +1,17 @@
 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
 // TypeScript Version: 2.2
+import type { SerializedStyles as EmotionSerializedStyles } from '@emotion/serialize'
+import type {
+ RegisteredCache as EmotionRegisteredCache,
+ EmotionCache as EmotionStyleCache
+} from '@emotion/cache'
 
+/** @deprecated use `RegisteredCache` from `@emotion/cache` */
 export interface RegisteredCache {
  [key: string]: string
 }
 
+/** @deprecated use `StyleSheet` from `@emotion/sheet` */
 export interface StyleSheet {
  container: HTMLElement
  nonce?: string
@@ -14,6 +21,7 @@ export interface StyleSheet {
  tags: Array<HTMLStyleElement>
 }
 
+/** @deprecated use `EmotionCache` from `@emotion/cache` */
 export interface EmotionCache {
  inserted: {
  [key: string]: string | true
@@ -31,6 +39,7 @@ export interface EmotionCache {
  ): string | void
 }
 
+/** @deprecated use `SerializedStyles` from `@emotion/serialize` */
 export interface SerializedStyles {
  name: string
  styles: string
@@ -41,19 +50,19 @@ export interface SerializedStyles {
 export const isBrowser: boolean
 
 export function getRegisteredStyles(
- registered: RegisteredCache,
+ registered: EmotionRegisteredCache,
  registeredStyles: Array<string>,
  classNames: string
 ): string
 
 export function registerStyles(
- cache: EmotionCache,
- serialized: SerializedStyles,
+ cache: EmotionStyleCache,
+ serialized: EmotionSerializedStyles,
  isStringTag: boolean
 ): void
 
 export function insertStyles(
- cache: EmotionCache,
- serialized: SerializedStyles,
+ cache: EmotionStyleCache,
+ serialized: EmotionSerializedStyles,
  isStringTag: boolean
 ): string | void

packages/utils/types/tests.ts

@@ -1,12 +1,5 @@
-import {
- EmotionCache,
- RegisteredCache,
- SerializedStyles,
- StyleSheet,
- getRegisteredStyles,
- insertStyles,
- isBrowser
-} from '@emotion/utils'
+import type { EmotionCache, RegisteredCache } from '@emotion/cache'
+import { getRegisteredStyles, insertStyles, isBrowser } from '@emotion/utils'
 
 declare const testCache: EmotionCache
 declare const testRegisteredCache: RegisteredCache

packages/utils/types/tslint.json

@@ -2,6 +2,7 @@
  "extends": "@definitelytyped/dtslint/dtslint.json",
  "rules": {
  "array-type": [true, "generic"],
- "semicolon": false
+ "semicolon": false,
+ "no-redundant-jsdoc": false
  }
 }