mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-04-22 11:57:33 +08:00
Add types for styled-jsx/server and styled-jsx/css (#22516)
This commit is contained in:
committed by
Mohamed Hegazy
parent
f668bd5740
commit
d2618d1a1e
4
types/styled-jsx/css.d.ts
vendored
Normal file
4
types/styled-jsx/css.d.ts
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
type Tag = (chunks: TemplateStringsArray, ...args: any[]) => string;
|
||||
|
||||
declare let css: Tag;
|
||||
export default css;
|
||||
3
types/styled-jsx/index.d.ts
vendored
3
types/styled-jsx/index.d.ts
vendored
@@ -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
7
types/styled-jsx/server.d.ts
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
import { ReactElement } from "react";
|
||||
|
||||
declare function flushToHTML(): string;
|
||||
declare function flushToReact<T>(): ReactElement<T>[];
|
||||
|
||||
export { flushToHTML };
|
||||
export default flushToReact;
|
||||
@@ -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>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user