Localized jsx namespace

.changeset/moody-ravens-deny.md

@@ -0,0 +1,13 @@
+---
+'@emotion/react': patch
+---
+
+The way in which we provide TypeScript support for `css` prop has changed. Based on usage of our jsx pragma we are able to add support for `css` prop only for components that support `className` prop (as our `jsx` factory function takes provided `css` prop, resolves it and pass the generated `className` to the rendered component). This has been implemented using technique described [here](https://www.typescriptlang.org/docs/handbook/jsx.html#factory-functions). What is important - we no longer extend any global interfaces, so people shouldn't bump anymore into type conflicts for the `css` prop when using different libraries with the `css` prop support, such as `styled-components`.
+
+However, it's not possible to leverage `css` prop support being added conditionally based on a type of rendered component when one is not using our jsx pragma. For those cases when people use our pragma implicitly (for example when using our `@emotion/babel-preset-css-prop`) we have added special file that can be imported once to add support for the `css` prop globally, for all components. Use it like this:
+
+```ts
+import {} from '@emotion/react/types/css-prop'
+```
+
+In this particular case we are forced to extend the existing `React.Attributes` interface. Previously we've been extending both `React.DOMAttributes<T>` and `JSX.IntrinsicAttributes`. This change is really minor and shouldn't affect any consuming code.

docs/typescript.mdx

@@ -55,6 +55,16 @@ import { css } from '@emotion'
 <div className={css({ background: 'black' })} />
 ```
 
+### `css` prop
+
+When using our jsx pragma the support for `css` prop is being added only for components that accepts `className` prop, as our `jsx` factory function takes provided `css` prop, resolves it and pass the generated `className` to the rendered component.
+
+However, it's not possible to leverage `css` prop support being added conditionally based on a type of rendered component when one is not using our jsx pragma. For those cases when people use our pragma implicitly (for example when using our `@emotion/babel-preset-css-prop`) we have a special file that can be imported once to add support for the `css` prop globally, for all components. Use it like this:
+
+```ts
+import {} from '@emotion/react/types/css-prop'
+```
+
 ## @emotion/styled
 
 ### HTML/SVG elements

packages/react/types/css-prop.d.ts

@@ -0,0 +1,9 @@
+import {} from 'react'
+import { Interpolation } from '@emotion/serialize'
+import { Theme } from '.'
+
+declare module 'react' {
+  interface Attributes {
+    css?: Interpolation<Theme>
+  }
+}

packages/react/types/index.d.ts

@@ -1,5 +1,5 @@
 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
-// TypeScript Version: 3.1
+// TypeScript Version: 3.2
 
 import { EmotionCache } from '@emotion/cache'
 import {
@@ -46,8 +46,6 @@ export function withEmotionCache<Props, RefType = any>(
   func: (props: Props, context: EmotionCache, ref: Ref<RefType>) => ReactNode
 ): FC<Props & ClassAttributes<RefType>>
 
-export const jsx: typeof createElement
-
 export function css(
   template: TemplateStringsArray,
   ...args: Array<CSSInterpolation>
@@ -94,8 +92,42 @@ export interface ClassNamesProps {
  */
 export function ClassNames(props: ClassNamesProps): ReactElement
 
-declare module 'react' {
-  interface Attributes {
-    css?: Interpolation<Theme>
+type WithConditionalCSSProp<P> = 'className' extends keyof P
+  ? (P extends { className?: string } ? P & { css?: Interpolation<Theme> } : P)
+  : P
+
+// unpack all here to avoid infinite self-referencing when defining our own JSX namespace
+type ReactJSXElement = JSX.Element
+type ReactJSXElementClass = JSX.ElementClass
+type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty
+type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute
+type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
+type ReactJSXIntrinsicElements = JSX.IntrinsicElements
+
+export const jsx: typeof createElement
+export namespace jsx {
+  namespace JSX {
+    interface Element extends ReactJSXElement {}
+    interface ElementClass extends ReactJSXElementClass {}
+    interface ElementAttributesProperty
+      extends ReactJSXElementAttributesProperty {}
+    interface ElementChildrenAttribute
+      extends ReactJSXElementChildrenAttribute {}
+
+    type LibraryManagedAttributes<C, P> = C extends React.ComponentType<infer T>
+      ? WithConditionalCSSProp<T>
+      : WithConditionalCSSProp<ReactJSXLibraryManagedAttributes<C, P>>
+
+    interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
+    interface IntrinsicClassAttributes<T>
+      extends ReactJSXIntrinsicClassAttributes<T> {}
+
+    type IntrinsicElements = {
+      [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+        css?: Interpolation<Theme>
+      }
+    }
   }
 }

packages/react/types/tests.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ComponentClass } from 'react'
+import * as React from 'react'
 import {
   ClassNames,
   Global,
@@ -58,7 +58,10 @@ const ComponentWithCache = withEmotionCache((_props: {}, cache) => {
   `}
 />
 
-declare const MyComponent: ComponentClass<{ className?: string; world: string }>
+declare const MyComponent: React.ComponentClass<{
+  className?: string
+  world: string
+}>
 ;<MyComponent
   css={{
     backgroundColor: 'black'
@@ -125,3 +128,51 @@ const anim1 = keyframes`
     color: ${theme.secondaryColor};
   `}
 />
+
+{
+  const CompWithClassNameSupport = (_props: {
+    prop1: string
+    className?: string
+  }) => {
+    return null
+  }
+  ;<CompWithClassNameSupport
+    prop1="test"
+    css={{
+      backgroundColor: 'hotpink'
+    }}
+  />
+
+  const MemoedCompWithClassNameSupport = React.memo(CompWithClassNameSupport)
+  ;<MemoedCompWithClassNameSupport
+    prop1="test"
+    css={{
+      backgroundColor: 'hotpink'
+    }}
+  />
+}
+
+{
+  const CompWithoutClassNameSupport = (_props: { prop1: string }) => {
+    return null
+  }
+
+  // TS@next reports an error on a different line, so this has to be in a single line so `test:typescript` can validate this on all TS versions correctly
+  // $ExpectError
+  ;<CompWithoutClassNameSupport prop1="test" css={{ backgroundColor: 'hotpink' }} />
+
+  const MemoedCompWithoutClassNameSupport = React.memo(
+    CompWithoutClassNameSupport
+  )
+  // TS@next reports an error on a different line, so this has to be in a single line so `test:typescript` can validate this on all TS versions correctly
+  // $ExpectError
+  ;<MemoedCompWithoutClassNameSupport prop1="test" css={{ backgroundColor: 'hotpink' }} />
+}
+
+{
+  const CompWithoutProps = (_props: {}) => {
+    return null
+  }
+  // $ExpectError
+  ;<CompWithoutProps css={{ backgroundColor: 'hotpink' }} />
+}

packages/react/types/tsconfig.json

@@ -3,10 +3,7 @@
     "baseUrl": "../",
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
-    "lib": [
-      "es6",
-      "dom"
-    ],
+    "lib": ["es6", "dom"],
     "module": "commonjs",
     "noEmit": true,
     "noImplicitAny": true,
@@ -15,13 +12,9 @@
     "strictNullChecks": true,
     "strictFunctionTypes": true,
     "target": "es5",
-    "typeRoots": [
-      "../"
-    ],
+    "typeRoots": ["../"],
     "types": []
   },
-  "include": [
-    "./*.ts",
-    "./*.tsx"
-  ]
+  "include": ["./*.ts", "./*.tsx"],
+  "exclude": ["./css-prop.d.ts"]
 }

packages/react/types/tslint.json

@@ -20,6 +20,8 @@
     ],
     "no-null-undefined-union": false,
     "no-object-literal-type-assertion": false,
-    "no-unnecessary-generics": false
+    "no-unnecessary-generics": false,
+    "no-empty-interface": false,
+    "strict-export-declare-modifiers": false
   }
 }