Added TypeScript definitions for css prop.

emotion-js · Oct 19, 2017 · 80e54df · 80e54df
1 parent acfd9a5
commit 80e54df
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/packages/emotion/package.json b/packages/emotion/package.json
@@ -30,6 +30,7 @@
     "stylis-rule-sheet": "^0.0.5"
   },
   "devDependencies": {
+    "@types/react": "^16.0.15",
     "babel-cli": "^6.24.1",
     "babel-plugin-transform-define": "^1.3.0",
     "cross-env": "^5.0.5",

diff --git a/packages/emotion/typescript_tests/tsconfig.json b/packages/emotion/typescript_tests/tsconfig.json
@@ -4,7 +4,8 @@
     "module": "es2015",
     "strict": true,
     "allowSyntheticDefaultImports": true,
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "jsx": "react"
   },
   "include": [
     "./*.ts",

diff --git a/...tion/typescript_tests/typescript_tests.ts → ...ion/typescript_tests/typescript_tests.tsx b/...tion/typescript_tests/typescript_tests.ts → ...ion/typescript_tests/typescript_tests.tsx
@@ -8,6 +8,7 @@ import {
   hydrate,
   cx
 } from '../';
+import React from 'react';
 
 sheet.speedy(true);
 sheet.inject();
@@ -77,3 +78,10 @@ const cxResult: string = cx(() => () => [
 ]);
 
 hydrate(['css-123', 'css-456']);
+
+/*
+ * Can use css prop, transpiled by babel plugin
+ */
+
+<div css={`color: red;`} />;
+<div css={{ color: 'red' }} />;
diff --git a/packages/emotion/typings/emotion.d.ts b/packages/emotion/typings/emotion.d.ts
@@ -44,4 +44,10 @@ export function getRegisteredStyles(registeredStyles: string[], classNames: stri
 
 export function cx(...interpolations: Interpolation[]): string;
 
-export function hydrate(ids: string[]): void;
+export function hydrate(ids: string[]): void;
+
+declare module 'react' {
+  interface HTMLAttributes<T> {
+    css?: Interpolation;
+  }
+}