Merge branch 'master' into typescript-css-prop

packages/emotion-theming/package.json

@@ -4,12 +4,15 @@
   "description": "A CSS-in-JS theming solution, inspired by styled-components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
+  "types": "typings/emotion-theming.d.ts",
   "files": [
     "src",
     "dist"
   ],
   "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",
@@ -34,10 +37,12 @@
   },
   "homepage": "https://github.com/emotion-js/emotion#readme",
   "devDependencies": {
+    "@types/react": "^16.0.14",
     "cross-env": "^5.0.1",
     "prop-types": "^15.5.8",
     "rimraf": "^2.6.1",
-    "rollup": "^0.43.0"
+    "rollup": "^0.43.0",
+    "typescript": "^2.5.3"
   },
   "dependencies": {
     "hoist-non-react-statics": "^2.3.1"

packages/emotion-theming/typescript_tests/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "declaration": true,
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "jsx": "react"
+  },
+  "include": [
+    "./*.ts",
+    "./*.tsx"
+  ]
+}

packages/emotion-theming/typescript_tests/typescript_tests.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import * as emotionTheming from '../';
+import { ThemeProvider, withTheme, EmotionThemingModule } from '../';
+
+const theme = { primary: "green", secondary: "white" };
+const CompSFC = (props: { prop: boolean }) => <div />;
+declare class CompC extends React.Component<{ prop: boolean }> { }
+
+/**
+ * Theme Provider with no type
+ */
+<ThemeProvider theme={theme} />; 
+<ThemeProvider theme={() => theme} />;
+
+/**
+ * withTheme with no type
+ */
+const ThemedSFC = withTheme(CompSFC);
+<ThemedSFC theme={theme} prop />;
+<ThemedSFC prop />;
+
+const ThemedComp = withTheme(CompC);
+<ThemedComp theme={theme} prop />;
+<ThemedComp prop />
+
+const { ThemeProvider: TypedThemeProvider, withTheme: typedWithTheme } = emotionTheming as EmotionThemingModule<typeof theme>;
+
+<TypedThemeProvider theme={theme} />;
+<TypedThemeProvider theme={{ primary: "white" }} />;
+<TypedThemeProvider theme={theme => ({ primary: theme.primary, secondary: theme.secondary })} />;
+
+const TypedThemedSFC = typedWithTheme(ThemedSFC);
+<TypedThemedSFC prop />;
+<TypedThemedSFC theme={theme} prop/>
+
+const TypedCompSFC = typedWithTheme(CompSFC);
+<TypedCompSFC prop />;
+<TypedCompSFC theme={theme} prop />;

packages/emotion-theming/typings/emotion-theming.d.ts

@@ -0,0 +1,20 @@
+import { ComponentClass, SFC } from "react";
+
+export type OptionalThemeProps<Props, Theme> = Props & { theme?: Theme };
+
+export interface ThemeProviderProps<Theme> {
+    theme: Partial<Theme> | { (theme: Theme): Theme };
+}
+
+export type ThemeProviderComponent<Theme> = ComponentClass<ThemeProviderProps<Theme>>;
+export const ThemeProvider: ThemeProviderComponent<object>;
+
+/**
+ * Inject theme into component
+ */
+export function withTheme<Props, Theme = {}>(component: ComponentClass<Props> | SFC<Props>): ComponentClass<OptionalThemeProps<Props, Theme>>;
+
+export interface EmotionThemingModule<Theme> {
+    ThemeProvider: ThemeProviderComponent<Theme>;
+    withTheme<Props>(component: ComponentClass<Props> | SFC<Props>): ComponentClass<OptionalThemeProps<Props, Theme>>;
+}

packages/react-emotion/typescript_tests/typescript_tests.tsx

@@ -66,6 +66,8 @@ const SFCComponent: React.StatelessComponent<SFCComponentProps> = props => (
   <div className={props.className}>{props.children} {props.foo}</div>
 );
 
+declare class MyClassC extends React.Component<CustomProps2> { };
+
 // infer SFCComponentProps
 Component = styled(SFCComponent)({ color: 'red' });
 mount = <Component foo="bar" />;
@@ -74,6 +76,9 @@ mount = <Component foo="bar" />;
 Component = styled(SFCComponent)`color: red`;
 mount = <Component foo="bar" />;
 
+Component = styled(MyClassC) ``;
+mount = <Component customProp="abc" />;
+
 // do not infer SFCComponentProps with pass CustomProps, need to pass both
 Component = styled<CustomProps2 & SFCComponentProps>(SFCComponent)({ 
   color: 'red',

packages/react-emotion/typings/react-emotion.d.ts

@@ -1,4 +1,4 @@
-import { StatelessComponent, Component as ClassComponent, CSSProperties } from 'react'
+import { StatelessComponent, ComponentClass, CSSProperties } from 'react'
 import { Interpolation as EmotionInterpolation } from 'emotion'
 
 export * from 'emotion'
@@ -27,7 +27,7 @@ export interface Options {
 }
 
 type Component<Props> =
-  | ClassComponent<Props>
+  | ComponentClass<Props>
   | StatelessComponent<Props>
 
 export type ThemedProps<Props, Theme> = Props & {
@@ -36,7 +36,7 @@ export type ThemedProps<Props, Theme> = Props & {
 
 export interface StyledComponent<Props, Theme, IntrinsicProps>
   extends
-    ClassComponent<Props & IntrinsicProps>,
+    ComponentClass<Props & IntrinsicProps>,
     StatelessComponent<Props & IntrinsicProps>
 {
   withComponent<Tag extends keyof JSX.IntrinsicElements>(tag: Tag):
@@ -95,7 +95,7 @@ type ShorthandsFactories<Theme> = {
 export interface ThemedReactEmotionInterface<Theme> extends ShorthandsFactories<Theme> {
   // overload for dom tag
   <Props, Tag extends keyof JSX.IntrinsicElements>(
-    tag: Tag | Component<Props>,
+    tag: Tag,
     options?: Options,
   ): CreateStyled<Props, Theme, JSX.IntrinsicElements[Tag]>