jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-10-30 01:35:47 -04:00
Code Issues Activity

styled-jsx sheets weren't being rendered server-side 🤦

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-12 11:31:03 -05:00
parent c9f00d567a
commit 12d0959629
3 changed files with 18 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -69,7 +69,6 @@
"remark-gfm": "^3.0.1", "remark-gfm": "^3.0.1",
"sanitize-html": "^2.6.1", "sanitize-html": "^2.6.1",
"simple-icons": "^6.6.0", "simple-icons": "^6.6.0",
"styled-jsx": "^4.0.1",
"swr": "^1.1.2", "swr": "^1.1.2",
"twemoji": "github:twitter/twemoji#v13.1.0" "twemoji": "github:twitter/twemoji#v13.1.0"
}, },

33
pages/index.tsx
View File

@@ -19,21 +19,24 @@ const ColorLink = ({ href, title, lightColor, darkColor, external = false, child
const hexToRgba = (hex: string, alpha = 0.4) => hexRgb(hex, { alpha, format: "css" }); const hexToRgba = (hex: string, alpha = 0.4) => hexRgb(hex, { alpha, format: "css" });
return ( return (
<Link href={href} passHref={true} prefetch={false}> <>
<a title={title} target={external ? "_blank" : undefined} rel={external ? "noopener noreferrer" : undefined}> <Link href={href} passHref={true} prefetch={false}>
{children} <a title={title} target={external ? "_blank" : undefined} rel={external ? "noopener noreferrer" : undefined}>
<style jsx>{` {children}
a { </a>
color: ${lightColor}; </Link>
background-image: linear-gradient(${hexToRgba(lightColor)}, ${hexToRgba(lightColor)});
} <style jsx>{`
:global([data-theme="dark"]) a { a {
color: ${darkColor}; color: ${lightColor};
background-image: linear-gradient(${hexToRgba(darkColor)}, ${hexToRgba(darkColor)}); background-image: linear-gradient(${hexToRgba(lightColor)}, ${hexToRgba(lightColor)});
} }
`}</style> :global([data-theme="dark"]) a {
</a> color: ${darkColor};
</Link> background-image: linear-gradient(${hexToRgba(darkColor)}, ${hexToRgba(darkColor)});
}
`}</style>
</>
); );
}; };

14
yarn.lock
View File

@@ -6264,20 +6264,6 @@ styled-jsx@5.0.0-beta.6:
stylis "3.5.4" stylis "3.5.4"
stylis-rule-sheet "0.0.10" stylis-rule-sheet "0.0.10"
styled-jsx@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-4.0.1.tgz#ae3f716eacc0792f7050389de88add6d5245b9e9"
integrity sha512-Gcb49/dRB1k8B4hdK8vhW27Rlb2zujCk1fISrizCcToIs+55B4vmUM0N9Gi4nnVfFZWe55jRdWpAqH1ldAKWvQ==
dependencies:
"@babel/plugin-syntax-jsx" "7.14.5"
"@babel/types" "7.15.0"
convert-source-map "1.7.0"
loader-utils "1.2.3"
source-map "0.7.3"
string-hash "1.1.3"
stylis "3.5.4"
stylis-rule-sheet "0.0.10"
stylelint-config-prettier@~9.0.3: stylelint-config-prettier@~9.0.3:
version "9.0.3" version "9.0.3"
resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-9.0.3.tgz#0dccebeff359dcc393c9229184408b08964d561c" resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-9.0.3.tgz#0dccebeff359dcc393c9229184408b08964d561c"