Enable css prop in Preact with TypeScript

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
  */