From ac1bb8a78cd2fc8217b9960c33f3809106265664 Mon Sep 17 00:00:00 2001
From: Aaron Jensen <aaronjensen@gmail.com>
Date: Tue, 26 Jun 2018 00:26:00 -0700
Subject: [PATCH] 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 https://github.com/emotion-js/emotion/issues/693#issuecomment-397858379

<!-- 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 -->
---
 .../create-emotion-styled/types/common.d.ts   |  2 +-
 packages/create-emotion-styled/types/test.tsx |  7 +++++++
 packages/create-emotion/types/index.d.ts      | 15 +++++++++++++++
 packages/emotion/types/index.d.ts             |  6 ------
 packages/preact-emotion/types/test.tsx        | 19 +++++++++++++++++++
 packages/react-emotion/types/tests.tsx        | 19 +++++++++++++++++++
 6 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/packages/create-emotion-styled/types/common.d.ts b/packages/create-emotion-styled/types/common.d.ts
index 52fbea3a8..11cb5abcd 100644
--- a/packages/create-emotion-styled/types/common.d.ts
+++ b/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>;
diff --git a/packages/create-emotion-styled/types/test.tsx b/packages/create-emotion-styled/types/test.tsx
index dfd29f3b6..ec8a9c076 100644
--- a/packages/create-emotion-styled/types/test.tsx
+++ b/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;
+  `}
+/>;
diff --git a/packages/create-emotion/types/index.d.ts b/packages/create-emotion/types/index.d.ts
index 2b0331f14..9a8b87f75 100644
--- a/packages/create-emotion/types/index.d.ts
+++ b/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;
+    }
+  }
+}
diff --git a/packages/emotion/types/index.d.ts b/packages/emotion/types/index.d.ts
index a186a17c4..6b912f9b4 100644
--- a/packages/emotion/types/index.d.ts
+++ b/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;
-  }
-}
diff --git a/packages/preact-emotion/types/test.tsx b/packages/preact-emotion/types/test.tsx
index d31a33654..389f6ab15 100644
--- a/packages/preact-emotion/types/test.tsx
+++ b/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
  */
diff --git a/packages/react-emotion/types/tests.tsx b/packages/react-emotion/types/tests.tsx
index 82e68a4cd..2f6b953d4 100644
--- a/packages/react-emotion/types/tests.tsx
+++ b/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
  */