jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 13:06:37 -04:00
Code Issues Activity

allow react to properly merge/dedupe homepage inline styles

Browse Source 
https://react.dev/reference/react-dom/components/style#rendering-an-inline-css-stylesheet
This commit is contained in:
Jake Jarvis
2025-03-08 10:34:57 -05:00
parent 9229f92c0c
commit a21206eaa5
3 changed files with 121 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/page.tsx
View File

@ -1,3 +1,4 @@
import { useId } from "react";
import { GoLock } from "react-icons/go";
import { rgba } from "polished";
import Link from "../components/Link";
@ -15,15 +16,22 @@ const ColorfulLink = ({
lightColor: string;
darkColor: string;
}) => {
const uniqueId = `Link_themed__${lightColor.replace("#", "")}_${darkColor.replace("#", "")}`;
const uniqueId = `styled_${useId().replaceAll(":", "")}`;
return (
<>
<Link className={uniqueId} {...rest}>
<Link id={uniqueId} {...rest}>
{children}
</Link>
<style>{`.${uniqueId}{--colors-link:${lightColor};--colors-linkUnderline:${rgba(lightColor, 0.4)}}[data-theme="dark"] .${uniqueId}{--colors-link:${darkColor};--colors-linkUnderline:${rgba(darkColor, 0.4)}}`}</style>
<style
// workaround to have react combine all of the inline styles into a single <style> tag in the <head>, see:
// https://react.dev/reference/react-dom/components/style#rendering-an-inline-css-stylesheet
href={uniqueId}
precedence={styles.page}
>
{`.${styles.page} #${uniqueId}{--colors-link:${lightColor};--colors-linkUnderline:${rgba(lightColor, 0.4)}}[data-theme="dark"] .${styles.page} #${uniqueId}{--colors-link:${darkColor};--colors-linkUnderline:${rgba(darkColor, 0.4)}}`}
</style>
</>
);
};