diff --git a/types/styled-jsx/css.d.ts b/types/styled-jsx/css.d.ts new file mode 100644 index 0000000000..55a9533bb8 --- /dev/null +++ b/types/styled-jsx/css.d.ts @@ -0,0 +1,4 @@ +type Tag = (chunks: TemplateStringsArray, ...args: any[]) => string; + +declare let css: Tag; +export default css; diff --git a/types/styled-jsx/index.d.ts b/types/styled-jsx/index.d.ts index dc7a46d3d0..5072cdc7b9 100644 --- a/types/styled-jsx/index.d.ts +++ b/types/styled-jsx/index.d.ts @@ -6,6 +6,9 @@ import "react"; +import * as css from "./css"; +import * as server from "./server"; + declare module "react" { interface StyleHTMLAttributes extends HTMLAttributes { jsx?: boolean; diff --git a/types/styled-jsx/server.d.ts b/types/styled-jsx/server.d.ts new file mode 100644 index 0000000000..7d67967842 --- /dev/null +++ b/types/styled-jsx/server.d.ts @@ -0,0 +1,7 @@ +import { ReactElement } from "react"; + +declare function flushToHTML(): string; +declare function flushToReact(): ReactElement[]; + +export { flushToHTML }; +export default flushToReact; diff --git a/types/styled-jsx/styled-jsx-tests.tsx b/types/styled-jsx/styled-jsx-tests.tsx index 65081d9bbd..ada37c2248 100644 --- a/types/styled-jsx/styled-jsx-tests.tsx +++ b/types/styled-jsx/styled-jsx-tests.tsx @@ -1,3 +1,7 @@ +import * as React from 'react'; +import css from 'styled-jsx/css'; +import flushToReact, { flushToHTML } from 'styled-jsx/server'; + const styled = (
); + +const buttonColor = 'red'; +const separatedCSS = css`button { color: ${buttonColor}; }`; +const withSeparatedCSS = ( +
+ +
+); + +const stylesChildren = flushToReact(); +const jsxToRender = ( + { stylesChildren } +); + +const stylesAsString: string = flushToHTML(); +const html = ` + ${stylesAsString} +`;