Restructured types to greatly reduce number of types created during c…

.changeset/long-apes-admire/changes.json

@@ -0,0 +1,31 @@
+{
+  "releases": [
+    { "name": "@emotion/css", "type": "minor" },
+    { "name": "emotion-theming", "type": "minor" },
+    { "name": "@emotion/serialize", "type": "minor" },
+    { "name": "@emotion/styled-base", "type": "minor" },
+    { "name": "@emotion/styled", "type": "minor" }
+  ],
+  "dependents": [
+    {
+      "name": "babel-plugin-emotion",
+      "type": "patch",
+      "dependencies": ["@emotion/serialize"]
+    },
+    {
+      "name": "@emotion/core",
+      "type": "patch",
+      "dependencies": [
+        "@emotion/css",
+        "emotion-theming",
+        "@emotion/serialize",
+        "@emotion/styled"
+      ]
+    },
+    {
+      "name": "create-emotion",
+      "type": "patch",
+      "dependencies": ["@emotion/serialize"]
+    }
+  ]
+}

.changeset/long-apes-admire/changes.md

@@ -0,0 +1,31 @@
+TypeScript types have been restructured. These changes:
+
+- Reduce build times when using emotion
+- In many cases remove the need for manually specifying generic parameters for your emotion components.
+
+If you encounter build issues after upgrade, try removing any manually specified generic types and let them be inferred. Otherwise refer to the breaking changes list below.
+
+## Improvements
+
+- useTheme added to EmotionTheming interface and can now create your own closed variation of withTheme. More information in the docs under the theming section.
+- Union types as props are better supported and should be inferred properly
+- Build times should be reduced significantly in larger projects.
+
+## Breaking changes
+
+- withTheme can now have the Theme type specified when calling it. For example `withTheme<MyTheme>(MyComponent)`
+
+  **Breaking change:** Generic argument changed, if you were specifying the ComponentType you will need to remove the generic parameter. Recommend following example setup in the TypeScript docs under theming section
+
+- `css` function has been restricted to prevent passing of invalid types
+- `CreateStyled` functions no longer take a second `ExtraProps` argument. Instead move it to after the create styled call. For example
+
+  `styled<typeof MyComponent, ExtraProps>(MyComponent)({})`  
+  to  
+  `styled(MyComponent)<ExtraProps>({})`
+
+- `StyledComponent` type no longer supports the third generic `Theme` parameter. Instead add the `theme` prop to the first `Props` argument. For example:
+
+  `StyledComponent<Props, {}, MyTheme>`  
+  to  
+  `StyledComponent<Props & { theme?: MyTheme }>`

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
   flow:
     docker:
-      - image: circleci/node:10.6.0-browsers
+      - image: circleci/node:10.16.3-browsers
     working_directory: ~/repo
     steps:
       - checkout
@@ -25,7 +25,7 @@ jobs:
 
   test:
     docker:
-      - image: circleci/node:10.6.0
+      - image: circleci/node:10.16.3
     working_directory: ~/repo
     steps:
       - checkout
@@ -48,7 +48,7 @@ jobs:
 
   test_dist:
     docker:
-      - image: circleci/node:10.6.0
+      - image: circleci/node:10.16.3
     working_directory: ~/repo
     steps:
       - checkout
@@ -66,7 +66,7 @@ jobs:
 
   lint_and_typescript:
     docker:
-      - image: circleci/node:10.6.0
+      - image: circleci/node:10.16.3
     working_directory: ~/repo
     steps:
       - checkout
@@ -77,6 +77,7 @@ jobs:
             - v4-dependencies-
       - run: yarn install --pure-lockfile
       - run: yarn lint:check
+      - run: yarn test:typescript
 
 workflows:
   version: 2

docs/typescript.mdx

@@ -39,10 +39,21 @@ To make the css prop work with pure TypeScript (without babel plugin) you need t
 
 ```tsx
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core'
+import { jsx } from '@emotion/core'
+
+<div css={{ background: 'black' }} />
 ```
 
 As a result you may be not able to use react fragment shorthand syntax - `<></>`, but still you can use `<Fragment></Fragment>`.
+This is a limitation of the TypeScript compiler not being able to independently specify jsx pragma and jsxFrag pragma.
+
+You can still use the css helper and pass the className yourself (ensure you are importing from the `@emotion` package, not `@emotion/core`).
+
+```tsx
+import { css } from '@emotion'
+
+<div className={css({ background: 'black' })} />
+```
 
 ## @emotion/styled
 
@@ -103,28 +114,20 @@ type ImageProps = {
   width: number
 }
 
-const Image0 = styled('div')`
-  width: ${(props: ImageProps) => props.width};
-  background: url(${(props: ImageProps) => props.src})
-    center center;
+// Using a css block
+const Image0 = styled.div<ImageProps>`
+  width: ${props => props.width};
+  background: url(${props => props.src}) center center;
+  background-size: contain;
+`
+const Image0 = styled('div')<ImageProps>`
+  width: ${props => props.width};
+  background: url(${props => props.src}) center center;
   background-size: contain;
 `
 
 // Or with object styles
-
-const Image1 = styled('div')(
-  {
-    backgroundSize: 'contain'
-  },
-  (props: ImageProps) => ({
-    width: props.width,
-    background: `url(${props.src}) center center`
-  })
-)
-
-// Or with a generic type
-
-const Image2 = styled('div')<ImageProps>(
+const Image1 = styled('div')<ImageProps>(
   {
     backgroundSize: 'contain'
   },
@@ -133,36 +136,28 @@ const Image2 = styled('div')<ImageProps>(
     background: `url(${props.src}) center center`
   })
 )
-
-// TS 2.9+ only
-const Image3 = styled.div<ImageProps>`
-  width: ${(props: ImageProps) => props.width};
-  background: url(${(props: ImageProps) => props.src})
-    center center;
-  background-size: contain;
-`
 ```
 
-- For TypeScript <2.9, the generic type version only works with object styles due to https://github.com/Microsoft/TypeScript/issues/11947.
-
 ### React Components
 
+Emotion can also style React components and will infer component props as expected.
+
 ```tsx
-import React, { SFC } from 'react'
+import React, { FC } from 'react'
 import styled from '@emotion/styled'
 
-type ComponentProps = {
+interface ComponentProps {
   className?: string
   label: string
 }
 
-const Component: SFC<ComponentProps> = ({
+const Component: FC<ComponentProps> = ({
   label,
   className
 }) => <div className={className}>{label}</div>
 
 const StyledComponent0 = styled(Component)`
-  color: red;
+  color: ${props => label === 'Important' ? 'red' : 'green'};
 `
 
 const StyledComponent1 = styled(Component)({
@@ -171,7 +166,7 @@ const StyledComponent1 = styled(Component)({
 
 const App = () => (
   <div>
-    <StyledComponent0 label="Yea! No need to re-type this label prop." />
+    <StyledComponent0 label="Important" />
     <StyledComponent1 label="Yea! No need to re-type this label prop." />
   </div>
 )
@@ -180,37 +175,32 @@ const App = () => (
 ### Passing props when styling a React component
 
 ```tsx
-import React, { SFC } from 'react'
+import React, { FC } from 'react'
 import styled from '@emotion/styled'
 
-type ComponentProps = {
+interface ComponentProps {
   className?: string
   label: string
 }
 
-const Component: SFC<ComponentProps> = ({
+const Component: FC<ComponentProps> = ({
   label,
   className
 }) => <div className={className}>{label}</div>
 
-type StyledComponentProps = {
+interface StyledComponentProps {
   bgColor: string
 }
 
-const StyledComponent0 = styled(Component)`
+const StyledComponent0 = styled(Component)<StyledComponentProps>`
   color: red;
-  background: ${(props: StyledComponentProps) =>
-    props.bgColor};
+  background: ${props => props.label ? props.bgColor : 'white'};
 `
-
-const StyledComponent1 = styled(Component)<
-  StyledComponentProps
->(
-  {
-    color: 'red'
-  },
+// or
+const StyledComponent1 = styled(Component)<StyledComponentProps>(
   props => ({
-    background: props.bgColor
+    color: 'red'
+    background: props.label ? props.bgColor : 'white'
   })
 )
 
@@ -237,6 +227,7 @@ _styled.tsx_
 
 ```tsx
 import styled, { CreateStyled } from '@emotion/styled'
+import * as emotionTheming from 'emotion-theming'
 
 type Theme = {
   color: {
@@ -248,6 +239,10 @@ type Theme = {
 }
 
 export default styled as CreateStyled<Theme>
+
+// You can also create themed versions of all the other theme helpers and hooks
+const { ThemeProvider, withTheme, useTheme } = emotionTheming as emotionTheming.EmotionTheming<Theme>
+export { ThemeProvider, withTheme, useTheme }
 ```
 
 _Button.tsx_
@@ -263,3 +258,27 @@ const Button = styled('button')`
 
 export default Button
 ```
+
+### TypeScript < 2.9
+
+For Typescript <2.9, the generic type version only works with object styles due to https://github.com/Microsoft/TypeScript/issues/11947.
+
+You can work around this by specifying the prop types in your style callback:
+
+``` ts
+const StyledComponent0 = styled(Component)`
+  color: red;
+  background: ${(props: StyledComponentProps) =>
+    props.bgColor};
+`
+```
+
+NOTE: This approach you will have to perform the intersection with the component props yourself to get at the component props
+
+``` ts
+const StyledComponent0 = styled(Component)`
+  color: red;
+  background: ${(props: StyledComponentProps & ComponentProps) =>
+    props.bgColor};
+`
+```

packages/babel-plugin-emotion/package.json

@@ -9,6 +9,9 @@
     "lib",
     "dist"
   ],
+  "scripts": {
+    "test:typescript": "exit 0"
+  },
   "dependencies": {
     "@babel/helper-module-imports": "^7.0.0",
     "@emotion/hash": "0.7.3",

packages/babel-plugin-jsx-pragmatic/package.json

@@ -6,6 +6,9 @@
   "module": "dist/babel-plugin-jsx-pragmatic.esm.js",
   "license": "MIT",
   "repository": "https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-jsx-pragmatic",
+  "scripts": {
+    "test:typescript": "exit 0"
+  },
   "dependencies": {
     "@babel/plugin-syntax-jsx": "^7.2.0"
   },

packages/babel-preset-css-prop/package.json

@@ -6,6 +6,9 @@
   "module": "dist/babel-preset-css-prop.esm.js",
   "license": "MIT",
   "repository": "https://github.com/emotion-js/emotion/tree/master/packages/babel-preset-css-prop",
+  "scripts": {
+    "test:typescript": "exit 0"
+  },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.3.0",
     "@babel/runtime": "^7.5.5",

packages/core/types/index.d.ts

@@ -9,7 +9,7 @@ import {
   ComponentClass,
   Context,
   Provider,
-  SFC,
+  FC,
   ReactElement,
   ReactNode,
   Ref,
@@ -30,7 +30,7 @@ export const ThemeContext: Context<object>
 export const CacheProvider: Provider<EmotionCache>
 export function withEmotionCache<Props, RefType = any>(
   func: (props: Props, context: EmotionCache, ref: Ref<RefType>) => ReactNode
-): SFC<Props & ClassAttributes<RefType>>
+): FC<Props & ClassAttributes<RefType>>
 
 export const jsx: typeof createElement
 
@@ -45,7 +45,9 @@ export interface GlobalProps<Theme> {
  * @desc
  * JSX generic are supported only after [email protected]
  */
-export function Global<Theme = any>(props: GlobalProps<Theme>): ReactElement
+export function Global<Theme extends {} = any>(
+  props: GlobalProps<Theme>
+): ReactElement
 
 export function keyframes(
   template: TemplateStringsArray,
@@ -75,7 +77,7 @@ export interface ClassNamesProps<Theme> {
  * @desc
  * JSX generic are supported only after [email protected]
  */
-export function ClassNames<Theme = any>(
+export function ClassNames<Theme extends {} = any>(
   props: ClassNamesProps<Theme>
 ): ReactElement
 

packages/core/types/tests.tsx

@@ -4,8 +4,6 @@ import {
   ClassNames,
   ClassNamesContent,
   Global,
-  Interpolation,
-  CacheProvider,
   css,
   jsx,
   keyframes,