Vite fixes inc. moving css to side effect imports

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: () => ({

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",

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: () => ({

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 }) => {

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"));

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>;
 

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;

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;

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();

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",
 };

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+

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";
 

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;
 

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() {

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: () => ({

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",

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>;

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"],

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(),

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") }];
 };

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: () => ({

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") }];
 };

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") },

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 [];

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);

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 [];

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);
 

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({

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;
 

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;
 

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);

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);

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({

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);

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"],

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"],
 };

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({

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 [];

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();

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"],

app/features/vods/index.ts

@@ -1,2 +0,0 @@
-export { findVods } from "./queries/findVods.server";
-export { VodListing } from "./components/VodListing";

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 }) => {

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;
 

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" },

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");