Static extraction causes specificity issue with new styles during runtime

[itsMapleLeaf]

Repo: https://github.com/itsMapleLeaf/twind-specificity-issue

Where the text says "this element should be translucent, but is not", that has bg-black bg-opacity-25 on it, but the bg opacity isn't applying due to the specificity of bg-black's default opacity.

Here's the code that reproduces this:

export default function Home() {
	const [isReady] = useTimeout(100)
	return (
		<>
			<Portal>
				<div className={tw`bg-black text-white`}>portal element</div>
			</Portal>
			{isReady() && (
				<div className={tw`bg-black bg-opacity-25 text-white`}>
					this should be translucent, but is not?
				</div>
			)}
		</>
	)
}

It happens only with the Portal on the first element, and a delayed render of the second. If anything about this changes, then the issue goes away. Very interesting and strange 🤔

[sastan]

Thanks for the repo. That is something i waited for.

The issue is because of the static extraction. The portal styles have not been rendered on the server. We do not do any re-hydration as we haven't found any issues. All runtime styles are prepended to the server styles. Re-hydration is tricky and my lead to other problems. I'm thinking about simply appending all runtime styles to the server styles. That should fix it.

Here is my code to debug this:

/* pages/_app.js */
import App from "next/app"
import { setup } from "twind"
import { domSheet } from 'twind/sheets'
import twindConfig from "../twind.config"

if (typeof window !== "undefined") {
	setup({...twindConfig, sheet: domSheet()})
}

export default App

Then you'll see the styles in the dom for debugging.