import { makeStyles } from "./makeStyles";

const useStyles = makeStyles<{ color: "red" | "blue" }>()(
    (theme, { color }) => ({
        "root": {
            color,
            "&:hover": {
                "backgroundColor": theme.primaryColor,
            },
        },
    }),
);

export function MyComponent(props: Props) {
    const { className } = props;

    const [color, setColor] = useState<"red" | "blue">("red");

    const { classes, cx } = useStyles({ color });

    return <span className={cx(classes.root, className)}>hello world</span>;
}

//Here we ca import useStyles directly instead of generating it from makeStyles.
import { useStyles } from "./makeStyles";

export function MyComponent(props: Props) {
    const { className } = props;

    const { cx, css, theme } = useStyles();

    return (
        <span className={cx(css({ "color": theme.primaryColor }), className)}>
            hello world
        </span>
    );
}

import { GlobalStyles } from "tss-react";

function MyComponent() {
    return (
        <>
            <GlobalStyles
                styles={{
                    "body": {
                        "backgroundColor": "pink",
                    },
                    ".foo": {
                        "color": "cyan",
                    },
                }}
            />
            <h1 className="foo">This text will be cyan</h1>
        </>
    );
}

import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
/* OR:
import createCache from "tss-react/@emotion/cache";
*/

const myCache = createCache({
    "key": "my-prefix-key",
    //...
});

render(<CacheProvider value={myCache}>{/* ... */}</CacheProvider>);

{
  "parent": {
      "padding": 30,
      "&:hover $child": {
          "backgroundColor": "red"
      },
  },
  "child": {
      "backgroundColor": "blue"
  }
}
//...
<div className={classes.parent}>
    <div className={classes.children}>
        Background turns red when the mouse is hover the parent
    </div>
</div>

const useStyles = makeStyles()((_theme, _params, css) => {
    const child = {
        "background": "blue",
    } as const; //<- In many case 'as const' must be used so that it can be inferred as CSSObject

    return {
        "parent": {
            "padding": 30,
            [`&:hover .${css(child)}`]: {
                "background": "red",
            },
        },
        child,
    };
});

export function App() {
    const { classes } = useStyles();

    return (
        <div className={classes.parent}>
            <div className={classes.child}>
                Background turns red when mouse is hover the parent.
            </div>
        </div>
    );
}

import { createDocument } from "tss-react/nextJs";

const { Document } = createDocument();

/*
If you use custom cache you should provide it here:
Example for mui v5 users:
import { muiCache } from "...";
import { tssCache } from "...";

const { Document } = createDocument({ "caches": [ muiCache, tssCache ] });
*/

export default Document;

import Document from "next/document";
import type { DocumentContext } from "next/document";
import { createGetInitialProps } from "tss-react/nextJs";

const { getInitialProps } = createGetInitialProps();

/*
If you use custom cache you should provide it here:
Example for mui v5 users:
import { muiCache } from "...";
import { tssCache } from "...";

const { Document } = createDocument({ "caches": [ muiCache, tssCache ] });
*/

export default class AppDocument extends Document {
    static async getInitialProps(ctx: DocumentContext) {
        return getInitialProps(ctx);
    }

    //...Rest of your class...
}

import Document from "next/document";
import type { DocumentContext } from "next/document";
import { createPageHtmlToStyleTags } from "tss-react/nextJs";

const { pageHtmlToStyleTags } = createPageHtmlToStyleTags();
/*
If you use custom cache you should provide it here:
Example for mui v5 users:
import { muiCache } from "...";
import { tssCache } from "...";

const { Document } = createDocument({ "caches": [ muiCache, tssCache ] });
*/

export default class AppDocument extends Document {
    static async getInitialProps(ctx: DocumentContext) {
        const page = await ctx.renderPage();

        const initialProps = await Document.getInitialProps(ctx);

        return {
            ...initialProps,
            "styles": (
                <>
                    {initialProps.styles}
                    {pageHtmlToStyleTags({ "pageHtml": page.html })}
                </>
            ),
        };
    }

    //...Rest of your class...
}

import { renderToString } from "react-dom/server";
import createEmotionServer from "@emotion/server/create-instance";

import { getCache } from "tss-react/cache";
import { createMakeStyles } from "tss-react";

const emotionServers = [
    getCache(), //If you use custom cache(s) provide it/them here instead of the default, see example below.
].map(createEmotionServer);

/*
import { muiCache } from "...";
import { tssCache } from "...";

const emotionServers = [
    muiCache,
    tssCache
].map(createEmotionServer);
*/

const element = <App />;

const html = renderToString(element);

res.status(200).header("Content-Type", "text/html").send(`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My site</title>
    ${emotionServers
        .map(({ extractCriticalToChunks, constructStyleTagsFromChunks }) =>
            constructStyleTagsFromChunks(extractCriticalToChunks(html)),
        )
        .join("")}
</head>
<body>
    <div id="root">${html}</div>
    <script src="./bundle.js"></script>
</body>
</html>`);