Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FOUC: Next.js 12.1.0 + @stitches/react 1.2.7

See original GitHub issue

Bug report

I’ve enter to problem with FOUC. I was searching on your stitches-site and found how you implemented fonts preloading and @font-face styles - https://github.com/modulz/stitches-site/blob/master/pages/_document.tsx

I’ve implemented it exactly like in this example, but still facing FOUC.

Also, there is some comment about font flashing - https://github.com/modulz/stitches-site/blob/master/pages/_app.tsx

_document.tsx:

import Document, { Html, Head, Main, NextScript } from "next/document";
import { getCssText } from "../stitches.config";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <meta charSet="UTF-8" />
          <style
            id="stitches"
            dangerouslySetInnerHTML={{ __html: getCssText() }}
          />
          <link
            rel="preload"
            href="/fonts/Merriweather-Bold.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Merriweather-Bold.woff"
            as="font"
            type="font/woff"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Merriweather-Regular.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Merriweather-Regular.woff"
            as="font"
            type="font/woff"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Merriweather-Light.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Merriweather-Light.woff"
            as="font"
            type="font/woff"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Merriweather-Italic.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Merriweather-Italic.woff"
            as="font"
            type="font/woff"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Montserrat-Bold.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Montserrat-Bold.woff"
            as="font"
            type="font/woff"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Montserrat-SemiBold.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Montserrat-SemiBold.woff"
            as="font"
            type="font/woff"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Montserrat-Regular.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Montserrat-Regular.woff"
            as="font"
            type="font/woff"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Montserrat-Light.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Montserrat-Light.woff"
            as="font"
            type="font/woff"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Montserrat-Italic.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/fonts/Montserrat-Italic.woff"
            as="font"
            type="font/woff"
            crossOrigin="anonymous"
          />
          <style
            dangerouslySetInnerHTML={{
              __html: `
@font-face {
  font-family: 'Merriweather';
  src: url(/fonts/Merriweather-Bold.woff2) format('woff2'),
    url(/fonts/Merriweather-Bold.woff) format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url(/fonts/Merriweather-Regular.woff2) format('woff2'),
    url(/fonts/Merriweather-Regular.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url(/fonts/Merriweather-Light.woff2) format('woff2'),
    url(/fonts/Merriweather-Light.woff) format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url(/fonts/Merriweather-Italic.woff2) format('woff2'),
    url(/fonts/Merriweather-Italic.woff) format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/fonts/Montserrat-Bold.woff2) format('woff2'),
    url(/fonts/Montserrat-Bold.woff) format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/fonts/Montserrat-SemiBold.woff2) format('woff2'),
    url(/fonts/Montserrat-SemiBold.woff) format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/fonts/Montserrat-Regular.woff2) format('woff2'),
    url(/fonts/Montserrat-Regular.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/fonts/Montserrat-Light.woff2) format('woff2'),
    url(/fonts/Montserrat-Light.woff) format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/fonts/Montserrat-Italic.woff2) format('woff2'),
    url(/fonts/Montserrat-Italic.woff) format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
`,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
export default MyDocument;

_app.tsx

import type { AppProps } from "next/app";
import dayjs from "dayjs";
import "dayjs/locale/sk";
import SimpleReactLightbox from "simple-react-lightbox";

import "normalize.css/normalize.css";
import "../styles/bootstrap-grid.scss";
import "../node_modules/swiper/swiper.min.css";
import globalStyles from "../styles/globalStyles";

dayjs.locale("sk");

function MyApp({ Component, pageProps }: AppProps) {
  globalStyles();

  return (
    <SimpleReactLightbox>
      <Component {...pageProps} />
    </SimpleReactLightbox>
  );
}

export default MyApp;

globalStyles.ts:

import { globalCss } from "@stitches/react";
import { HEADER_HEIGHT } from "../constants";
import { breakpoints } from "./config";

// @ts-ignore
const globalStyles = globalCss({
  // "@font-face": [
  //   {
  //     fontFamily: "$merriweather",
  //     src: "url('/fonts/Merriweather-Bold.woff2') format('woff2'), url('/fonts/Merriweather-Bold.woff') format('woff')",
  //     fontWeight: "$bold",
  //     fontStyle: "normal",
  //     fontDisplay: "swap",
  //   },
  //   {
  //     fontFamily: "$merriweather",
  //     src: "url('/fonts/Merriweather-Regular.woff2') format('woff2'), url('/fonts/Merriweather-Regular.woff') format('woff')",
  //     fontWeight: "$regular",
  //     fontStyle: "normal",
  //     fontDisplay: "swap",
  //   },
  //   {
  //     fontFamily: "$merriweather",
  //     src: "url('/fonts/Merriweather-Light.woff2') format('woff2'), url('/fonts/Merriweather-Light.woff') format('woff')",
  //     fontWeight: "$light",
  //     fontStyle: "normal",
  //     fontDisplay: "swap",
  //   },
  //   {
  //     fontFamily: "$merriweather",
  //     src: "url('/fonts/Merriweather-Italic.woff2') format('woff2'), url('/fonts/Merriweather-Italic.woff') format('woff')",
  //     fontWeight: "$regular",
  //     fontStyle: "italic",
  //     fontDisplay: "swap",
  //   },
  //   {
  //     fontFamily: "$montserrat",
  //     src: "url('/fonts/Montserrat-Bold.woff2') format('woff2'), url('/fonts/Montserrat-Bold.woff') format('woff')",
  //     fontWeight: "$bold",
  //     fontStyle: "normal",
  //     fontDisplay: "swap",
  //   },
  //   {
  //     fontFamily: "$montserrat",
  //     src: "url('/fonts/Montserrat-SemiBold.woff2') format('woff2'), url('/fonts/Montserrat-SemiBold.woff') format('woff')",
  //     fontWeight: "$semiBold",
  //     fontStyle: "normal",
  //     fontDisplay: "swap",
  //   },
  //   {
  //     fontFamily: "$montserrat",
  //     src: "url('/fonts/Montserrat-Regular.woff2') format('woff2'), url('/fonts/Montserrat-Regular.woff') format('woff')",
  //     fontWeight: "$regular",
  //     fontStyle: "normal",
  //     fontDisplay: "swap",
  //   },
  //   {
  //     fontFamily: "$montserrat",
  //     src: "url('/fonts/Montserrat-Light.woff2') format('woff2'), url('/fonts/Montserrat-Light.woff') format('woff')",
  //     fontWeight: "$light",
  //     fontStyle: "normal",
  //     fontDisplay: "swap",
  //   },
  //   {
  //     fontFamily: "$montserrat",
  //     src: "url('/fonts/Montserrat-Italic.woff2') format('woff2'), url('/fonts/Montserrat-Italic.woff') format('woff')",
  //     fontWeight: "$regular",
  //     fontStyle: "italic",
  //     fontDisplay: "swap",
  //   },
  // ],

  "::selection": {
    backgroundColor: "$secondary",
  },

  "*": {
    boxSizing: "border-box",
  },

  "*:focus": {
    outline: `2px solid $secondary`,
    outlineOffset: "-2px",
  },

  "html, body": {
    fontFamily: "$montserrat",
    fontSize: "$base",
    lineHeight: "$base",
    color: "$black",
    overflowX: "hidden",
  },

  "b, strong": {
    fontWeight: "$bold",
  },

  button: {
    border: 0,
    cursor: "pointer",
    background: "transparent",
    padding: 0,
  },

  input: {
    fontFamily: "$montserrat",
    appearance: "none",
    // "&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active":
    //   {
    //     boxShadow: `0 0 0 30px ${polychrome(colors.secondary)
    //       .lighten(82)
    //       .hex()} inset !important`,
    //   },
  },

  p: {
    margin: `0 0 $contentSpacing 0`,
    fontSize: "inherit",
    maxWidth: "66ch",
  },

  "h1, h2, h3, h4, h5, h6": {
    fontFamily: "$merriweather",
    margin: `0 0 $default 0`,
  },

  h1: {
    fontSize: "3.052rem",
  },
  h2: {
    fontSize: "2.441rem",
  },
  h3: {
    fontSize: "1.953rem",
  },
  h4: {
    fontSize: "1.563rem",
  },
  h5: {
    fontSize: "1.25rem",
  },
  h6: {
    fontSize: "1rem",
  },

  "ul, ol": {
    paddingInlineStart: "$large",
    margin: `0 0 $contentSpacing 0`,
  },

  article: {
    width: "100%",
  },

  a: {
    color: "$black",
    textDecoration: "none",
    "&:hover": {
      textDecoration: "underline",
    },
  },

  figure: {
    textAlign: "center",
    fontSize: "$small",
    margin: 0,
    padding: 0,
    marginBottom: "$small",

    "&.wp-block-image": {
      marginBottom: "$contentSpacing",
    },
  },

  figCaption: {
    color: "$grey",
    marginTop: `-$small`,
    marginBottom: "$default",
  },

  blockquote: {
    fontStyle: "italic",
    "& p": {
      marginBottom: "$xxxsmall",
    },
    marginBottom: "$contentSpacing",
  },

  "html #homepage-layout": {
    paddingTop: 0,
  },

  "html #main-layout": {
    paddingTop: `${HEADER_HEIGHT.desktop}px`,
  },

  [`@media (max-width: ${breakpoints.m}px)`]: {
    "html, body": {
      fontSize: "$small",
    },
  },
  [`@media (max-width: ${breakpoints.l}px)`]: {
    "html #main-layout": {
      paddingTop: `${HEADER_HEIGHT.mobile}px`,
    },
  },
});

export default globalStyles;

System information

  • OS: macOS
  • Version of Stitches: 1.2.7
  • Version of Next.js: Next.js 12.1.0
  • Version of Node.js: 16.14.2

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6

github_iconTop GitHub Comments

2reactions
benistarycommented, Apr 14, 2022

Thank you! That was it. I’ve imported globalCSS in globalStyles.ts from @stitches/react. When I switched it to stitches.config.ts everything works like a charm - no FOUC, no styles flashing. ❤️

2reactions
Kinbaumcommented, Apr 13, 2022

Try using a consistent import of your stitches config. Looks like you are mixing your config and @stitches/react

Read more comments on GitHub >

github_iconTop Results From Across the Web

FOUC: Next.js 12.1.0 + @stitches/react 1.2.7 · Issue #995
I've enter to problem with FOUC. I was searching on your stitches-site and found how you implemented fonts preloading and @font-face styles ...
Read more >
Using Next.js with Stitches
Next.js is a popular React framework. It comes with all the necessary features to build anything you want whilst giving you the best...
Read more >
Flash of Unstyled Content (FOUC) for Nextjs using Mantine
There is a flash of Unstyled component before the page renders. How to solve this issue? I looked into Nextjs Github and there...
Read more >
How to debug a Next.js FOUC? : r/reactjs
When I load my next.js page, I get a flash of unstyled content. It's made with Material UI, and it happens whenever I...
Read more >
stitches
FOUC : Next.js 12.1.0 + @stitches/react 1.2.7 · Previous Next. Make software development more efficient, Also welcome to join our telegram.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

css prop not working with utils and variables

Next page

If using disabled variant it will not prevent onClick from firing