Add types for styled-jsx/server and styled-jsx/css (#22516)

This commit is contained in:
Andrei Volchenko
2018-01-02 23:20:00 +03:00
committed by Mohamed Hegazy
parent f668bd5740
commit d2618d1a1e
4 changed files with 36 additions and 0 deletions

4
types/styled-jsx/css.d.ts vendored Normal file
View File

@@ -0,0 +1,4 @@
type Tag = (chunks: TemplateStringsArray, ...args: any[]) => string;
declare let css: Tag;
export default css;

View File

@@ -6,6 +6,9 @@
import "react";
import * as css from "./css";
import * as server from "./server";
declare module "react" {
interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
jsx?: boolean;

7
types/styled-jsx/server.d.ts vendored Normal file
View File

@@ -0,0 +1,7 @@
import { ReactElement } from "react";
declare function flushToHTML(): string;
declare function flushToReact<T>(): ReactElement<T>[];
export { flushToHTML };
export default flushToReact;

View File

@@ -1,3 +1,7 @@
import * as React from 'react';
import css from 'styled-jsx/css';
import flushToReact, { flushToHTML } from 'styled-jsx/server';
const styled = (
<div>
<style jsx>{`
@@ -13,3 +17,21 @@ const styledGlobal = (
`}</style>
</div>
);
const buttonColor = 'red';
const separatedCSS = css`button { color: ${buttonColor}; }`;
const withSeparatedCSS = (
<div>
<style jsx>{separatedCSS}</style>
</div>
);
const stylesChildren = flushToReact();
const jsxToRender = (
<head>{ stylesChildren }</head>
);
const stylesAsString: string = flushToHTML();
const html = `
<head>${stylesAsString}</head>
`;