switch some style props to css

components/ContactForm/ContactForm.tsx

@@ -250,7 +250,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
 
           <MarkdownTip>
             Basic{" "}
-            <Link href="https://commonmark.org/help/" title="Markdown reference sheet" style={{ fontWeight: 600 }}>
+            <Link href="https://commonmark.org/help/" title="Markdown reference sheet" css={{ fontWeight: 600 }}>
               Markdown syntax
             </Link>{" "}
             is allowed here, e.g.: <strong>**bold**</strong>, <em>_italics_</em>, [

components/IFrame/IFrame.tsx

@@ -1,5 +1,6 @@
 import { styled } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";
+import type * as Stitches from "@stitches/react";
 
 const RoundedIFrame = styled("iframe", {
   width: "100%",
@@ -15,9 +16,10 @@ export type IFrameProps = ComponentProps<typeof RoundedIFrame> & {
   width?: number; // defaults to 100%
   allowScripts?: boolean;
   noScroll?: boolean;
+  css?: Stitches.CSS;
 };
 
-const IFrame = ({ src, title, height, width, allowScripts, noScroll, ...rest }: IFrameProps) => (
+const IFrame = ({ src, title, height, width, allowScripts, noScroll, css, ...rest }: IFrameProps) => (
   <RoundedIFrame
     src={src}
     title={title}
@@ -27,6 +29,7 @@ const IFrame = ({ src, title, height, width, allowScripts, noScroll, ...rest }:
     css={{
       height: `${height}px`,
       maxWidth: width ? `${width}px` : null,
+      ...css,
     }}
     {...rest}
   />

components/Loading/Loading.tsx

@@ -1,5 +1,6 @@
 import { memo } from "react";
 import { styled, keyframes } from "../../lib/styles/stitches.config";
+import type * as Stitches from "@stitches/react";
 
 const pulse = keyframes({
   "0%, 80%, 100%": {
@@ -26,10 +27,11 @@ export type LoadingProps = {
   width: number; // of entire container, in pixels
   boxes?: number; // total number of boxes (default: 3)
   timing?: number; // staggered timing between each box's pulse, in seconds (default: 0.1s)
+  css?: Stitches.CSS;
   className?: string;
 };
 
-const Loading = ({ width, boxes = 3, timing = 0.1, className }: LoadingProps) => {
+const Loading = ({ width, boxes = 3, timing = 0.1, css, className }: LoadingProps) => {
   // each box is just an empty div
   const divs = [];
 
@@ -51,9 +53,10 @@ const Loading = ({ width, boxes = 3, timing = 0.1, className }: LoadingProps) =>
   return (
     <Wrapper
       className={className}
-      style={{
+      css={{
         width: `${width}px`,
         height: `${width / 2}px`,
+        ...css,
       }}
     >
       {divs}

pages/hillary.tsx

@@ -38,15 +38,15 @@ const Hillary = () => (
 
       <Copyright>
         Video is property of{" "}
-        <Link href="https://www.hillaryclinton.com/" style={{ fontWeight: 700 }}>
+        <Link href="https://www.hillaryclinton.com/" css={{ fontWeight: 700 }}>
           Hillary for America
         </Link>
         , the{" "}
-        <Link href="https://democrats.org/" style={{ fontWeight: 700 }}>
+        <Link href="https://democrats.org/" css={{ fontWeight: 700 }}>
           Democratic National Committee
         </Link>
         , and{" "}
-        <Link href="https://cnnpressroom.blogs.cnn.com/" style={{ fontWeight: 700 }}>
+        <Link href="https://cnnpressroom.blogs.cnn.com/" css={{ fontWeight: 700 }}>
           CNN / WarnerMedia
         </Link>
         . &copy; 2016.

pages/index.tsx

@@ -1,6 +1,7 @@
 import Content from "../components/Content/Content";
 import Link, { CustomLinkProps } from "../components/Link/Link";
 import { styled, keyframes, darkTheme } from "../lib/styles/stitches.config";
+import type * as Stitches from "@stitches/react";
 
 const Wrapper = styled(Content, {
   fontSize: "1em",
@@ -10,26 +11,28 @@ const Wrapper = styled(Content, {
 const ColorfulLink = ({
   lightColor,
   darkColor,
+  css,
   ...rest
 }: CustomLinkProps & {
   lightColor: string;
   darkColor: string;
+  css?: Stitches.CSS;
 }) => {
   return (
-    <>
-      <Link
-        css={{
-          color: lightColor,
-          backgroundGradientHack: { color: lightColor },
+    <Link
+      css={{
+        color: lightColor,
+        backgroundGradientHack: { color: lightColor },
 
-          [`.${darkTheme} &`]: {
-            color: darkColor,
-            backgroundGradientHack: { color: darkColor },
-          },
-        }}
-        {...rest}
-      />
-    </>
+        [`.${darkTheme} &`]: {
+          color: darkColor,
+          backgroundGradientHack: { color: darkColor },
+        },
+
+        ...css,
+      }}
+      {...rest}
+    />
   );
 };
 
@@ -330,7 +333,7 @@ const Index = () => (
           title="My Public Key"
           lightColor="#757575"
           darkColor="#959595"
-          style={{ background: "none" }}
+          css={{ background: "none !important" }}
           forceNewWindow
         >
           <code>🔐 2B0C 9CF2 51E6 9A39</code>

pages/leo.tsx

@@ -39,11 +39,11 @@ const Leo = () => (
 
       <Copyright>
         Video is property of{" "}
-        <Link href="https://web.archive.org/web/20070511004304/http://www.g4techtv.ca/" style={{ fontWeight: 700 }}>
+        <Link href="https://web.archive.org/web/20070511004304/http://www.g4techtv.ca/" css={{ fontWeight: 700 }}>
           G4techTV Canada
         </Link>{" "}
         &amp;{" "}
-        <Link href="https://leolaporte.com/" style={{ fontWeight: 700 }}>
+        <Link href="https://leolaporte.com/" css={{ fontWeight: 700 }}>
           Leo Laporte
         </Link>
         . &copy; 2007 G4 Media, Inc.