Refactor: new way to pass CSS vars (types)

app/components/tournament/ActionSectionWrapper.tsx

@@ -1,3 +1,5 @@
+import { MyCSSProperties } from "~/utils";
+
 export function ActionSectionWrapper({
   children,
   icon,
@@ -6,11 +8,11 @@ export function ActionSectionWrapper({
   icon: "warning" | "info" | "success" | "error";
 }) {
   // todo: flex-dir: column on mobile
+  const style: MyCSSProperties = {
+    "--action-section-icon-color": `var(--theme-${icon})`,
+  };
   return (
-    <section
-      className="tournament__action-section"
-      style={{ "--action-section-icon-color": `var(--theme-${icon})` } as any}
-    >
+    <section className="tournament__action-section" style={style}>
       <div className="tournament__action-section__content">{children}</div>
     </section>
   );

app/components/tournament/EliminationBracket.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import invariant from "tiny-invariant";
 import type { BracketModified } from "~/services/tournament";
-import { Unpacked } from "~/utils";
+import { MyCSSProperties, Unpacked } from "~/utils";
 
 export function EliminationBracket({
   bracketSide,
@@ -10,16 +10,12 @@ export function EliminationBracket({
   bracketSide: BracketModified["winners"];
   ownTeamName?: string;
 }) {
+  const style: MyCSSProperties = {
+    "--brackets-columns": bracketSide.length,
+    "--brackets-max-matches": bracketSide[0].matches.length,
+  };
   return (
-    <div
-      className="tournament-bracket__elim__container"
-      style={
-        {
-          "--brackets-columns": bracketSide.length,
-          "--brackets-max-matches": bracketSide[0].matches.length,
-        } as any
-      }
-    >
+    <div className="tournament-bracket__elim__container" style={style}>
       <div className="tournament-bracket__elim__bracket">
         {bracketSide.map((round, i) => (
           <RoundInfo
@@ -68,20 +64,20 @@ export function EliminationBracket({
               if (matchOne.participants?.includes(null)) return "bottom-only";
               return "top-only";
             });
+
+          const style: MyCSSProperties = {
+            "--brackets-bottom-border-length": drawStraightLines
+              ? 0
+              : undefined,
+            "--brackets-column-matches": drawStraightLines
+              ? 0
+              : round.matches.length,
+          };
           return (
             <div
               key={round.id}
               className="tournament-bracket__elim__column"
-              style={
-                {
-                  "--brackets-bottom-border-length": drawStraightLines
-                    ? 0
-                    : undefined,
-                  "--brackets-column-matches": drawStraightLines
-                    ? 0
-                    : round.matches.length,
-                } as any
-              }
+              style={style}
             >
               <div className="tournament-bracket__elim__matches">
                 {round.matches.map((match) => {

app/routes/to/$organization.$tournament.tsx

@@ -19,6 +19,7 @@ import {
   FindTournamentByNameForUrlI,
 } from "~/services/tournament";
 import { makeTitle } from "~/utils";
+import type { MyCSSProperties } from "~/utils";
 import { useUser } from "~/utils/hooks";
 import tournamentStylesUrl from "../../styles/tournament.css";
 
@@ -86,24 +87,25 @@ export default function TournamentPage() {
     return result;
   })();
 
+  const tournamentContainerStyle: MyCSSProperties = {
+    "--tournaments-bg": data.bannerBackground,
+    "--tournaments-text": data.CSSProperties.text,
+    "--tournaments-text-transparent": data.CSSProperties.textTransparent,
+    // todo: could make a TS helper type for this that checks for leading --
+  };
+
+  const linksContainerStyle: MyCSSProperties = {
+    "--tabs-count": navLinks.length,
+  };
+
   return (
-    <div
-      className="tournament__container"
-      style={
-        {
-          "--tournaments-bg": data.bannerBackground,
-          "--tournaments-text": data.CSSProperties.text,
-          "--tournaments-text-transparent": data.CSSProperties.textTransparent,
-          // todo: could make a TS helper type for this that checks for leading --
-        } as Record<string, string>
-      }
-    >
+    <div className="tournament__container" style={tournamentContainerStyle}>
       <InfoBanner />
       <div className="tournament__container__spacer" />
       <div className="tournament__links-overflower">
         <div className="tournament__links-border">
           <div
-            style={{ "--tabs-count": navLinks.length } as any}
+            style={linksContainerStyle}
             className="tournament__links-container"
           >
             {navLinks.map(({ code, text, icon }) => (

app/utils/index.ts

@@ -1,6 +1,7 @@
 import { json } from "remix";
 import invariant from "tiny-invariant";
 import { useLocation } from "remix";
+import type { CSSProperties } from "react";
 
 export function makeTitle(endOfTitle?: string) {
   return endOfTitle ? `sendou.ink | ${endOfTitle}` : "sendou.ink";
@@ -89,5 +90,14 @@ export type MyReducerAction<
     }
   : { type: K };
 
-// TODO:
-// export type InferredSerializedAPI<T> = Serialized<Prisma.PromiseReturnType<T>>;
+export interface MyCSSProperties extends CSSProperties {
+  "--tournaments-bg"?: string;
+  "--tournaments-text"?: string;
+  "--tournaments-text-transparent"?: string;
+  "--action-section-icon-color"?: string;
+  "--brackets-columns"?: number;
+  "--brackets-max-matches"?: number;
+  "--brackets-bottom-border-length"?: number;
+  "--brackets-column-matches"?: number;
+  "--tabs-count"?: number;
+}