Merge pull request #106 from ruedap/ts-css-prop

Improve module declaration of css prop for TypeScript

components/templates/styleguide/index.tsx

@@ -9,6 +9,7 @@ const Styleguide = () => {
       <FooBar />
       <FooBarTag4 />
       <Styled.Title>Styleguide</Styled.Title>
+      <div css={Styled.prop}>This is css prop</div>
       <Styled.Tag1>Cool Styles</Styled.Tag1>
       <Styled.Tag2>
         With <code>:hover</code>.

components/templates/styleguide/styled.ts

@@ -28,6 +28,11 @@ const hover = css`
   }
 `
 
+export const prop = css`
+  font-size: 200%;
+  color: indigo;
+`
+
 export const bounce = keyframes`
   from {
     transform: scale(1.01);

pages/_app.tsx

@@ -1,6 +1,3 @@
-// To solve the issue: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245
-/// <reference types="styled-components/cssprop" />
-
 import { AppProps } from 'next/app'
 import Router from 'next/router'
 import { ThemeProvider, DefaultTheme } from 'styled-components'

types/cssprop.d.ts

@@ -0,0 +1,9 @@
+// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245
+// https://github.com/styled-components/styled-components/issues/2528#issuecomment-509780963
+import { CSSProp } from 'styled-components'
+
+declare module 'react' {
+  interface HTMLAttributes<T> extends DOMAttributes<T> {
+    css?: CSSProp
+  }
+}