Coder Social home page Coder Social logo

Comments (20)

kilinkis avatar kilinkis commented on April 20, 2024 2

SOLUTION: Note to myself and others: don't forget to import styled from: import { styled } from "../styles/stitches.config";

Thank you sir! 🎉

from examples.

richardanewman avatar richardanewman commented on April 20, 2024 2

I only experience FOUC with devtools open in firefox. If it's closed, FOUC goes away. In chorme, the font is a little jumpy with dev tools open but no flash. Nothing with devtools closed.

from examples.

Ehesp avatar Ehesp commented on April 20, 2024 2

I came across this also using Streaming + Remix + Tailwind. No idea if related, but I also noticed that
it does a FOUC when devtools are open (Chrome).

from examples.

coreybruyere avatar coreybruyere commented on April 20, 2024 1

Here's a link to the second method where I'm still getting FOUC: coreybruyere/california-custom-tile#2

from examples.

daphnesmit avatar daphnesmit commented on April 20, 2024 1

I followed the guide and also got FOUC.
the server does render some styles. but not the styles used in my Container and Title component added in the Index.
On client it goes ok.
On server it has following html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta content="noindex" name="robots" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;500;600;700;900&amp;family=Montserrat:wght@400;500;600;700;800;900&amp;display=swap" />
    <style id="stitches">
      --sxs {
        --sxs: 0 t-ioutRf
      }
      @media {
        :root,
        .t-ioutRf {
          --colors-thaicello: #97e367;
          --colors-limoncello: #fee62e;
          --fonts-montserrat: 'Montserrat', sans-serif
        }
      }
      --sxs {
        --sxs: 1 ZocxG
      }
      @media {
        body {
          margin: 0;
          padding: 0
        }
      }
    </style>
  </head>
  <body>
    <div class="c-eWbzaK"><img src="/build/_assets/thaicello-logo-QMORX73B.png" alt="" class="c-fDIUPu" />
      <h1 class="c-fciIaC">Coming soon: Thaicello</h1>
    </div>

Which does not contain c-eWbzaK for example

https://github.com/daphnesmit/thaicello for reproduction
visually at : https://thaicello.netlify.app/

I am almost thinking maybe its because of the Netlify setup I use.
EDIT: yep if I use the remix app server or the --template stitches it works...

Will investigate a but further with an empty netlify setup and copy pasting again and compare versions of pkgs.
EDIT2: weirdly enough in a new copy pasted setup it does work... no idea what the difference is.

SOLUTION: Note to myself and others: don't forget to import styled from: import { styled } from "../styles/stitches.config";

from examples.

tshddx avatar tshddx commented on April 20, 2024

In your HTML I can see your empty style tag:

<style id="stitches"></style>

You have two options:

  1. Do a double renderToString of the RemixServer component in entry.server.tsx. The first render doesn't get used, but it allows Stitches to collect all the styles to inject in the second render.
  2. After your renderToString in entry.server.tsx, replace the empty style tag HTML with a new style tag that contains the results of getCssText(), as shown here.

from examples.

coreybruyere avatar coreybruyere commented on April 20, 2024

Thanks @tshddx - I tried the second option without any success. Any examples of the first option? Tried it, but want to ensure I'm rendering twice correctly. I'll try to link to a branch later today.

from examples.

coreybruyere avatar coreybruyere commented on April 20, 2024

@daphnesmit what do you mean by --template? I haven't been able to fix this FOUC issue - as seen here: (https://california-custom-tile.netlify.app/). My latest attempt at a fix can be found here: coreybruyere/california-custom-tile#2

from examples.

daphnesmit avatar daphnesmit commented on April 20, 2024

I already did a fresh copy paste and there it worked. Dont really know what what the issue was.
you're repo is probably private because I get a 404.

I managed to get it to work. The thing that I find interesting is that both the example from Stitches & the example from Remix work but they are both different:
stitches: https://github.com/jjenzz/remix-stitches/blob/main/app/entry.client.tsx
remix example: https://codesandbox.io/s/github/remix-run/remix/tree/main/examples/stitches?file=/app/entry.client.tsx

The difference is the provider + context; In remix example they do a reset on the client.
I am wondering if that is needed or not: https://codesandbox.io/s/github/remix-run/remix/tree/main/examples/stitches?file=/app/root.tsx

from examples.

coreybruyere avatar coreybruyere commented on April 20, 2024

@daphnesmit I made my repo public. Saw your repo was private too. To get yours working did you follow the stitches example or the remix example? Going to try fixing later today. I couldn't get the codesandbox examples working.

from examples.

daphnesmit avatar daphnesmit commented on April 20, 2024

@coreybruyere its is working i probably made a dumb mistake. Just wondering why they are both different. I made mine private again indeed

from examples.

coreybruyere avatar coreybruyere commented on April 20, 2024

@daphnesmit are you running netlify dev as your dev script?

from examples.

CanRau avatar CanRau commented on April 20, 2024

Just for reference as it's not really visible at the moment, Stitches seems to be in maintenance only mode and won't get new features according to https://www.modulz.app/blog/modulz-acquired-by-workos

from examples.

fandy avatar fandy commented on April 20, 2024

This is also an issue in Astro, and makes Stitches unusable :(

from examples.

MrSucik avatar MrSucik commented on April 20, 2024

Has anyone used stitches while using renderToPipeableStream? How am I able to replace something in a stream 🤔

from examples.

CanRau avatar CanRau commented on April 20, 2024

You might be able to use a PassThrough and a Transform but I think there might be various ways of taking it all the way, one might be to buffer to memory cause don't know if you can give stitches stream chunks 🤷‍♂️

entry.server.tsx 
import { PassThrough, Transform } from "stream";
import { renderToPipeableStream } from "react-dom/server";
import { RemixServer } from "@remix-run/react";
import { type EntryContext, type Headers, Response } from "@remix-run/node";
import isbot from "isbot";

const ABORT_DELAY = 5000;

export default function handleRequest(
	request: Request,
	responseStatusCode: number,
	responseHeaders: Headers,
	remixContext: EntryContext,
) {
	const callbackName = isbot(request.headers.get("user-agent")) ? "onAllReady" : "onShellReady";

	return new Promise((resolve, reject) => {
		let didError = false;

		const { pipe, abort } = renderToPipeableStream(
			<RemixServer context={remixContext} url={request.url} />,
			{
				[callbackName]() {
					let body = new PassThrough();

					const transformStream = new Transform({
						transform(chunk, encoding, callback) {
							console.log("entry.server", chunk.toString());
							callback(null, chunk);
						},
					});

					responseHeaders.set("Content-Type", "text/html");
					responseHeaders.set("Transfer-Encoding", "chunked");
					responseHeaders.set("Connection", "keep-alive");

					resolve(
						new Response(body, {
							status: didError ? 500 : responseStatusCode,
							headers: responseHeaders,
						}),
					);

					pipe(transformStream).pipe(body);
				},
				onShellError(err) {
					reject(err);
				},
				onError(error) {
					didError = true;
					console.error(error);
				},
			},
		);
		setTimeout(abort, ABORT_DELAY);
	});
}

from examples.

coreybruyere avatar coreybruyere commented on April 20, 2024

FYI Stitches has largely been abandoned by original contributors and development has dramatically slowed down. I've moved back to SCSS for projects but have my eyes on vanilla-extract.

from examples.

machour avatar machour commented on April 20, 2024

@coreybruyere did you see that we just added an example for vanilla extract? 👀

from examples.

machour avatar machour commented on April 20, 2024

Closing this stale issue.

from examples.

merlindru avatar merlindru commented on April 20, 2024

@richardanewman Good catch, when I close the dev tools there's no more FOUC

from examples.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.