Enable css prop in Preact with TypeScript (#729)

<!--
Thanks for your interest in the project. I appreciate bugs filed and PRs submitted!

Please make sure that you are familiar with and follow the Code of Conduct for
this project (found in the CODE_OF_CONDUCT.md file).

Also, please make sure you're familiar with and follow the instructions in the
contributing guidelines (found in the CONTRIBUTING.md file).

If you're new to contributing to open source projects, you might find this free
video course helpful: http://kcd.im/pull-request

Please fill out the information below to expedite the review and (hopefully)
merge of your pull request!
-->

<!-- What changes are being made? (What feature/bug is being fixed here?) -->
**What**:
This adds typescript tests for the css prop for both React and Preact. The
Preact tests are currently failing, so they'd need to be fixed before this can
be merged. See #693 (comment)

<!-- Why are these changes necessary? -->
**Why**:

The tests weren't there before and the css prop only worked with React.

<!-- How were these changes implemented? -->
**How**:

I'm not sure how to answer this question.

<!-- Have you done all of these things?  -->
**Checklist**:
<!-- add "N/A" to the end of each line that's irrelevant to your changes -->
<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
- [ ] Documentation N/A
- [x] Tests
- [x] Code complete

<!-- feel free to add additional comments -->

<!-- Please add a `Tag:` prefixed label from the labels so that this PR shows up in the changelog -->

packages/create-emotion-styled/types/common.d.ts

@@ -1,7 +1,7 @@
 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
 // TypeScript Version: 2.3
 
-import { Emotion, Interpolation as BaseInterpolation } from 'create-emotion';
+import { Emotion, Interpolation as BaseInterpolation, CSSObject } from 'create-emotion';
 
 export interface ArrayInterpolation<Props> extends Array<Interpolation<Props>> {}
 export type FunctionInterpolation<Props> = (props: Props, context: any) => Interpolation<Props>;

packages/create-emotion-styled/types/test.tsx

@@ -191,3 +191,10 @@ const ComposingComp = createStyled.div`
     color: black;
   }
 `;
+
+const CSSPropComp = createStyled.div();
+<CSSPropComp css={{ color: 'blue' }} />;
+<CSSPropComp css={`
+  color: blue;
+  `}
+/>;

packages/create-emotion/types/index.d.ts

@@ -90,3 +90,18 @@ export interface EmotionOptions {
 }
 
 export default function createEmotion(context: EmotionContext, options?: EmotionOptions): Emotion;
+
+declare module 'react' {
+  interface HTMLAttributes<T> {
+    css?: Interpolation;
+  }
+}
+
+// Preact support for css prop
+declare global {
+  namespace JSX {
+    interface HTMLAttributes {
+      css?: Interpolation;
+    }
+  }
+}

packages/emotion/types/index.d.ts

@@ -15,9 +15,3 @@ 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<T> {
-    css?: Interpolation;
-  }
-}

packages/preact-emotion/types/test.tsx

@@ -157,6 +157,25 @@ mount = <Component innerRef={(element: HTMLDivElement) => {}} />;
 Component = Component.withComponent('input');
 mount = <Component innerRef={(element: HTMLInputElement) => {}} />;
 
+/**
+ * css prop
+ */
+Component = styled.div({ color: 'red' });
+mount = <Component css={{color: 'blue'}} />;
+mount = (
+  <Component css={`
+    color: blue;
+  `}
+  />
+);
+mount = <div css={{ color: 'blue' }} />;
+mount = (
+  <div css={`
+    color: blue;
+    `}
+  />
+);
+
 /*
  * Reference to other styled component
  */

packages/react-emotion/types/tests.tsx

@@ -153,6 +153,25 @@ mount = <Component innerRef={(element: HTMLDivElement) => {}} />;
 Component = Component.withComponent('input');
 mount = <Component innerRef={(element: HTMLInputElement) => {}} />;
 
+/**
+ * css prop
+ */
+Component = styled.div({ color: 'red' });
+mount = <Component css={{ color: 'blue' }} />;
+mount = (
+  <Component css={`
+    color: blue;
+    `}
+  />
+);
+mount = <div css={{ color: 'blue' }} />;
+mount = (
+  <div css={`
+    color: blue;
+    `}
+  />
+);
+
 /*
  * Reference to other styled component
  */