From 14f03535c97eec6625e27fd63a9b0a15029690ea Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 25 Feb 2024 00:35:53 +0200
Subject: [PATCH] Vite fixes inc. moving css to side effect imports

---
 app/features/articles/routes/a.tsx            |  8 +--
 app/features/badges/routes/badges.tsx         |  7 +-
 .../build-analyzer/routes/analyzer.tsx        | 19 +++---
 .../build-stats/routes/builds.$slug.stats.tsx |  8 +--
 app/features/builds/routes/builds.tsx         |  9 +--
 app/features/calendar/routes/calendar.$id.tsx | 31 ++++-----
 app/features/calendar/routes/calendar.new.tsx | 11 +---
 app/features/calendar/routes/calendar.tsx     | 24 +++----
 app/features/front-page/routes/index.tsx      |  6 +-
 app/features/info/routes/faq.tsx              |  9 +--
 app/features/info/routes/support.tsx          | 22 +++----
 .../leaderboards/routes/leaderboards.tsx      |  8 +--
 .../map-list-generator/routes/maps.tsx        | 18 ++---
 app/features/map-planner/routes/plans.tsx     |  9 +--
 .../routes/object-damage-calculator.tsx       | 14 ++--
 app/features/plus-suggestions/routes/plus.tsx |  6 +-
 .../routes/plus.voting.results.tsx            |  6 +-
 .../sendouq-settings/routes/q.settings.tsx    | 11 +---
 .../sendouq-streams/routes/q.streams.tsx      | 22 +++----
 app/features/sendouq/routes/q.looking.tsx     |  8 +--
 app/features/sendouq/routes/q.match.$id.tsx   |  8 +--
 app/features/sendouq/routes/q.preparing.tsx   | 10 +--
 app/features/sendouq/routes/q.tsx             | 15 ++---
 .../team/routes/t.$customUrl.edit.tsx         | 18 ++---
 .../team/routes/t.$customUrl.join.tsx         | 12 +---
 .../team/routes/t.$customUrl.roster.tsx       |  6 +-
 app/features/team/routes/t.$customUrl.tsx     | 18 ++---
 app/features/team/routes/t.tsx                |  8 +--
 .../top-search/routes/xsearch.player.$id.tsx  | 20 +++---
 app/features/top-search/routes/xsearch.tsx    |  8 +--
 .../routes/to.$id.brackets.tsx                | 42 +++++-------
 .../routes/to.$id.matches.$mid.tsx            | 22 ++-----
 .../routes/to.$id.subs.new.tsx                | 13 +---
 .../tournament-subs/routes/to.$id.subs.tsx    | 17 ++---
 .../tournament/routes/to.$id.maps.tsx         |  7 +-
 app/features/tournament/routes/to.$id.tsx     |  8 +--
 .../user-page/routes/u.$identifier.edit.tsx   | 25 +++----
 .../user-page/routes/u.$identifier.tsx        |  8 +--
 .../user-page/routes/u.$identifier.vods.tsx   | 20 +++---
 app/features/user-search/routes/u.tsx         | 11 +---
 app/features/vods/index.ts                    |  2 -
 app/features/vods/routes/vods.$id.tsx         | 12 ++--
 app/features/vods/routes/vods.tsx             |  8 +--
 app/root.tsx                                  | 65 ++++++++-----------
 ley.config.js => ley.config.cjs               |  0
 vite.config.ts                                |  2 +-
 46 files changed, 211 insertions(+), 430 deletions(-)
 delete mode 100644 app/features/vods/index.ts
 rename ley.config.js => ley.config.cjs (100%)

diff --git a/app/features/articles/routes/a.tsx b/app/features/articles/routes/a.tsx
index b5b429db4..a11434213 100644
--- a/app/features/articles/routes/a.tsx
+++ b/app/features/articles/routes/a.tsx
@@ -1,18 +1,14 @@
 import { Main } from "~/components/Main";
-import type { LinksFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { mostRecentArticles } from "../core/list.server";
-import styles from "~/styles/front.css?url";
 import { useTranslation } from "react-i18next";
 import type { SendouRouteHandle } from "~/utils/remix";
 import { articlePage, ARTICLES_MAIN_PAGE, navIconUrl } from "~/utils/urls";
 import { Link, useLoaderData } from "@remix-run/react";
 
-const MAX_ARTICLES_COUNT = 100;
+import "~/styles/front.css";
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+const MAX_ARTICLES_COUNT = 100;
 
 export const handle: SendouRouteHandle = {
   breadcrumb: () => ({
diff --git a/app/features/badges/routes/badges.tsx b/app/features/badges/routes/badges.tsx
index 053141760..2a113e16a 100644
--- a/app/features/badges/routes/badges.tsx
+++ b/app/features/badges/routes/badges.tsx
@@ -1,8 +1,7 @@
-import type { LinksFunction, SerializeFrom } from "@remix-run/node";
+import type { SerializeFrom } from "@remix-run/node";
 import { Link, NavLink, Outlet, useLoaderData } from "@remix-run/react";
 import { Badge } from "~/components/Badge";
 import { Main } from "~/components/Main";
-import styles from "~/styles/badges.css?url";
 import {
   BADGES_PAGE,
   BORZOIC_TWITTER,
@@ -14,9 +13,7 @@ import { useTranslation } from "react-i18next";
 import { type SendouRouteHandle } from "~/utils/remix";
 import * as BadgeRepository from "../BadgeRepository.server";
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+import "~/styles/badges.css";
 
 export const handle: SendouRouteHandle = {
   i18n: "badges",
diff --git a/app/features/build-analyzer/routes/analyzer.tsx b/app/features/build-analyzer/routes/analyzer.tsx
index 1ae8a102d..6424f24e5 100644
--- a/app/features/build-analyzer/routes/analyzer.tsx
+++ b/app/features/build-analyzer/routes/analyzer.tsx
@@ -1,8 +1,10 @@
-import { type LinksFunction, type MetaFunction } from "@remix-run/node";
+import { type MetaFunction } from "@remix-run/node";
 import type { ShouldRevalidateFunction } from "@remix-run/react";
 import { Link } from "@remix-run/react";
 import clsx from "clsx";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
+import invariant from "tiny-invariant";
 import { AbilitiesSelector } from "~/components/AbilitiesSelector";
 import { Ability } from "~/components/Ability";
 import Chart from "~/components/Chart";
@@ -15,9 +17,9 @@ import { Tab, Tabs } from "~/components/Tabs";
 import { Toggle } from "~/components/Toggle";
 import { BeakerIcon } from "~/components/icons/Beaker";
 import { MAX_AP } from "~/constants";
-import { useSetTitle } from "~/hooks/useSetTitle";
-import { useTranslation } from "react-i18next";
 import { useUser } from "~/features/auth/core/user";
+import { useIsMounted } from "~/hooks/useIsMounted";
+import { useSetTitle } from "~/hooks/useSetTitle";
 import type { Ability as AbilityType } from "~/modules/in-game-lists";
 import {
   ANGLE_SHOOTER_ID,
@@ -59,7 +61,7 @@ import type {
   Stat,
   SubWeaponDamage,
 } from "../analyzer-types";
-import styles from "../analyzer.css?url";
+import { PerInkTankGrid } from "../components/PerInkTankGrid";
 import {
   ABILITIES_WITHOUT_CHUNKS,
   getAbilityChunksMapAsArray,
@@ -75,9 +77,8 @@ import {
   isMainOnlyAbility,
   isStackableAbility,
 } from "../core/utils";
-import { PerInkTankGrid } from "../components/PerInkTankGrid";
-import invariant from "tiny-invariant";
-import { useIsMounted } from "~/hooks/useIsMounted";
+
+import "../analyzer.css";
 
 export const CURRENT_PATCH = "6.1";
 
@@ -91,10 +92,6 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const handle: SendouRouteHandle = {
   i18n: ["weapons", "analyzer", "builds"],
   breadcrumb: () => ({
diff --git a/app/features/build-stats/routes/builds.$slug.stats.tsx b/app/features/build-stats/routes/builds.$slug.stats.tsx
index 7300b1f96..c02799964 100644
--- a/app/features/build-stats/routes/builds.$slug.stats.tsx
+++ b/app/features/build-stats/routes/builds.$slug.stats.tsx
@@ -1,5 +1,4 @@
 import type {
-  LinksFunction,
   LoaderFunctionArgs,
   MetaFunction,
   SerializeFrom,
@@ -10,7 +9,6 @@ import { weaponNameSlugToId } from "~/utils/unslugify.server";
 import { averageAbilityPoints } from "../queries/averageAbilityPoints.server";
 import { abilityPointCountsToAverages } from "../build-stats-utils";
 import { Ability } from "~/components/Ability";
-import styles from "../build-stats.css?url";
 import { WeaponImage } from "~/components/Image";
 import { notFoundIfNullLike, type SendouRouteHandle } from "~/utils/remix";
 import { MAX_AP, ONE_HOUR_IN_MS } from "~/constants";
@@ -26,6 +24,8 @@ import { makeTitle } from "~/utils/strings";
 import { cache, ttl } from "~/utils/cache.server";
 import { cachified } from "@epic-web/cachified";
 
+import "../build-stats.css";
+
 export const meta: MetaFunction = (args) => {
   const data = args.data as SerializeFrom<typeof loader> | null;
 
@@ -34,10 +34,6 @@ export const meta: MetaFunction = (args) => {
   return [{ title: data.meta.title }];
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const handle: SendouRouteHandle = {
   i18n: ["weapons", "builds", "analyzer"],
   breadcrumb: ({ match }) => {
diff --git a/app/features/builds/routes/builds.tsx b/app/features/builds/routes/builds.tsx
index ff9928daf..b00074987 100644
--- a/app/features/builds/routes/builds.tsx
+++ b/app/features/builds/routes/builds.tsx
@@ -12,12 +12,13 @@ import {
   weaponCategoryUrl,
 } from "~/utils/urls";
 import { type SendouRouteHandle } from "~/utils/remix";
-import styles from "~/styles/builds.css?url";
-import type { LinksFunction, MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 import { Main } from "~/components/Main";
 import { makeTitle } from "~/utils/strings";
 import { useSetTitle } from "~/hooks/useSetTitle";
 
+import "~/styles/builds.css";
+
 export const meta: MetaFunction = () => {
   return [
     { title: makeTitle("Builds") },
@@ -37,10 +38,6 @@ export const handle: SendouRouteHandle = {
   }),
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export default function BuildsPage() {
   const { t } = useTranslation(["common", "weapons"]);
   useSetTitle(t("common:pages.builds"));
diff --git a/app/features/calendar/routes/calendar.$id.tsx b/app/features/calendar/routes/calendar.$id.tsx
index 29b722dcf..02748e963 100644
--- a/app/features/calendar/routes/calendar.$id.tsx
+++ b/app/features/calendar/routes/calendar.$id.tsx
@@ -1,15 +1,15 @@
-import { json, redirect } from "@remix-run/node";
 import type {
   ActionFunction,
-  SerializeFrom,
-  LinksFunction,
   LoaderFunctionArgs,
   MetaFunction,
+  SerializeFrom,
 } from "@remix-run/node";
+import { json, redirect } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { Link } from "@remix-run/react/dist/components";
 import clsx from "clsx";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { Avatar } from "~/components/Avatar";
 import { Button, LinkButton } from "~/components/Button";
@@ -19,19 +19,18 @@ import { Main } from "~/components/Main";
 import { MapPoolStages } from "~/components/MapPoolSelector";
 import { Placement } from "~/components/Placement";
 import { Section } from "~/components/Section";
-import { useIsMounted } from "~/hooks/useIsMounted";
-import { useTranslation } from "react-i18next";
+import { Table } from "~/components/Table";
 import { useUser } from "~/features/auth/core/user";
 import { requireUserId } from "~/features/auth/core/user.server";
-import { i18next } from "~/modules/i18n/i18next.server";
+import * as CalendarRepository from "~/features/calendar/CalendarRepository.server";
 import { MapPool } from "~/features/map-list-generator/core/map-pool";
+import { useIsMounted } from "~/hooks/useIsMounted";
+import { i18next } from "~/modules/i18n/i18next.server";
 import {
   canDeleteCalendarEvent,
   canEditCalendarEvent,
   canReportCalendarEventWinners,
 } from "~/permissions";
-import calendarStyles from "~/styles/calendar-event.css?url";
-import mapsStyles from "~/styles/maps.css?url";
 import { databaseTimestampToDate } from "~/utils/dates";
 import {
   notFoundIfFalsy,
@@ -40,20 +39,21 @@ import {
 } from "~/utils/remix";
 import { discordFullName, makeTitle } from "~/utils/strings";
 import {
+  CALENDAR_PAGE,
   calendarEditPage,
   calendarEventPage,
   calendarReportWinnersPage,
-  CALENDAR_PAGE,
   navIconUrl,
   readonlyMapsPage,
   resolveBaseUrl,
-  userPage,
   tournamentPage,
+  userPage,
 } from "~/utils/urls";
 import { actualNumber, id } from "~/utils/zod";
 import { Tags } from "../components/Tags";
-import { Table } from "~/components/Table";
-import * as CalendarRepository from "~/features/calendar/CalendarRepository.server";
+
+import "~/styles/calendar-event.css";
+import "~/styles/maps.css";
 
 export const action: ActionFunction = async ({ params, request }) => {
   const user = await requireUserId(request);
@@ -80,13 +80,6 @@ export const action: ActionFunction = async ({ params, request }) => {
   throw redirect(CALENDAR_PAGE);
 };
 
-export const links: LinksFunction = () => {
-  return [
-    { rel: "stylesheet", href: calendarStyles },
-    { rel: "stylesheet", href: mapsStyles },
-  ];
-};
-
 export const meta: MetaFunction = (args) => {
   const data = args.data as SerializeFrom<typeof loader>;
 
diff --git a/app/features/calendar/routes/calendar.new.tsx b/app/features/calendar/routes/calendar.new.tsx
index 47026744e..6d6d4346b 100644
--- a/app/features/calendar/routes/calendar.new.tsx
+++ b/app/features/calendar/routes/calendar.new.tsx
@@ -1,6 +1,5 @@
 import type {
   ActionFunction,
-  LinksFunction,
   LoaderFunctionArgs,
   MetaFunction,
   SerializeFrom,
@@ -45,8 +44,6 @@ import { i18next } from "~/modules/i18n/i18next.server";
 import type { RankedModeShort } from "~/modules/in-game-lists";
 import { rankedModesShort } from "~/modules/in-game-lists/modes";
 import { canEditCalendarEvent } from "~/permissions";
-import calendarNewStyles from "~/styles/calendar-new.css?url";
-import mapsStyles from "~/styles/maps.css?url";
 import { isDefined } from "~/utils/arrays";
 import {
   databaseTimestampToDate,
@@ -75,12 +72,8 @@ import {
 } from "../calendar-utils.server";
 import { Tags } from "../components/Tags";
 
-export const links: LinksFunction = () => {
-  return [
-    { rel: "stylesheet", href: calendarNewStyles },
-    { rel: "stylesheet", href: mapsStyles },
-  ];
-};
+import "~/styles/calendar-new.css";
+import "~/styles/maps.css";
 
 export const meta: MetaFunction = (args) => {
   const data = args.data as SerializeFrom<typeof loader> | null;
diff --git a/app/features/calendar/routes/calendar.tsx b/app/features/calendar/routes/calendar.tsx
index cf6b9950e..7e5278b58 100644
--- a/app/features/calendar/routes/calendar.tsx
+++ b/app/features/calendar/routes/calendar.tsx
@@ -1,25 +1,27 @@
-import { json } from "@remix-run/node";
 import type {
   LoaderFunctionArgs,
   MetaFunction,
   SerializeFrom,
-  LinksFunction,
 } from "@remix-run/node";
+import { json } from "@remix-run/node";
 import { Link, useLoaderData } from "@remix-run/react";
 import clsx from "clsx";
 import { addDays, addMonths, subDays, subMonths } from "date-fns";
 import React from "react";
 import { Flipped, Flipper } from "react-flip-toolkit";
+import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { Alert } from "~/components/Alert";
+import { Avatar } from "~/components/Avatar";
 import { LinkButton } from "~/components/Button";
+import { Divider } from "~/components/Divider";
 import { Main } from "~/components/Main";
-import { useIsMounted } from "~/hooks/useIsMounted";
-import { useTranslation } from "react-i18next";
+import { UsersIcon } from "~/components/icons/Users";
 import { useUser } from "~/features/auth/core/user";
 import { getUserId } from "~/features/auth/core/user.server";
+import { HACKY_resolvePicture } from "~/features/tournament/tournament-utils";
+import { useIsMounted } from "~/hooks/useIsMounted";
 import { i18next } from "~/modules/i18n/i18next.server";
-import styles from "~/styles/calendar.css?url";
 import { joinListToNaturalString } from "~/utils/arrays";
 import {
   databaseTimestampToDate,
@@ -33,24 +35,18 @@ import { type SendouRouteHandle } from "~/utils/remix";
 import { discordFullName, makeTitle } from "~/utils/strings";
 import type { Unpacked } from "~/utils/types";
 import {
-  calendarReportWinnersPage,
   CALENDAR_PAGE,
+  calendarReportWinnersPage,
   navIconUrl,
   resolveBaseUrl,
   tournamentPage,
 } from "~/utils/urls";
 import { actualNumber } from "~/utils/zod";
-import { Tags } from "../components/Tags";
-import { Divider } from "~/components/Divider";
-import { UsersIcon } from "~/components/icons/Users";
 import * as CalendarRepository from "../CalendarRepository.server";
 import { canAddNewEvent } from "../calendar-utils";
-import { Avatar } from "~/components/Avatar";
-import { HACKY_resolvePicture } from "~/features/tournament/tournament-utils";
+import { Tags } from "../components/Tags";
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+import "~/styles/calendar.css";
 
 export const meta: MetaFunction = (args) => {
   const data = args.data as SerializeFrom<typeof loader> | null;
diff --git a/app/features/front-page/routes/index.tsx b/app/features/front-page/routes/index.tsx
index d54e2332f..9e517dcae 100644
--- a/app/features/front-page/routes/index.tsx
+++ b/app/features/front-page/routes/index.tsx
@@ -11,8 +11,6 @@ import {
   userPage,
 } from "~/utils/urls";
 import { useTranslation } from "react-i18next";
-import type { LinksFunction } from "@remix-run/node";
-import styles from "~/styles/front.css?url";
 import { Link } from "@remix-run/react";
 import { GlobeIcon } from "~/components/icons/Globe";
 import { LanguageChanger } from "~/components/layout/LanguageChanger";
@@ -29,9 +27,7 @@ import { useTheme } from "~/features/theme/core/provider";
 import { useUser } from "~/features/auth/core/user";
 import { languages } from "~/modules/i18n/config";
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+import "~/styles/front.css";
 
 export default function FrontPage() {
   const data = useRootLoaderData();
diff --git a/app/features/info/routes/faq.tsx b/app/features/info/routes/faq.tsx
index 0f4bce4e5..63a9de86e 100644
--- a/app/features/info/routes/faq.tsx
+++ b/app/features/info/routes/faq.tsx
@@ -1,11 +1,12 @@
-import type { LinksFunction, MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
 import { useTranslation } from "react-i18next";
 import { Main } from "~/components/Main";
 import { useSetTitle } from "~/hooks/useSetTitle";
-import styles from "~/styles/faq.css?url";
 import { makeTitle } from "~/utils/strings";
 import { type SendouRouteHandle } from "~/utils/remix";
 
+import "~/styles/faq.css";
+
 const AMOUNT_OF_QUESTIONS = 9;
 
 export const meta: MetaFunction = () => {
@@ -15,10 +16,6 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const handle: SendouRouteHandle = {
   i18n: "faq",
 };
diff --git a/app/features/info/routes/support.tsx b/app/features/info/routes/support.tsx
index 1d214ce7d..f306e37f0 100644
--- a/app/features/info/routes/support.tsx
+++ b/app/features/info/routes/support.tsx
@@ -1,28 +1,24 @@
-import type { LinksFunction, MetaFunction } from "@remix-run/node";
-import { Main } from "~/components/Main";
-import styles from "../support.css?url";
+import type { MetaFunction } from "@remix-run/node";
 import * as React from "react";
-import { CheckmarkIcon } from "~/components/icons/Checkmark";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { Badge } from "~/components/Badge";
 import { LinkButton } from "~/components/Button";
+import { Main } from "~/components/Main";
+import { Popover } from "~/components/Popover";
+import { CheckmarkIcon } from "~/components/icons/Checkmark";
+import { useSetTitle } from "~/hooks/useSetTitle";
+import { makeTitle } from "~/utils/strings";
 import {
   PATREON_HOW_TO_CONNECT_DISCORD_URL,
   SENDOU_INK_PATREON_URL,
 } from "~/utils/urls";
-import { Popover } from "~/components/Popover";
-import { Trans } from "react-i18next";
-import { makeTitle } from "~/utils/strings";
-import { useSetTitle } from "~/hooks/useSetTitle";
+
+import "../support.css";
 
 export const meta: MetaFunction = () => {
   return [{ title: makeTitle("Support") }];
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 // 1 = support
 // 2 = supporter
 // 3 = supporter+
diff --git a/app/features/leaderboards/routes/leaderboards.tsx b/app/features/leaderboards/routes/leaderboards.tsx
index 72dc17d5a..189e18e2e 100644
--- a/app/features/leaderboards/routes/leaderboards.tsx
+++ b/app/features/leaderboards/routes/leaderboards.tsx
@@ -1,6 +1,5 @@
 import { cachified } from "@epic-web/cachified";
 import type {
-  LinksFunction,
   LoaderFunctionArgs,
   MetaFunction,
   SerializeFrom,
@@ -39,7 +38,6 @@ import {
   userSeasonsPage,
   userSubmittedImage,
 } from "~/utils/urls";
-import styles from "../../top-search/top-search.css?url";
 import { TopTenPlayer } from "../components/TopTenPlayer";
 import {
   cachedFullUserLeaderboard,
@@ -60,6 +58,8 @@ import {
 } from "../queries/XPLeaderboard.server";
 import { ordinalToSp } from "~/features/mmr/mmr-utils";
 
+import "../../top-search/top-search.css";
+
 export const handle: SendouRouteHandle = {
   i18n: ["vods"],
   breadcrumb: () => ({
@@ -84,10 +84,6 @@ export const meta: MetaFunction = (args) => {
   ];
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 const TYPE_SEARCH_PARAM_KEY = "type";
 const SEASON_SEARCH_PARAM_KEY = "season";
 
diff --git a/app/features/map-list-generator/routes/maps.tsx b/app/features/map-list-generator/routes/maps.tsx
index 3697ad2d6..0ca4b0ee5 100644
--- a/app/features/map-list-generator/routes/maps.tsx
+++ b/app/features/map-list-generator/routes/maps.tsx
@@ -1,5 +1,4 @@
 import type {
-  LinksFunction,
   LoaderFunctionArgs,
   MetaFunction,
   SerializeFrom,
@@ -7,33 +6,34 @@ import type {
 import type { ShouldRevalidateFunction } from "@remix-run/react";
 import { Link, useLoaderData, useSearchParams } from "@remix-run/react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { useCopyToClipboard } from "react-use";
 import invariant from "tiny-invariant";
 import { Button } from "~/components/Button";
-import { EditIcon } from "~/components/icons/Edit";
 import { Label } from "~/components/Label";
 import { Main } from "~/components/Main";
 import { MapPoolSelector, MapPoolStages } from "~/components/MapPoolSelector";
 import { Toggle } from "~/components/Toggle";
+import { EditIcon } from "~/components/icons/Edit";
 import type { CalendarEvent } from "~/db/types";
-import { useTranslation } from "react-i18next";
 import { getUserId } from "~/features/auth/core/user.server";
+import * as CalendarRepository from "~/features/calendar/CalendarRepository.server";
 import { i18next } from "~/modules/i18n/i18next.server";
 import { stageIds, type ModeWithStage } from "~/modules/in-game-lists";
-import styles from "~/styles/maps.css?url";
 import { type SendouRouteHandle } from "~/utils/remix";
 import { makeTitle } from "~/utils/strings";
 import {
+  MAPS_URL,
   calendarEventPage,
   ipLabsMaps,
-  MAPS_URL,
   navIconUrl,
 } from "~/utils/urls";
-import * as CalendarRepository from "~/features/calendar/CalendarRepository.server";
-import { MapPool } from "../core/map-pool";
 import { generateMapList } from "../core/map-list-generator/map-list";
 import { modesOrder } from "../core/map-list-generator/modes";
 import { mapPoolToNonEmptyModes } from "../core/map-list-generator/utils";
+import { MapPool } from "../core/map-pool";
+
+import "~/styles/maps.css";
 
 const AMOUNT_OF_MAPS_IN_MAP_LIST = stageIds.length * 2;
 
@@ -44,10 +44,6 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({ nextUrl }) => {
   return searchParams.has("readonly");
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const meta: MetaFunction = (args) => {
   const data = args.data as SerializeFrom<typeof loader> | null;
 
diff --git a/app/features/map-planner/routes/plans.tsx b/app/features/map-planner/routes/plans.tsx
index cc8c8cb7f..80b120f4c 100644
--- a/app/features/map-planner/routes/plans.tsx
+++ b/app/features/map-planner/routes/plans.tsx
@@ -1,6 +1,5 @@
 import { lazy } from "react";
-import type { LinksFunction, MetaFunction } from "@remix-run/node";
-import styles from "../plans.css?url";
+import type { MetaFunction } from "@remix-run/node";
 import type { SendouRouteHandle } from "~/utils/remix";
 import { useIsMounted } from "~/hooks/useIsMounted";
 import { navIconUrl, PLANNER_URL } from "~/utils/urls";
@@ -8,6 +7,8 @@ import { makeTitle } from "~/utils/strings";
 import { useTranslation } from "react-i18next";
 import { useSetTitle } from "~/hooks/useSetTitle";
 
+import "../plans.css";
+
 export const meta: MetaFunction = () => {
   return [
     { title: makeTitle("Planner") },
@@ -28,10 +29,6 @@ export const handle: SendouRouteHandle = {
   }),
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 const Planner = lazy(() => import("~/features/map-planner/components/Planner"));
 
 export default function MapPlannerPage() {
diff --git a/app/features/object-damage-calculator/routes/object-damage-calculator.tsx b/app/features/object-damage-calculator/routes/object-damage-calculator.tsx
index 6b56c63dc..aa2ff8e4d 100644
--- a/app/features/object-damage-calculator/routes/object-damage-calculator.tsx
+++ b/app/features/object-damage-calculator/routes/object-damage-calculator.tsx
@@ -1,25 +1,24 @@
-import type { LinksFunction } from "@remix-run/node";
 import type { ShouldRevalidateFunction } from "@remix-run/react";
 import clsx from "clsx";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { Ability } from "~/components/Ability";
 import { AllWeaponCombobox } from "~/components/Combobox";
 import { Image, WeaponImage } from "~/components/Image";
 import { Label } from "~/components/Label";
 import { Main } from "~/components/Main";
 import { Toggle } from "~/components/Toggle";
-import { possibleApValues } from "~/features/build-analyzer";
 import type { AnyWeapon, DamageType } from "~/features/build-analyzer";
+import { possibleApValues } from "~/features/build-analyzer";
 import { useSetTitle } from "~/hooks/useSetTitle";
-import { useTranslation } from "react-i18next";
 import {
   BIG_BUBBLER_ID,
   BOOYAH_BOMB_ID,
   CRAB_TANK_ID,
+  INK_VAC_ID,
   SPLASH_WALL_ID,
   SPRINKLER_ID,
   SQUID_BEAKON_ID,
-  INK_VAC_ID,
   TORPEDO_ID,
   WAVE_BREAKER_ID,
 } from "~/modules/in-game-lists";
@@ -35,16 +34,13 @@ import {
 } from "~/utils/urls";
 import { useObjectDamage } from "../calculator-hooks";
 import type { DamageReceiver } from "../calculator-types";
-import styles from "../calculator.css?url";
+
+import "../calculator.css";
 
 export const CURRENT_PATCH = "6.1";
 
 export const shouldRevalidate: ShouldRevalidateFunction = () => false;
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const handle: SendouRouteHandle = {
   i18n: ["weapons", "analyzer", "builds"],
   breadcrumb: () => ({
diff --git a/app/features/plus-suggestions/routes/plus.tsx b/app/features/plus-suggestions/routes/plus.tsx
index cdc99329d..1c6b38441 100644
--- a/app/features/plus-suggestions/routes/plus.tsx
+++ b/app/features/plus-suggestions/routes/plus.tsx
@@ -1,14 +1,10 @@
-import type { LinksFunction } from "@remix-run/node";
 import { Outlet } from "@remix-run/react";
 import { Main } from "~/components/Main";
 import { SubNav, SubNavLink } from "~/components/SubNav";
-import styles from "~/styles/plus.css?url";
 import { type SendouRouteHandle } from "~/utils/remix";
 import { navIconUrl, plusSuggestionPage } from "~/utils/urls";
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+import "~/styles/plus.css";
 
 export const handle: SendouRouteHandle = {
   navItemName: "plus",
diff --git a/app/features/plus-voting/routes/plus.voting.results.tsx b/app/features/plus-voting/routes/plus.voting.results.tsx
index cf6a69239..94eee22f1 100644
--- a/app/features/plus-voting/routes/plus.voting.results.tsx
+++ b/app/features/plus-voting/routes/plus.voting.results.tsx
@@ -1,5 +1,4 @@
 import type {
-  LinksFunction,
   LoaderFunctionArgs,
   SerializeFrom,
   MetaFunction,
@@ -11,15 +10,12 @@ import type { UserWithPlusTier } from "~/db/types";
 import * as PlusVotingRepository from "~/features/plus-voting/PlusVotingRepository.server";
 import { getUser } from "~/features/auth/core/user.server";
 import { lastCompletedVoting } from "~/features/plus-voting/core";
-import styles from "~/styles/plus-history.css?url";
 import { roundToNDecimalPlaces } from "~/utils/number";
 import { makeTitle } from "~/utils/strings";
 import { PLUS_SERVER_DISCORD_URL, userPage } from "~/utils/urls";
 import { isAtLeastFiveDollarTierPatreon } from "~/utils/users";
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+import "~/styles/plus-history.css";
 
 export const meta: MetaFunction = (args) => {
   const data = args.data as SerializeFrom<typeof loader>;
diff --git a/app/features/sendouq-settings/routes/q.settings.tsx b/app/features/sendouq-settings/routes/q.settings.tsx
index a2b8c89b9..9f3b652d2 100644
--- a/app/features/sendouq-settings/routes/q.settings.tsx
+++ b/app/features/sendouq-settings/routes/q.settings.tsx
@@ -1,9 +1,5 @@
 import { RadioGroup } from "@headlessui/react";
-import type {
-  ActionFunctionArgs,
-  LinksFunction,
-  LoaderFunctionArgs,
-} from "@remix-run/node";
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
 import { useFetcher, useLoaderData } from "@remix-run/react";
 import clsx from "clsx";
 import * as React from "react";
@@ -48,11 +44,8 @@ import {
   SENDOUQ_WEAPON_POOL_MAX_SIZE,
 } from "../q-settings-constants";
 import { settingsActionSchema } from "../q-settings-schemas.server";
-import styles from "../q-settings.css?url";
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+import "../q-settings.css";
 
 export const handle: SendouRouteHandle = {
   i18n: ["q"],
diff --git a/app/features/sendouq-streams/routes/q.streams.tsx b/app/features/sendouq-streams/routes/q.streams.tsx
index e4e0b3d56..7411d960d 100644
--- a/app/features/sendouq-streams/routes/q.streams.tsx
+++ b/app/features/sendouq-streams/routes/q.streams.tsx
@@ -1,27 +1,23 @@
 import { Link, useLoaderData } from "@remix-run/react";
+import { useTranslation } from "react-i18next";
+import { Avatar } from "~/components/Avatar";
+import { TierImage, WeaponImage } from "~/components/Image";
 import { Main } from "~/components/Main";
 import { UserIcon } from "~/components/icons/User";
+import { useAutoRerender } from "~/hooks/useAutoRerender";
+import { useIsMounted } from "~/hooks/useIsMounted";
 import { twitchThumbnailUrlToSrc } from "~/modules/twitch/utils";
+import { databaseTimestampToDate } from "~/utils/dates";
+import type { SendouRouteHandle } from "~/utils/remix";
 import { FAQ_PAGE, sendouQMatchPage, twitchUrl, userPage } from "~/utils/urls";
 import { cachedStreams } from "../core/streams.server";
-import { Avatar } from "~/components/Avatar";
-import styles from "~/features/sendouq/q.css?url";
-import type { LinksFunction } from "@remix-run/node";
-import { useTranslation } from "react-i18next";
-import { useIsMounted } from "~/hooks/useIsMounted";
-import { databaseTimestampToDate } from "~/utils/dates";
-import { TierImage, WeaponImage } from "~/components/Image";
-import { useAutoRerender } from "~/hooks/useAutoRerender";
-import type { SendouRouteHandle } from "~/utils/remix";
+
+import "~/features/sendouq/q.css";
 
 export const handle: SendouRouteHandle = {
   i18n: ["q"],
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const loader = async () => {
   return {
     streams: await cachedStreams(),
diff --git a/app/features/sendouq/routes/q.looking.tsx b/app/features/sendouq/routes/q.looking.tsx
index 55da65edf..f38eadb4d 100644
--- a/app/features/sendouq/routes/q.looking.tsx
+++ b/app/features/sendouq/routes/q.looking.tsx
@@ -1,6 +1,5 @@
 import type {
   ActionFunction,
-  LinksFunction,
   LoaderFunctionArgs,
   MetaFunction,
 } from "@remix-run/node";
@@ -63,7 +62,6 @@ import { FULL_GROUP_SIZE } from "../q-constants";
 import { lookingSchema } from "../q-schemas.server";
 import type { LookingGroupWithInviteCode } from "../q-types";
 import { groupRedirectLocationByCurrentLocation } from "../q-utils";
-import styles from "../q.css?url";
 import { addLike } from "../queries/addLike.server";
 import { addManagerRole } from "../queries/addManagerRole.server";
 import { chatCodeByGroupId } from "../queries/chatCodeByGroupId.server";
@@ -84,6 +82,8 @@ import { updateNote } from "../queries/updateNote.server";
 import { cachedStreams } from "~/features/sendouq-streams/core/streams.server";
 import { isAtLeastFiveDollarTierPatreon } from "~/utils/users";
 
+import "../q.css";
+
 export const handle: SendouRouteHandle = {
   i18n: ["user", "q"],
   breadcrumb: () => ({
@@ -93,10 +93,6 @@ export const handle: SendouRouteHandle = {
   }),
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const meta: MetaFunction = () => {
   return [{ title: makeTitle("SendouQ") }];
 };
diff --git a/app/features/sendouq/routes/q.match.$id.tsx b/app/features/sendouq/routes/q.match.$id.tsx
index e3f78cc18..eded3fe7d 100644
--- a/app/features/sendouq/routes/q.match.$id.tsx
+++ b/app/features/sendouq/routes/q.match.$id.tsx
@@ -1,6 +1,5 @@
 import type {
   ActionFunctionArgs,
-  LinksFunction,
   LoaderFunctionArgs,
   SerializeFrom,
   MetaFunction,
@@ -78,7 +77,6 @@ import {
 import { FULL_GROUP_SIZE, USER_SKILLS_CACHE_KEY } from "../q-constants";
 import { matchSchema } from "../q-schemas.server";
 import { matchIdFromParams, winnersArrayToWinner } from "../q-utils";
-import styles from "../q.css?url";
 import { addDummySkill } from "../queries/addDummySkill.server";
 import { addMapResults } from "../queries/addMapResults.server";
 import { addPlayerResults } from "../queries/addPlayerResults.server";
@@ -107,6 +105,8 @@ import { CrossIcon } from "~/components/icons/Cross";
 import { SPLATTERCOLOR_SCREEN_ID } from "~/modules/in-game-lists/weapon-ids";
 import { currentSeason } from "~/features/mmr/season";
 
+import "../q.css";
+
 export const meta: MetaFunction = (args) => {
   const data = args.data as SerializeFrom<typeof loader> | null;
 
@@ -127,10 +127,6 @@ export const meta: MetaFunction = (args) => {
   ];
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const handle: SendouRouteHandle = {
   i18n: ["q", "tournament", "user"],
   breadcrumb: () => ({
diff --git a/app/features/sendouq/routes/q.preparing.tsx b/app/features/sendouq/routes/q.preparing.tsx
index 937f4a71e..cfcb84f41 100644
--- a/app/features/sendouq/routes/q.preparing.tsx
+++ b/app/features/sendouq/routes/q.preparing.tsx
@@ -1,6 +1,5 @@
 import type {
   ActionFunctionArgs,
-  LinksFunction,
   LoaderFunctionArgs,
   MetaFunction,
 } from "@remix-run/node";
@@ -13,6 +12,7 @@ import { SubmitButton } from "~/components/SubmitButton";
 import { getUser, requireUser } from "~/features/auth/core/user.server";
 import { currentSeason } from "~/features/mmr/season";
 import * as QMatchRepository from "~/features/sendouq-match/QMatchRepository.server";
+import * as QRepository from "~/features/sendouq/QRepository.server";
 import { useAutoRefresh } from "~/hooks/useAutoRefresh";
 import type { SendouRouteHandle } from "~/utils/remix";
 import { parseRequestFormData, validate } from "~/utils/remix";
@@ -30,13 +30,13 @@ import { hasGroupManagerPerms } from "../core/groups";
 import { FULL_GROUP_SIZE } from "../q-constants";
 import { preparingSchema } from "../q-schemas.server";
 import { groupRedirectLocationByCurrentLocation } from "../q-utils";
-import styles from "../q.css?url";
 import { addMember } from "../queries/addMember.server";
 import { findCurrentGroupByUserId } from "../queries/findCurrentGroupByUserId.server";
 import { findPreparingGroup } from "../queries/findPreparingGroup.server";
 import { refreshGroup } from "../queries/refreshGroup.server";
 import { setGroupAsActive } from "../queries/setGroupAsActive.server";
-import * as QRepository from "~/features/sendouq/QRepository.server";
+
+import "../q.css";
 
 export const handle: SendouRouteHandle = {
   i18n: ["q", "user"],
@@ -47,10 +47,6 @@ export const handle: SendouRouteHandle = {
   }),
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const meta: MetaFunction = () => {
   return [{ title: makeTitle("SendouQ") }];
 };
diff --git a/app/features/sendouq/routes/q.tsx b/app/features/sendouq/routes/q.tsx
index 64a8fe8f6..c8457f1af 100644
--- a/app/features/sendouq/routes/q.tsx
+++ b/app/features/sendouq/routes/q.tsx
@@ -1,6 +1,5 @@
 import type {
   ActionFunction,
-  LinksFunction,
   LoaderFunctionArgs,
   MetaFunction,
   SerializeFrom,
@@ -19,6 +18,7 @@ import { FormMessage } from "~/components/FormMessage";
 import { FriendCodeInput } from "~/components/FriendCodeInput";
 import { Image } from "~/components/Image";
 import { Main } from "~/components/Main";
+import { Popover } from "~/components/Popover";
 import { SubmitButton } from "~/components/SubmitButton";
 import { UserIcon } from "~/components/icons/User";
 import { UsersIcon } from "~/components/icons/Users";
@@ -26,9 +26,8 @@ import { sql } from "~/db/sql";
 import type { GroupMember } from "~/db/types";
 import { useUser } from "~/features/auth/core/user";
 import { getUserId, requireUserId } from "~/features/auth/core/user.server";
-import { currentSeason } from "~/features/mmr/season";
 import type { RankingSeason } from "~/features/mmr/season";
-import { nextSeason } from "~/features/mmr/season";
+import { currentSeason, nextSeason } from "~/features/mmr/season";
 import * as QRepository from "~/features/sendouq/QRepository.server";
 import { giveTrust } from "~/features/tournament/queries/giveTrust.server";
 import * as UserRepository from "~/features/user-page/UserRepository.server";
@@ -55,16 +54,16 @@ import {
   navIconUrl,
   userSeasonsPage,
 } from "~/utils/urls";
+import { isAtLeastFiveDollarTierPatreon } from "~/utils/users";
 import { FULL_GROUP_SIZE, JOIN_CODE_SEARCH_PARAM_KEY } from "../q-constants";
 import { frontPageSchema } from "../q-schemas.server";
 import { groupRedirectLocationByCurrentLocation } from "../q-utils";
-import styles from "../q.css?url";
 import { addMember } from "../queries/addMember.server";
 import { deleteLikesByGroupId } from "../queries/deleteLikesByGroupId.server";
 import { findCurrentGroupByUserId } from "../queries/findCurrentGroupByUserId.server";
 import { findGroupByInviteCode } from "../queries/findGroupByInviteCode.server";
-import { isAtLeastFiveDollarTierPatreon } from "~/utils/users";
-import { Popover } from "~/components/Popover";
+
+import "../q.css";
 
 export const handle: SendouRouteHandle = {
   i18n: ["q"],
@@ -75,10 +74,6 @@ export const handle: SendouRouteHandle = {
   }),
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const meta: MetaFunction = () => {
   return [
     { title: makeTitle("SendouQ") },
diff --git a/app/features/team/routes/t.$customUrl.edit.tsx b/app/features/team/routes/t.$customUrl.edit.tsx
index 40d204c06..a0e5fbff7 100644
--- a/app/features/team/routes/t.$customUrl.edit.tsx
+++ b/app/features/team/routes/t.$customUrl.edit.tsx
@@ -1,22 +1,22 @@
-import { redirect } from "@remix-run/node";
 import type {
-  LinksFunction,
-  MetaFunction,
-  SerializeFrom,
   ActionFunction,
   LoaderFunctionArgs,
+  MetaFunction,
+  SerializeFrom,
 } from "@remix-run/node";
+import { redirect } from "@remix-run/node";
 import { Form, Link, useLoaderData } from "@remix-run/react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { Button } from "~/components/Button";
 import { CustomizedColorsInput } from "~/components/CustomizedColorsInput";
 import { FormErrors } from "~/components/FormErrors";
 import { FormMessage } from "~/components/FormMessage";
 import { FormWithConfirm } from "~/components/FormWithConfirm";
+import { Input } from "~/components/Input";
 import { Label } from "~/components/Label";
 import { Main } from "~/components/Main";
 import { SubmitButton } from "~/components/SubmitButton";
-import { useTranslation } from "react-i18next";
 import { requireUserId } from "~/features/auth/core/user.server";
 import {
   notFoundIfFalsy,
@@ -27,10 +27,10 @@ import {
 import { makeTitle, pathnameFromPotentialURL } from "~/utils/strings";
 import { assertUnreachable } from "~/utils/types";
 import {
+  TEAM_SEARCH_PAGE,
   mySlugify,
   navIconUrl,
   teamPage,
-  TEAM_SEARCH_PAGE,
   uploadImagePage,
 } from "~/utils/urls";
 import { deleteTeam } from "../queries/deleteTeam.server";
@@ -39,12 +39,8 @@ import { findByIdentifier } from "../queries/findByIdentifier.server";
 import { TEAM } from "../team-constants";
 import { editTeamSchema, teamParamsSchema } from "../team-schemas.server";
 import { canAddCustomizedColors, isTeamOwner } from "../team-utils";
-import styles from "../team.css?url";
-import { Input } from "~/components/Input";
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+import "../team.css";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   if (!data) return [];
diff --git a/app/features/team/routes/t.$customUrl.join.tsx b/app/features/team/routes/t.$customUrl.join.tsx
index f75d7c7e8..dcb860871 100644
--- a/app/features/team/routes/t.$customUrl.join.tsx
+++ b/app/features/team/routes/t.$customUrl.join.tsx
@@ -1,8 +1,4 @@
-import type {
-  ActionFunction,
-  LinksFunction,
-  LoaderFunctionArgs,
-} from "@remix-run/node";
+import type { ActionFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 import { Form, useLoaderData } from "@remix-run/react";
 import { Main } from "~/components/Main";
@@ -24,11 +20,7 @@ import type { DetailedTeam } from "../team-types";
 import { isTeamFull, isTeamMember } from "../team-utils";
 import * as UserRepository from "~/features/user-page/UserRepository.server";
 
-import styles from "../team.css?url";
-
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+import "../team.css";
 
 export const action: ActionFunction = async ({ request, params }) => {
   const user = await requireUser(request);
diff --git a/app/features/team/routes/t.$customUrl.roster.tsx b/app/features/team/routes/t.$customUrl.roster.tsx
index b5f9445d5..09ea8c507 100644
--- a/app/features/team/routes/t.$customUrl.roster.tsx
+++ b/app/features/team/routes/t.$customUrl.roster.tsx
@@ -1,6 +1,5 @@
 import { redirect } from "@remix-run/node";
 import type {
-  LinksFunction,
   MetaFunction,
   SerializeFrom,
   ActionFunction,
@@ -39,11 +38,8 @@ import { TEAM_MEMBER_ROLES } from "../team-constants";
 import { manageRosterSchema, teamParamsSchema } from "../team-schemas.server";
 import type { DetailedTeamMember } from "../team-types";
 import { isTeamFull, isTeamOwner } from "../team-utils";
-import styles from "../team.css?url";
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+import "../team.css";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   if (!data) return [];
diff --git a/app/features/team/routes/t.$customUrl.tsx b/app/features/team/routes/t.$customUrl.tsx
index 9a52b4990..b91783ca9 100644
--- a/app/features/team/routes/t.$customUrl.tsx
+++ b/app/features/team/routes/t.$customUrl.tsx
@@ -1,6 +1,5 @@
 import type {
   ActionFunction,
-  LinksFunction,
   LoaderFunctionArgs,
   MetaFunction,
   SerializeFrom,
@@ -8,17 +7,17 @@ import type {
 import { Link, useLoaderData } from "@remix-run/react";
 import clsx from "clsx";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { Avatar } from "~/components/Avatar";
 import { Button, LinkButton } from "~/components/Button";
 import { Flag } from "~/components/Flag";
 import { FormWithConfirm } from "~/components/FormWithConfirm";
-import { EditIcon } from "~/components/icons/Edit";
-import { TwitterIcon } from "~/components/icons/Twitter";
-import { UsersIcon } from "~/components/icons/Users";
 import { WeaponImage } from "~/components/Image";
 import { Main } from "~/components/Main";
 import { Placement } from "~/components/Placement";
-import { useTranslation } from "react-i18next";
+import { EditIcon } from "~/components/icons/Edit";
+import { TwitterIcon } from "~/components/icons/Twitter";
+import { UsersIcon } from "~/components/icons/Users";
 import { useUser } from "~/features/auth/core/user";
 import { requireUserId } from "~/features/auth/core/user.server";
 import {
@@ -28,11 +27,11 @@ import {
 } from "~/utils/remix";
 import { makeTitle } from "~/utils/strings";
 import {
+  TEAM_SEARCH_PAGE,
   editTeamPage,
   manageTeamRosterPage,
   navIconUrl,
   teamPage,
-  TEAM_SEARCH_PAGE,
   twitterUrl,
   userPage,
   userSubmittedImage,
@@ -46,7 +45,8 @@ import {
   isTeamMember,
   isTeamOwner,
 } from "../team-utils";
-import styles from "../team.css?url";
+
+import "../team.css";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   if (!data) return [];
@@ -57,10 +57,6 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
   ];
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const action: ActionFunction = async ({ request, params }) => {
   const user = await requireUserId(request);
 
diff --git a/app/features/team/routes/t.tsx b/app/features/team/routes/t.tsx
index d4c27db78..b4dcd87bc 100644
--- a/app/features/team/routes/t.tsx
+++ b/app/features/team/routes/t.tsx
@@ -1,6 +1,5 @@
 import type {
   ActionFunction,
-  LinksFunction,
   LoaderFunctionArgs,
   MetaFunction,
 } from "@remix-run/node";
@@ -39,20 +38,17 @@ import { allTeams } from "../queries/allTeams.server";
 import { createNewTeam } from "../queries/createNewTeam.server";
 import { TEAM, TEAMS_PER_PAGE } from "../team-constants";
 import { createTeamSchema } from "../team-schemas.server";
-import styles from "../team.css?url";
 import { usePagination } from "~/hooks/usePagination";
 import { Pagination } from "~/components/Pagination";
 
+import "../team.css";
+
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   if (!data) return [];
 
   return [{ title: data.title }];
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const action: ActionFunction = async ({ request }) => {
   const user = await requireUserId(request);
   const data = await parseRequestFormData({
diff --git a/app/features/top-search/routes/xsearch.player.$id.tsx b/app/features/top-search/routes/xsearch.player.$id.tsx
index 9de0872e6..cc8dc3918 100644
--- a/app/features/top-search/routes/xsearch.player.$id.tsx
+++ b/app/features/top-search/routes/xsearch.player.$id.tsx
@@ -1,25 +1,25 @@
 import type {
-  LinksFunction,
   LoaderFunctionArgs,
   MetaFunction,
   SerializeFrom,
 } from "@remix-run/node";
 import { Link, useLoaderData } from "@remix-run/react";
+import { useTranslation } from "react-i18next";
 import { Main } from "~/components/Main";
-import { type SendouRouteHandle, notFoundIfFalsy } from "~/utils/remix";
-import { PlacementsTable } from "../components/Placements";
-import { findPlacementsByPlayerId } from "../queries/findPlacements.server";
-import styles from "../top-search.css?url";
+import { i18next } from "~/modules/i18n/i18next.server";
 import { removeDuplicates } from "~/utils/arrays";
+import { notFoundIfFalsy, type SendouRouteHandle } from "~/utils/remix";
+import { makeTitle } from "~/utils/strings";
 import {
   navIconUrl,
   topSearchPage,
   topSearchPlayerPage,
   userPage,
 } from "~/utils/urls";
-import { i18next } from "~/modules/i18n/i18next.server";
-import { makeTitle } from "~/utils/strings";
-import { useTranslation } from "react-i18next";
+import { PlacementsTable } from "../components/Placements";
+import { findPlacementsByPlayerId } from "../queries/findPlacements.server";
+
+import "../top-search.css";
 
 export const handle: SendouRouteHandle = {
   breadcrumb: ({ match }) => {
@@ -44,10 +44,6 @@ export const handle: SendouRouteHandle = {
   },
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const meta: MetaFunction = (args) => {
   const data = args.data as SerializeFrom<typeof loader> | null;
 
diff --git a/app/features/top-search/routes/xsearch.tsx b/app/features/top-search/routes/xsearch.tsx
index 91a3dd9e8..2b3022f95 100644
--- a/app/features/top-search/routes/xsearch.tsx
+++ b/app/features/top-search/routes/xsearch.tsx
@@ -1,5 +1,4 @@
 import type {
-  LinksFunction,
   LoaderFunctionArgs,
   MetaFunction,
   SerializeFrom,
@@ -7,7 +6,6 @@ import type {
 import { useLoaderData, useSearchParams } from "@remix-run/react";
 import { Main } from "~/components/Main";
 import { findPlacementsOfMonth } from "../queries/findPlacements.server";
-import styles from "../top-search.css?url";
 import { PlacementsTable } from "../components/Placements";
 import { rankedModesShort } from "~/modules/in-game-lists/modes";
 import type { XRankPlacement } from "~/db/types";
@@ -22,6 +20,8 @@ import { monthYears } from "../queries/monthYears";
 import type { SendouRouteHandle } from "~/utils/remix";
 import { navIconUrl, topSearchPage } from "~/utils/urls";
 
+import "../top-search.css?url";
+
 export const handle: SendouRouteHandle = {
   breadcrumb: () => ({
     imgPath: navIconUrl("xsearch"),
@@ -30,10 +30,6 @@ export const handle: SendouRouteHandle = {
   }),
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const meta: MetaFunction = (args) => {
   const data = args.data as SerializeFrom<typeof loader> | null;
 
diff --git a/app/features/tournament-bracket/routes/to.$id.brackets.tsx b/app/features/tournament-bracket/routes/to.$id.brackets.tsx
index 1a731b8bc..e843e56b1 100644
--- a/app/features/tournament-bracket/routes/to.$id.brackets.tsx
+++ b/app/features/tournament-bracket/routes/to.$id.brackets.tsx
@@ -1,4 +1,4 @@
-import type { ActionFunction, LinksFunction } from "@remix-run/node";
+import type { ActionFunction } from "@remix-run/node";
 import { Form, Link, useFetcher, useRevalidator } from "@remix-run/react";
 import clsx from "clsx";
 import * as React from "react";
@@ -7,23 +7,32 @@ import { useCopyToClipboard } from "react-use";
 import { useEventSource } from "remix-utils/sse/react";
 import invariant from "tiny-invariant";
 import { Alert } from "~/components/Alert";
+import { Avatar } from "~/components/Avatar";
 import { Button } from "~/components/Button";
 import { Divider } from "~/components/Divider";
+import { Flag } from "~/components/Flag";
 import { FormWithConfirm } from "~/components/FormWithConfirm";
+import { Placement } from "~/components/Placement";
 import { Popover } from "~/components/Popover";
 import { SubmitButton } from "~/components/SubmitButton";
+import { EyeIcon } from "~/components/icons/Eye";
+import { EyeSlashIcon } from "~/components/icons/EyeSlash";
 import { sql } from "~/db/sql";
+import { useUser } from "~/features/auth/core/user";
 import { requireUser } from "~/features/auth/core/user.server";
 import {
   queryCurrentTeamRating,
   queryCurrentUserRating,
   queryTeamPlayerRatingAverage,
 } from "~/features/mmr/mmr-utils.server";
+import { currentSeason } from "~/features/mmr/season";
 import { TOURNAMENT, tournamentIdFromParams } from "~/features/tournament";
 import * as TournamentRepository from "~/features/tournament/TournamentRepository.server";
+import { BRACKET_NAMES } from "~/features/tournament/tournament-constants";
 import { HACKY_isInviteOnlyEvent } from "~/features/tournament/tournament-utils";
 import { useSearchParamState } from "~/hooks/useSearchParamState";
 import { useVisibilityChange } from "~/hooks/useVisibilityChange";
+import { removeDuplicates } from "~/utils/arrays";
 import { parseRequestFormData, validate } from "~/utils/remix";
 import { assertUnreachable } from "~/utils/types";
 import {
@@ -37,8 +46,11 @@ import {
   useBracketExpanded,
   useTournament,
 } from "../../tournament/routes/to.$id";
+import { Bracket } from "../components/Bracket";
+import type { Standing } from "../core/Bracket";
 import { tournamentFromDB } from "../core/Tournament.server";
 import { resolveBestOfs } from "../core/bestOf.server";
+import { getServerTournamentManager } from "../core/brackets-manager/manager.server";
 import { tournamentSummary } from "../core/summarizer.server";
 import { addSummary } from "../queries/addSummary.server";
 import { allMatchResultsByTournamentId } from "../queries/allMatchResultsByTournamentId.server";
@@ -49,33 +61,9 @@ import {
   bracketSubscriptionKey,
   fillWithNullTillPowerOfTwo,
 } from "../tournament-bracket-utils";
-import bracketStyles from "../tournament-bracket.css?url";
-import bracketComponentStyles from "../components/Bracket/bracket.css?url";
-import type { Standing } from "../core/Bracket";
-import { removeDuplicates } from "~/utils/arrays";
-import { Placement } from "~/components/Placement";
-import { Avatar } from "~/components/Avatar";
-import { Flag } from "~/components/Flag";
-import { BRACKET_NAMES } from "~/features/tournament/tournament-constants";
-import { Bracket } from "../components/Bracket";
-import { EyeIcon } from "~/components/icons/Eye";
-import { EyeSlashIcon } from "~/components/icons/EyeSlash";
-import { useUser } from "~/features/auth/core/user";
-import { currentSeason } from "~/features/mmr/season";
-import { getServerTournamentManager } from "../core/brackets-manager/manager.server";
 
-export const links: LinksFunction = () => {
-  return [
-    {
-      rel: "stylesheet",
-      href: bracketStyles,
-    },
-    {
-      rel: "stylesheet",
-      href: bracketComponentStyles,
-    },
-  ];
-};
+import "../components/Bracket/bracket.css";
+import "../tournament-bracket.css";
 
 export const action: ActionFunction = async ({ params, request }) => {
   const user = await requireUser(request);
diff --git a/app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx b/app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx
index a7a9de427..67c57434e 100644
--- a/app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx
+++ b/app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx
@@ -1,8 +1,4 @@
-import type {
-  ActionFunction,
-  LinksFunction,
-  LoaderFunctionArgs,
-} from "@remix-run/node";
+import type { ActionFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { Link, useLoaderData, useRevalidator } from "@remix-run/react";
 import clsx from "clsx";
 import { nanoid } from "nanoid";
@@ -13,8 +9,10 @@ import { Avatar } from "~/components/Avatar";
 import { LinkButton } from "~/components/Button";
 import { ArrowLongLeftIcon } from "~/components/icons/ArrowLongLeft";
 import { sql } from "~/db/sql";
+import { useUser } from "~/features/auth/core/user";
 import { requireUser } from "~/features/auth/core/user.server";
 import { tournamentIdFromParams } from "~/features/tournament";
+import * as TournamentRepository from "~/features/tournament/TournamentRepository.server";
 import { useTournament } from "~/features/tournament/routes/to.$id";
 import { useSearchParamState } from "~/hooks/useSearchParamState";
 import { useVisibilityChange } from "~/hooks/useVisibilityChange";
@@ -28,8 +26,10 @@ import {
   tournamentTeamPage,
   userPage,
 } from "~/utils/urls";
+import { CastInfo } from "../components/CastInfo";
 import { ScoreReporter } from "../components/ScoreReporter";
 import { tournamentFromDB } from "../core/Tournament.server";
+import { getServerTournamentManager } from "../core/brackets-manager/manager.server";
 import { emitter } from "../core/emitters.server";
 import { resolveMapList } from "../core/mapList.server";
 import { deleteTournamentMatchGameResultById } from "../queries/deleteTournamentMatchGameResultById.server";
@@ -44,18 +44,8 @@ import {
   matchIsLocked,
   matchSubscriptionKey,
 } from "../tournament-bracket-utils";
-import bracketStyles from "../tournament-bracket.css?url";
-import { CastInfo } from "../components/CastInfo";
-import * as TournamentRepository from "~/features/tournament/TournamentRepository.server";
-import { useUser } from "~/features/auth/core/user";
-import { getServerTournamentManager } from "../core/brackets-manager/manager.server";
 
-export const links: LinksFunction = () => [
-  {
-    rel: "stylesheet",
-    href: bracketStyles,
-  },
-];
+import "../tournament-bracket.css";
 
 export const action: ActionFunction = async ({ params, request }) => {
   const user = await requireUser(request);
diff --git a/app/features/tournament-subs/routes/to.$id.subs.new.tsx b/app/features/tournament-subs/routes/to.$id.subs.new.tsx
index 62361ba94..e8baffd25 100644
--- a/app/features/tournament-subs/routes/to.$id.subs.new.tsx
+++ b/app/features/tournament-subs/routes/to.$id.subs.new.tsx
@@ -1,7 +1,6 @@
 import {
   redirect,
   type ActionFunction,
-  type LinksFunction,
   type LoaderFunctionArgs,
 } from "@remix-run/node";
 import { Form, useLoaderData } from "@remix-run/react";
@@ -9,7 +8,6 @@ import React from "react";
 import { Label } from "~/components/Label";
 import { SubmitButton } from "~/components/SubmitButton";
 import { useTranslation } from "react-i18next";
-import styles from "../tournament-subs.css?url";
 import { requireUser } from "~/features/auth/core/user.server";
 import type { MainWeaponId } from "~/modules/in-game-lists";
 import { WeaponCombobox } from "~/components/Combobox";
@@ -26,19 +24,12 @@ import { upsertSub } from "../queries/upsertSub.server";
 import { tournamentSubsPage } from "~/utils/urls";
 import { useUser } from "~/features/auth/core/user";
 
+import "../tournament-subs.css";
+
 export const handle: SendouRouteHandle = {
   i18n: ["user"],
 };
 
-export const links: LinksFunction = () => {
-  return [
-    {
-      rel: "stylesheet",
-      href: styles,
-    },
-  ];
-};
-
 export const action: ActionFunction = async ({ params, request }) => {
   const user = await requireUser(request);
   const data = await parseRequestFormData({
diff --git a/app/features/tournament-subs/routes/to.$id.subs.tsx b/app/features/tournament-subs/routes/to.$id.subs.tsx
index 4a731f22b..89c0089cb 100644
--- a/app/features/tournament-subs/routes/to.$id.subs.tsx
+++ b/app/features/tournament-subs/routes/to.$id.subs.tsx
@@ -1,7 +1,6 @@
 import {
   redirect,
   type ActionFunction,
-  type LinksFunction,
   type LoaderFunctionArgs,
 } from "@remix-run/node";
 import { Link, useLoaderData } from "@remix-run/react";
@@ -15,7 +14,10 @@ import { WeaponImage } from "~/components/Image";
 import { Redirect } from "~/components/Redirect";
 import { MicrophoneIcon } from "~/components/icons/Microphone";
 import { TrashIcon } from "~/components/icons/Trash";
+import { useUser } from "~/features/auth/core/user";
+import { getUser, requireUser } from "~/features/auth/core/user.server";
 import { tournamentIdFromParams } from "~/features/tournament";
+import { tournamentFromDB } from "~/features/tournament-bracket/core/Tournament.server";
 import { useTournament } from "~/features/tournament/routes/to.$id";
 import { discordFullName } from "~/utils/strings";
 import { assertUnreachable } from "~/utils/types";
@@ -25,19 +27,8 @@ import {
   findSubsByTournamentId,
   type SubByTournamentId,
 } from "../queries/findSubsByTournamentId.server";
-import styles from "../tournament-subs.css?url";
-import { tournamentFromDB } from "~/features/tournament-bracket/core/Tournament.server";
-import { getUser, requireUser } from "~/features/auth/core/user.server";
-import { useUser } from "~/features/auth/core/user";
 
-export const links: LinksFunction = () => {
-  return [
-    {
-      rel: "stylesheet",
-      href: styles,
-    },
-  ];
-};
+import "../tournament-subs.css";
 
 export const action: ActionFunction = async ({ request, params }) => {
   const user = await requireUser(request);
diff --git a/app/features/tournament/routes/to.$id.maps.tsx b/app/features/tournament/routes/to.$id.maps.tsx
index a6e88edcc..2453e1d86 100644
--- a/app/features/tournament/routes/to.$id.maps.tsx
+++ b/app/features/tournament/routes/to.$id.maps.tsx
@@ -1,4 +1,4 @@
-import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 import { useActionData, useLoaderData } from "@remix-run/react";
 import clsx from "clsx";
@@ -18,7 +18,6 @@ import type {
   TournamentMaplistSource,
 } from "~/modules/tournament-map-list-generator";
 import { createTournamentMapList } from "~/modules/tournament-map-list-generator";
-import mapsStyles from "~/styles/maps.css?url";
 import { type SendouRouteHandle } from "~/utils/remix";
 import { tournamentPage } from "~/utils/urls";
 import { findMapPoolsByTournamentId } from "../queries/findMapPoolsByTournamentId.server";
@@ -26,9 +25,7 @@ import { TOURNAMENT } from "../tournament-constants";
 import { tournamentIdFromParams } from "../tournament-utils";
 import { useTournament } from "./to.$id";
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: mapsStyles }];
-};
+import "~/styles/maps.css";
 
 export const handle: SendouRouteHandle = {
   i18n: ["tournament"],
diff --git a/app/features/tournament/routes/to.$id.tsx b/app/features/tournament/routes/to.$id.tsx
index 6a9551a46..19a3b03ca 100644
--- a/app/features/tournament/routes/to.$id.tsx
+++ b/app/features/tournament/routes/to.$id.tsx
@@ -1,5 +1,4 @@
 import type {
-  LinksFunction,
   LoaderFunctionArgs,
   MetaFunction,
   SerializeFrom,
@@ -24,11 +23,12 @@ import { makeTitle } from "~/utils/strings";
 import { assertUnreachable } from "~/utils/types";
 import { streamsByTournamentId } from "../core/streams.server";
 import { tournamentIdFromParams } from "../tournament-utils";
-import styles from "../tournament.css?url";
 import * as UserRepository from "~/features/user-page/UserRepository.server";
 import * as TournamentRepository from "~/features/tournament/TournamentRepository.server";
 import { databaseTimestampToDate } from "~/utils/dates";
 
+import "../tournament.css?url";
+
 export const meta: MetaFunction = (args) => {
   const data = args.data as SerializeFrom<typeof loader>;
 
@@ -37,10 +37,6 @@ export const meta: MetaFunction = (args) => {
   return [{ title: makeTitle(data.tournament.ctx.name) }];
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const handle: SendouRouteHandle = {
   i18n: ["tournament", "calendar"],
 };
diff --git a/app/features/user-page/routes/u.$identifier.edit.tsx b/app/features/user-page/routes/u.$identifier.edit.tsx
index fc4681e4e..7dabb70c5 100644
--- a/app/features/user-page/routes/u.$identifier.edit.tsx
+++ b/app/features/user-page/routes/u.$identifier.edit.tsx
@@ -1,14 +1,13 @@
 import {
   redirect,
   type ActionFunction,
-  type LinksFunction,
   type LoaderFunctionArgs,
 } from "@remix-run/node";
 import { Form, Link, useLoaderData, useMatches } from "@remix-run/react";
-import { countries, getEmojiFlag } from "countries-list";
 import type { TCountryCode } from "countries-list";
+import { countries, getEmojiFlag } from "countries-list";
 import * as React from "react";
-import { Trans } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import invariant from "tiny-invariant";
 import { z } from "zod";
 import { Button } from "~/components/Button";
@@ -16,20 +15,22 @@ import { WeaponCombobox } from "~/components/Combobox";
 import { CustomizedColorsInput } from "~/components/CustomizedColorsInput";
 import { FormErrors } from "~/components/FormErrors";
 import { FormMessage } from "~/components/FormMessage";
-import { TrashIcon } from "~/components/icons/Trash";
 import { WeaponImage } from "~/components/Image";
 import { Input } from "~/components/Input";
 import { Label } from "~/components/Label";
 import { SubmitButton } from "~/components/SubmitButton";
+import { Toggle } from "~/components/Toggle";
+import { StarIcon } from "~/components/icons/Star";
+import { StarFilledIcon } from "~/components/icons/StarFilled";
+import { TrashIcon } from "~/components/icons/Trash";
 import { USER } from "~/constants";
-import type { UserWeapon, User } from "~/db/types";
-import { useTranslation } from "react-i18next";
+import type { User, UserWeapon } from "~/db/types";
 import { useUser } from "~/features/auth/core/user";
 import { requireUser, requireUserId } from "~/features/auth/core/user.server";
+import * as UserRepository from "~/features/user-page/UserRepository.server";
 import { i18next } from "~/modules/i18n/i18next.server";
 import { type MainWeaponId } from "~/modules/in-game-lists";
 import { canAddCustomizedColorsToUserProfile } from "~/permissions";
-import styles from "~/styles/u-edit.css?url";
 import { translatedCountry } from "~/utils/i18n.server";
 import { notFoundIfFalsy, safeParseRequestFormData } from "~/utils/remix";
 import { errorIsSqliteUniqueConstraintFailure } from "~/utils/sql";
@@ -43,19 +44,13 @@ import {
   id,
   jsonParseable,
   processMany,
-  weaponSplId,
   safeJSONParse,
   undefinedToNull,
+  weaponSplId,
 } from "~/utils/zod";
 import { userParamsSchema, type UserPageLoaderData } from "./u.$identifier";
-import { Toggle } from "~/components/Toggle";
-import { StarIcon } from "~/components/icons/Star";
-import { StarFilledIcon } from "~/components/icons/StarFilled";
-import * as UserRepository from "~/features/user-page/UserRepository.server";
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+import "~/styles/u-edit.css";
 
 const userEditActionSchema = z
   .object({
diff --git a/app/features/user-page/routes/u.$identifier.tsx b/app/features/user-page/routes/u.$identifier.tsx
index 7536c5613..1cca93718 100644
--- a/app/features/user-page/routes/u.$identifier.tsx
+++ b/app/features/user-page/routes/u.$identifier.tsx
@@ -1,5 +1,4 @@
 import type {
-  LinksFunction,
   LoaderFunctionArgs,
   MetaFunction,
   SerializeFrom,
@@ -11,12 +10,10 @@ import { z } from "zod";
 import { Main } from "~/components/Main";
 import { SubNav, SubNavLink } from "~/components/SubNav";
 import { userTopPlacements } from "~/features/top-search";
-import { findVods } from "~/features/vods";
 import { useTranslation } from "react-i18next";
 import { useUser } from "~/features/auth/core/user";
 import { getUserId } from "~/features/auth/core/user.server";
 import { canAddCustomizedColorsToUserProfile, isAdmin } from "~/permissions";
-import styles from "~/styles/u.css?url";
 import { notFoundIfFalsy, type SendouRouteHandle } from "~/utils/remix";
 import { discordFullName, makeTitle } from "~/utils/strings";
 import {
@@ -35,10 +32,9 @@ import * as BadgeRepository from "~/features/badges/BadgeRepository.server";
 import * as UserRepository from "~/features/user-page/UserRepository.server";
 import * as BuildRepository from "~/features/builds/BuildRepository.server";
 import { countArtByUserId } from "~/features/art/queries/countArtByUserId.server";
+import { findVods } from "~/features/vods/queries/findVods.server";
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+import "~/styles/u.css";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   if (!data) return [];
diff --git a/app/features/user-page/routes/u.$identifier.vods.tsx b/app/features/user-page/routes/u.$identifier.vods.tsx
index 3cb7d2927..341a7d199 100644
--- a/app/features/user-page/routes/u.$identifier.vods.tsx
+++ b/app/features/user-page/routes/u.$identifier.vods.tsx
@@ -1,24 +1,20 @@
-import type { LinksFunction } from "@remix-run/node";
 import { useMatches } from "@remix-run/react";
-import invariant from "tiny-invariant";
-import { VodListing } from "~/features/vods";
-import type { SendouRouteHandle } from "~/utils/remix";
-import styles from "~/features/vods/vods.css?url";
-import type { UserPageLoaderData } from "./u.$identifier";
-import { Popover } from "~/components/Popover";
 import { useTranslation } from "react-i18next";
-import { newVodPage } from "~/utils/urls";
+import invariant from "tiny-invariant";
 import { LinkButton } from "~/components/Button";
+import { Popover } from "~/components/Popover";
 import { useUser } from "~/features/auth/core/user";
+import { VodListing } from "~/features/vods/components/VodListing";
+import type { SendouRouteHandle } from "~/utils/remix";
+import { newVodPage } from "~/utils/urls";
+import type { UserPageLoaderData } from "./u.$identifier";
+
+import "~/features/vods/vods.css";
 
 export const handle: SendouRouteHandle = {
   i18n: ["vods"],
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export default function UserVodsPage() {
   const user = useUser();
   const [, parentRoute] = useMatches();
diff --git a/app/features/user-search/routes/u.tsx b/app/features/user-search/routes/u.tsx
index ca6cef60d..3e4170698 100644
--- a/app/features/user-search/routes/u.tsx
+++ b/app/features/user-search/routes/u.tsx
@@ -1,12 +1,7 @@
-import type {
-  LinksFunction,
-  LoaderFunctionArgs,
-  SerializeFrom,
-} from "@remix-run/node";
+import type { LoaderFunctionArgs, SerializeFrom } from "@remix-run/node";
 import { Main } from "~/components/Main";
 import { parseSearchParams, type SendouRouteHandle } from "~/utils/remix";
 import { navIconUrl, userPage, USER_SEARCH_PAGE } from "~/utils/urls";
-import styles from "~/styles/u.css?url";
 import { Input } from "~/components/Input";
 import { SearchIcon } from "~/components/icons/Search";
 import { Link, useLoaderData, useSearchParams } from "@remix-run/react";
@@ -18,9 +13,7 @@ import { z } from "zod";
 import { queryToUserIdentifier } from "~/utils/users";
 import * as UserRepository from "~/features/user-page/UserRepository.server";
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+import "~/styles/u.css";
 
 export const handle: SendouRouteHandle = {
   i18n: ["user"],
diff --git a/app/features/vods/index.ts b/app/features/vods/index.ts
deleted file mode 100644
index b5fd92f2b..000000000
--- a/app/features/vods/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { findVods } from "./queries/findVods.server";
-export { VodListing } from "./components/VodListing";
diff --git a/app/features/vods/routes/vods.$id.tsx b/app/features/vods/routes/vods.$id.tsx
index 08b3bf780..5f01f494f 100644
--- a/app/features/vods/routes/vods.$id.tsx
+++ b/app/features/vods/routes/vods.$id.tsx
@@ -1,5 +1,4 @@
 import type {
-  LinksFunction,
   LoaderFunctionArgs,
   MetaFunction,
   SerializeFrom,
@@ -7,36 +6,33 @@ import type {
 import { useLoaderData } from "@remix-run/react";
 import clsx from "clsx";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { Button, LinkButton } from "~/components/Button";
 import { Image, WeaponImage } from "~/components/Image";
 import { Main } from "~/components/Main";
 import { YouTubeEmbed } from "~/components/YouTubeEmbed";
+import { useUser } from "~/features/auth/core/user";
 import { useIsMounted } from "~/hooks/useIsMounted";
 import { useSearchParamState } from "~/hooks/useSearchParamState";
-import { useTranslation } from "react-i18next";
-import { useUser } from "~/features/auth/core/user";
 import { databaseTimestampToDate } from "~/utils/dates";
 import { secondsToMinutes } from "~/utils/number";
 import { notFoundIfFalsy, type SendouRouteHandle } from "~/utils/remix";
 import { makeTitle } from "~/utils/strings";
 import type { Unpacked } from "~/utils/types";
 import {
+  VODS_PAGE,
   modeImageUrl,
   navIconUrl,
   newVodPage,
   stageImageUrl,
-  VODS_PAGE,
   vodVideoPage,
 } from "~/utils/urls";
 import { PovUser } from "../components/VodPov";
 import { findVodById } from "../queries/findVodById.server";
 import type { Vod } from "../vods-types";
 import { canEditVideo } from "../vods-utils";
-import styles from "../vods.css?url";
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
+import "../vods.css";
 
 export const handle: SendouRouteHandle = {
   breadcrumb: ({ match }) => {
diff --git a/app/features/vods/routes/vods.tsx b/app/features/vods/routes/vods.tsx
index 2aad60893..5fb8a6674 100644
--- a/app/features/vods/routes/vods.tsx
+++ b/app/features/vods/routes/vods.tsx
@@ -1,5 +1,4 @@
 import type {
-  LinksFunction,
   LoaderFunctionArgs,
   MetaFunction,
   SerializeFrom,
@@ -18,7 +17,8 @@ import { navIconUrl, VODS_PAGE } from "~/utils/urls";
 import { VodListing } from "../components/VodListing";
 import { findVods } from "../queries/findVods.server";
 import { videoMatchTypes, VODS_PAGE_BATCH_SIZE } from "../vods-constants";
-import styles from "../vods.css?url";
+
+import "../vods.css";
 
 export const handle: SendouRouteHandle = {
   i18n: ["vods"],
@@ -29,10 +29,6 @@ export const handle: SendouRouteHandle = {
   }),
 };
 
-export const links: LinksFunction = () => {
-  return [{ rel: "stylesheet", href: styles }];
-};
-
 export const meta: MetaFunction = (args) => {
   const data = args.data as SerializeFrom<typeof loader> | null;
 
diff --git a/app/root.tsx b/app/root.tsx
index 8081d49d5..fc69618a4 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,38 +1,31 @@
-import { json } from "@remix-run/node";
 import type {
-  LinksFunction,
   LoaderFunctionArgs,
-  SerializeFrom,
   MetaFunction,
+  SerializeFrom,
 } from "@remix-run/node";
+import { json } from "@remix-run/node";
 import {
   Links,
   Meta,
   Outlet,
   Scripts,
-  type ShouldRevalidateFunction,
   useLoaderData,
   useMatches,
   useNavigation,
+  type ShouldRevalidateFunction,
 } from "@remix-run/react";
-import * as React from "react";
-import commonStyles from "~/styles/common.css?url";
-import variableStyles from "~/styles/vars.css?url";
-import utilStyles from "~/styles/utils.css?url";
-import layoutStyles from "~/styles/layout.css?url";
-import resetStyles from "~/styles/reset.css?url";
-import flagsStyles from "~/styles/flags.css?url";
-import { Catcher } from "./components/Catcher";
-import { Layout } from "./components/layout";
-import { getUser } from "./features/auth/core/user.server";
-import { useChangeLanguage } from "remix-i18next/react";
-import { type CustomTypeOptions } from "react-i18next";
-import { useTranslation } from "react-i18next";
-import { COMMON_PREVIEW_IMAGE } from "./utils/urls";
-import { ConditionalScrollRestoration } from "./components/ConditionalScrollRestoration";
-import { type SendouRouteHandle } from "~/utils/remix";
 import generalI18next from "i18next";
-import { getThemeSession } from "./features/theme/core/session.server";
+import NProgress from "nprogress";
+import * as React from "react";
+import { useTranslation, type CustomTypeOptions } from "react-i18next";
+import { useChangeLanguage } from "remix-i18next/react";
+import * as UserRepository from "~/features/user-page/UserRepository.server";
+import { type SendouRouteHandle } from "~/utils/remix";
+import { Catcher } from "./components/Catcher";
+import { ConditionalScrollRestoration } from "./components/ConditionalScrollRestoration";
+import { Layout } from "./components/layout";
+import { CUSTOMIZED_CSS_VARS_NAME } from "./constants";
+import { getUser } from "./features/auth/core/user.server";
 import {
   Theme,
   ThemeHead,
@@ -40,14 +33,20 @@ import {
   isTheme,
   useTheme,
 } from "./features/theme/core/provider";
+import { getThemeSession } from "./features/theme/core/session.server";
 import { useIsMounted } from "./hooks/useIsMounted";
-import { CUSTOMIZED_CSS_VARS_NAME } from "./constants";
-import NProgress from "nprogress";
-import nProgressStyles from "nprogress/nprogress.css?url";
-import * as UserRepository from "~/features/user-page/UserRepository.server";
-import { browserTimingHeader } from "./utils/newrelic.server";
-import i18next, { i18nCookie } from "./modules/i18n/i18next.server";
 import { DEFAULT_LANGUAGE } from "./modules/i18n/config";
+import i18next, { i18nCookie } from "./modules/i18n/i18next.server";
+import { browserTimingHeader } from "./utils/newrelic.server";
+import { COMMON_PREVIEW_IMAGE } from "./utils/urls";
+
+import "nprogress/nprogress.css";
+import "~/styles/common.css";
+import "~/styles/flags.css";
+import "~/styles/layout.css";
+import "~/styles/reset.css";
+import "~/styles/utils.css";
+import "~/styles/vars.css";
 
 export const shouldRevalidate: ShouldRevalidateFunction = ({ nextUrl }) => {
   // // reload on language change so the selected language gets set into the cookie
@@ -56,18 +55,6 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({ nextUrl }) => {
   return Boolean(lang);
 };
 
-export const links: LinksFunction = () => {
-  return [
-    { rel: "stylesheet", href: resetStyles },
-    { rel: "stylesheet", href: commonStyles },
-    { rel: "stylesheet", href: variableStyles },
-    { rel: "stylesheet", href: utilStyles },
-    { rel: "stylesheet", href: layoutStyles },
-    { rel: "stylesheet", href: flagsStyles },
-    { rel: "stylesheet", href: nProgressStyles },
-  ];
-};
-
 export const meta: MetaFunction = () => {
   return [
     { title: "sendou.ink" },
diff --git a/ley.config.js b/ley.config.cjs
similarity index 100%
rename from ley.config.js
rename to ley.config.cjs
diff --git a/vite.config.ts b/vite.config.ts
index 2ec156d51..750a6a494 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,7 +12,7 @@ export default defineConfig({
   plugins: [
     remix({
       ignoredRouteFiles: ["**/.*", "**/*.json", "**/components/*"],
-      serverModuleFormat: "cjs",
+      serverModuleFormat: "esm",
       routes: (defineRoutes) => {
         return defineRoutes((route) => {
           route("/", "features/front-page/routes/index.tsx");