feat: add sc minification + display class names

src/components/common/AgeGate.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
 import { Channel } from "revolt.js/dist/maps/Channels";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";

src/components/common/AutoComplete.tsx

@@ -1,6 +1,6 @@
 import { Channel } from "revolt.js/dist/maps/Channels";
 import { User } from "revolt.js/dist/maps/Users";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { StateUpdater, useState } from "preact/hooks";
 
@@ -14,19 +14,19 @@ import UserIcon from "./user/UserIcon";
 export type AutoCompleteState =
     | { type: "none" }
     | ({ selected: number; within: boolean } & (
-        | {
-            type: "emoji";
-            matches: string[];
-        }
-        | {
-            type: "user";
-            matches: User[];
-        }
-        | {
-            type: "channel";
-            matches: Channel[];
-        }
-    ));
+          | {
+                type: "emoji";
+                matches: string[];
+            }
+          | {
+                type: "user";
+                matches: User[];
+            }
+          | {
+                type: "channel";
+                matches: Channel[];
+            }
+      ));
 
 export type SearchClues = {
     users?: { type: "channel"; id: string } | { type: "all" };
@@ -79,15 +79,15 @@ export function useAutoComplete(
 
             if (current === ":" || current === "@" || current === "#") {
                 const search = content.slice(j + 1, content.length);
-                const minLen = current === ":" ? 2 : 1
+                const minLen = current === ":" ? 2 : 1;
 
                 if (search.length >= minLen) {
                     return [
                         current === "#"
                             ? "channel"
                             : current === ":"
-                                ? "emoji"
-                                : "user",
+                            ? "emoji"
+                            : "user",
                         search.toLowerCase(),
                         j + 1,
                     ];
@@ -167,8 +167,8 @@ export function useAutoComplete(
                 const matches = (
                     search.length > 0
                         ? users.filter((user) =>
-                            user.username.toLowerCase().match(regex),
-                        )
+                              user.username.toLowerCase().match(regex),
+                          )
                         : users
                 )
                     .splice(0, 5)
@@ -199,8 +199,8 @@ export function useAutoComplete(
                 const matches = (
                     search.length > 0
                         ? channels.filter((channel) =>
-                            channel.name!.toLowerCase().match(regex),
-                        )
+                              channel.name!.toLowerCase().match(regex),
+                          )
                         : channels
                 )
                     .splice(0, 5)
@@ -417,7 +417,7 @@ export default function AutoComplete({
                             <Emoji
                                 emoji={
                                     (emojiDictionary as Record<string, string>)[
-                                    match
+                                        match
                                     ]
                                 }
                                 size={20}

src/components/common/IconBase.tsx

@@ -1,5 +1,5 @@
 import { Attachment } from "revolt-api/types/Autumn";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 export interface IconBaseProps<T> {
     target?: T;

src/components/common/ServerHeader.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import { Link } from "react-router-dom";
 import { ServerPermission } from "revolt.js/dist/api/permissions";
 import { Server } from "revolt.js/dist/maps/Servers";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 

src/components/common/ServerIcon.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react-lite";
 import { Server } from "revolt.js/dist/maps/Servers";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { useContext } from "preact/hooks";
 

src/components/common/Tooltip.tsx

@@ -1,5 +1,5 @@
 import Tippy, { TippyProps } from "@tippyjs/react";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 

src/components/common/messaging/MessageBase.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react-lite";
 import { Message } from "revolt.js/dist/maps/Messages";
-import styled, { css, keyframes } from "styled-components";
+import styled, { css, keyframes } from "styled-components/macro";
 import { decodeTime } from "ulid";
 
 import { Text } from "preact-i18n";

src/components/common/messaging/MessageBox.tsx

@@ -3,7 +3,7 @@ import Axios, { CancelTokenSource } from "axios";
 import { observer } from "mobx-react-lite";
 import { ChannelPermission } from "revolt.js/dist/api/permissions";
 import { Channel } from "revolt.js/dist/maps/Channels";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 import { ulid } from "ulid";
 
 import { Text } from "preact-i18n";

src/components/common/messaging/SystemMessage.tsx

@@ -13,7 +13,7 @@ import {
 import { observer } from "mobx-react-lite";
 import { SystemMessage as SystemMessageI } from "revolt-api/types/Channels";
 import { Message } from "revolt.js/dist/maps/Messages";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { attachContextMenu } from "preact-context-menu";
 

src/components/common/messaging/attachments/Grid.tsx

@@ -1,10 +1,10 @@
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Children } from "../../../../types/Preact";
 
 const Grid = styled.div<{ width: number; height: number }>`
-    --width: ${props => props.width}px;
-    --height: ${props => props.height}px;
+    --width: ${(props) => props.width}px;
+    --height: ${(props) => props.height}px;
 
     display: grid;
     aspect-ratio: ${(props) => props.width} / ${(props) => props.height};
@@ -42,7 +42,7 @@ const Grid = styled.div<{ width: number; height: number }>`
         overflow: hidden;
 
         object-fit: contain;
-        
+
         // It's something
         object-position: left;
     }

src/components/common/messaging/attachments/MessageReply.tsx

@@ -5,7 +5,7 @@ import { useHistory } from "react-router-dom";
 import { RelationshipStatus } from "revolt-api/types/Users";
 import { Channel } from "revolt.js/dist/maps/Channels";
 import { Message } from "revolt.js/dist/maps/Messages";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 import { useLayoutEffect, useState } from "preact/hooks";

src/components/common/messaging/attachments/Spoiler.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 

src/components/common/messaging/bars/FilePreview.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { XCircle, Plus, Share, X, File } from "@styled-icons/boxicons-regular";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";

src/components/common/messaging/bars/JumpToBottom.tsx

@@ -1,7 +1,7 @@
 import { DownArrowAlt } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
 import { Channel } from "revolt.js/dist/maps/Channels";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 

src/components/common/messaging/bars/ReplyBar.tsx

@@ -3,7 +3,7 @@ import { File, XCircle } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Channel } from "revolt.js/dist/maps/Channels";
 import { Message } from "revolt.js/dist/maps/Messages";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 import { StateUpdater, useEffect } from "preact/hooks";

src/components/common/messaging/bars/TypingIndicator.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { RelationshipStatus } from "revolt-api/types/Users";
 import { Channel } from "revolt.js/dist/maps/Channels";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 

src/components/common/messaging/embed/EmbedInvite.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
 import { RetrievedInvite } from "revolt-api/types/Invites";
 import { Message } from "revolt.js/dist/maps/Messages";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { useContext, useEffect, useState } from "preact/hooks";
 

src/components/common/user/UserBadges.tsx

@@ -1,6 +1,6 @@
 import { Shield } from "@styled-icons/boxicons-regular";
 import { Badges } from "revolt-api/types/Users";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Localizer, Text } from "preact-i18n";
 

src/components/common/user/UserHeader.tsx

@@ -2,7 +2,7 @@ import { Cog } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Link } from "react-router-dom";
 import { User } from "revolt.js/dist/maps/Users";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { openContextMenu } from "preact-context-menu";
 import { Text, Localizer } from "preact-i18n";

src/components/common/user/UserHover.tsx

@@ -1,5 +1,5 @@
 import { User } from "revolt.js/dist/maps/Users";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Children } from "../../../types/Preact";
 import Tooltip from "../Tooltip";
@@ -42,10 +42,7 @@ export default function UserHover({ user, children }: Props) {
             placement="right-end"
             content={
                 <Base>
-                    <Username
-                        className="username"
-                        user={user}
-                    />
+                    <Username className="username" user={user} />
                     <span className="status">
                         <UserStatus user={user} />
                     </span>

src/components/common/user/UserIcon.tsx

@@ -5,7 +5,7 @@ import { useParams } from "react-router-dom";
 import { Masquerade } from "revolt-api/types/Channels";
 import { Presence } from "revolt-api/types/Users";
 import { User } from "revolt.js/dist/maps/Users";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { useApplicationState } from "../../../mobx/State";
 

src/components/common/user/UserShort.tsx

@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
 import { Masquerade } from "revolt-api/types/Channels";
 import { User } from "revolt.js/dist/maps/Users";
 import { Nullable } from "revolt.js/dist/util/null";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 

src/components/native/Titlebar.tsx

@@ -1,5 +1,5 @@
 import { Wrench } from "@styled-icons/boxicons-solid";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import UpdateIndicator from "../common/UpdateIndicator";
 

src/components/navigation/BottomNavigation.tsx

@@ -1,7 +1,7 @@
 import { Message, Group, Compass } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { useHistory, useLocation } from "react-router";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import ConditionalLink from "../../lib/ConditionalLink";
 

src/components/navigation/SidebarBase.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 

src/components/navigation/left/HomeSidebar.tsx

@@ -7,7 +7,7 @@ import {
 import { observer } from "mobx-react-lite";
 import { Link, useLocation, useParams } from "react-router-dom";
 import { RelationshipStatus } from "revolt-api/types/Users";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 import { useContext, useEffect } from "preact/hooks";

src/components/navigation/left/ServerListSidebar.tsx

@@ -3,7 +3,7 @@ import { Cog, Compass } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Link, useHistory, useLocation, useParams } from "react-router-dom";
 import { RelationshipStatus } from "revolt-api/types/Users";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { attachContextMenu } from "preact-context-menu";
 import { Text } from "preact-i18n";

src/components/navigation/left/ServerSidebar.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { Redirect, useParams } from "react-router";
 import { Server } from "revolt.js/dist/maps/Servers";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { attachContextMenu } from "preact-context-menu";
 import { useEffect } from "preact/hooks";

src/components/navigation/right/MemberList.tsx

@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 import { GroupedVirtuoso } from "react-virtuoso";
 import { Channel } from "revolt.js/dist/maps/Channels";
 import { User } from "revolt.js/dist/maps/Users";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 import { memo } from "preact/compat";

src/components/navigation/right/Search.tsx

@@ -1,6 +1,6 @@
 import { Link, useParams } from "react-router-dom";
 import { Message as MessageI } from "revolt.js/dist/maps/Messages";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";

src/components/settings/appearance/EmojiSelector.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 

src/components/settings/appearance/ThemeBaseSelector.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 

src/components/settings/appearance/ThemeOverrides.tsx

@@ -1,6 +1,6 @@
 import { Pencil } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { useDebounceCallback } from "../../../lib/debounce";
 

src/components/settings/appearance/ThemeTools.tsx

@@ -1,5 +1,5 @@
 import { Import, Reset } from "@styled-icons/boxicons-regular";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 

src/components/ui/Banner.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 export default styled.div`
     padding: 8px;

src/components/ui/Button.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 interface Props {
     readonly compact?: boolean;

src/components/ui/Category.tsx

@@ -1,5 +1,5 @@
 import { Plus } from "@styled-icons/boxicons-regular";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { Children } from "../../types/Preact";
 

src/components/ui/Checkbox.tsx

@@ -1,5 +1,5 @@
 import { Check } from "@styled-icons/boxicons-regular";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { Children } from "../../types/Preact";
 

src/components/ui/ColourSwatches.tsx

@@ -1,6 +1,6 @@
 import { Check } from "@styled-icons/boxicons-regular";
 import { Palette } from "@styled-icons/boxicons-solid";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { RefObject } from "preact";
 import { useRef } from "preact/hooks";

src/components/ui/ComboBox.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 export default styled.select`
     width: 100%;

src/components/ui/DateDivider.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { dayjs } from "../../context/Locale";
 

src/components/ui/Details.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 

src/components/ui/Header.tsx

@@ -5,7 +5,7 @@ import {
 } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
 import { useLocation } from "react-router-dom";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 

src/components/ui/IconButton.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 interface Props {
     rotate?: string;

src/components/ui/InputBox.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 interface Props {
     readonly contrast?: boolean;

src/components/ui/LineDivider.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 export default styled.div`
     height: 0;

src/components/ui/Modal.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import styled, { css, keyframes } from "styled-components";
+import styled, { css, keyframes } from "styled-components/macro";
 
 import { createPortal, useCallback, useEffect, useState } from "preact/compat";
 

src/components/ui/Overline.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 

src/components/ui/Preloader.tsx

@@ -1,4 +1,4 @@
-import styled, { keyframes } from "styled-components";
+import styled, { keyframes } from "styled-components/macro";
 
 const skSpinner = keyframes`
     0%, 80%, 100% { 

src/components/ui/Radio.tsx

@@ -1,5 +1,5 @@
 import { Circle } from "@styled-icons/boxicons-regular";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { Children } from "../../types/Preact";
 

src/components/ui/SaveStatus.tsx

@@ -1,6 +1,6 @@
 import { Check, CloudUpload } from "@styled-icons/boxicons-regular";
 import { Pencil } from "@styled-icons/boxicons-solid";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 const StatusBase = styled.div`
     gap: 4px;

src/components/ui/TextArea.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 export interface TextAreaProps {
     code?: boolean;

src/components/ui/Tip.tsx

@@ -1,5 +1,5 @@
 import { InfoCircle } from "@styled-icons/boxicons-regular";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { Children } from "../../types/Preact";
 

src/components/ui/fluent/CategoryButton.tsx

@@ -3,7 +3,7 @@ import {
     LinkExternal,
     Pencil,
 } from "@styled-icons/boxicons-regular";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { Children } from "../../../types/Preact";
 

src/context/Theme.tsx

@@ -1,7 +1,7 @@
 import rgba from "color-rgba";
 import { observer } from "mobx-react-lite";
 import { Helmet } from "react-helmet";
-import { createGlobalStyle } from "styled-components";
+import { createGlobalStyle } from "styled-components/macro";
 
 import { useEffect } from "preact/hooks";
 

src/context/intermediate/popovers/ServerIdentityModal.tsx

@@ -1,5 +1,6 @@
 import { observer } from "mobx-react-lite";
 import { Server } from "revolt.js/dist/maps/Servers";
+import styled, { css } from "styled-components/macro";
 
 import styles from "./ServerIdentityModal.module.scss";
 import { Text } from "preact-i18n";
@@ -12,7 +13,6 @@ import Overline from "../../../components/ui/Overline";
 
 import { FileUploader } from "../../revoltjs/FileUploads";
 import { useClient } from "../../revoltjs/RevoltClient";
-import styled, { css } from "styled-components";
 
 interface Props {
     server: Server;
@@ -59,9 +59,12 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
                         maxFileSize={4_000_000}
                         onUpload={(avatar) => member.edit({ avatar })}
                         remove={() => member.edit({ remove: "Avatar" })}
-                        defaultPreview={client.user?.generateAvatarURL({
-                            max_side: 256,
-                        }, false)}
+                        defaultPreview={client.user?.generateAvatarURL(
+                            {
+                                max_side: 256,
+                            },
+                            false,
+                        )}
                         previewURL={client.generateFileURL(
                             member.avatar ?? undefined,
                             { max_side: 256 },

src/context/revoltjs/RequiresOnline.tsx

@@ -1,5 +1,5 @@
 import { WifiOff } from "@styled-icons/boxicons-regular";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 import { useContext } from "preact/hooks";

src/lib/ErrorBoundary.tsx

@@ -1,7 +1,7 @@
 import axios from "axios";
 import localforage from "localforage";
 import * as stackTrace from "stacktrace-js";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { useEffect, useErrorBoundary, useState } from "preact/hooks";
 

src/lib/TextAreaAutoSize.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { RefObject } from "preact";
 import { useEffect, useLayoutEffect, useRef } from "preact/hooks";

src/pages/RevoltApp.tsx

@@ -1,6 +1,6 @@
 import { Docked, OverlappingPanels, ShowIf } from "react-overlapping-panels";
 import { Switch, Route, useLocation } from "react-router-dom";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import ContextMenus from "../lib/ContextMenus";
 import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";

src/pages/channels/Channel.tsx

@@ -4,7 +4,7 @@ import { reaction } from "mobx";
 import { observer } from "mobx-react-lite";
 import { Redirect, useParams } from "react-router-dom";
 import { Channel as ChannelI } from "revolt.js/dist/maps/Channels";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 import { useEffect, useMemo } from "preact/hooks";

src/pages/channels/ChannelHeader.tsx

@@ -8,7 +8,7 @@ import { Notepad, Group } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Channel } from "revolt.js/dist/maps/Channels";
 import { User } from "revolt.js/dist/maps/Users";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 

src/pages/channels/actions/HeaderActions.tsx

@@ -9,7 +9,7 @@ import {
 } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { chainedDefer, defer } from "../../../lib/defer";
 import { internalEmit } from "../../../lib/eventEmitter";

src/pages/channels/messaging/ConversationStart.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react-lite";
 import { Channel } from "revolt.js/dist/maps/Channels";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 

src/pages/channels/messaging/MessageArea.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useHistory, useParams } from "react-router-dom";
 import { animateScroll } from "react-scroll";
 import { Channel } from "revolt.js/dist/maps/Channels";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import useResizeObserver from "use-resize-observer";
 
 import { createContext } from "preact";

src/pages/channels/messaging/MessageEditor.tsx

@@ -1,5 +1,5 @@
 import { Message } from "revolt.js/dist/maps/Messages";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { useContext, useEffect, useState } from "preact/hooks";
 

src/pages/channels/messaging/MessageRenderer.tsx

@@ -6,7 +6,7 @@ import { Masquerade } from "revolt-api/types/Channels";
 import { RelationshipStatus } from "revolt-api/types/Users";
 import { Message as MessageI } from "revolt.js/dist/maps/Messages";
 import { Nullable } from "revolt.js/dist/util/null";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 import { decodeTime } from "ulid";
 
 import { Text } from "preact-i18n";

src/pages/channels/voice/VoiceHeader.tsx

@@ -10,7 +10,7 @@ import {
 } from "@styled-icons/boxicons-solid";
 import { Hashnode, Speakerdeck, Teamspeak } from "@styled-icons/simple-icons";
 import { observer } from "mobx-react-lite";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 import { useMemo } from "preact/hooks";

src/pages/discover/Discover.tsx

@@ -1,7 +1,7 @@
 import { Compass } from "@styled-icons/boxicons-solid";
 import { reaction } from "mobx";
 import { useHistory, useLocation } from "react-router-dom";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 

src/pages/friends/Friends.tsx

@@ -3,7 +3,7 @@ import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { RelationshipStatus, Presence } from "revolt-api/types/Users";
 import { User } from "revolt.js/dist/maps/Users";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 
 import styles from "./Friend.module.scss";
 import classNames from "classnames";

src/pages/home/Home.tsx

@@ -10,7 +10,7 @@ import {
 } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Link } from "react-router-dom";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import styles from "./Home.module.scss";
 import "./snow.scss";

src/pages/invite/InviteBot.tsx

@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom";
 import { ServerPermission } from "revolt.js";
 import { Route } from "revolt.js/dist/api/routes";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { useEffect, useState } from "preact/hooks";
 

src/pages/settings/Settings.tsx

@@ -22,7 +22,7 @@ import {
 import { observer } from "mobx-react-lite";
 import { Route, Switch, useHistory } from "react-router-dom";
 import { LIBRARY_VERSION } from "revolt.js";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import styles from "./Settings.module.scss";
 import { openContextMenu } from "preact-context-menu";

src/pages/settings/channel/Overview.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react-lite";
 import { Channel } from "revolt.js/dist/maps/Channels";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";

src/pages/settings/panes/MyBots.tsx

@@ -5,7 +5,7 @@ import { observer } from "mobx-react-lite";
 import { Bot } from "revolt-api/types/Bots";
 import { Profile as ProfileI } from "revolt-api/types/Users";
 import { User } from "revolt.js/dist/maps/Users";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";

src/pages/settings/panes/ThemeShop.tsx

@@ -11,7 +11,7 @@ import {
     Bookmark,
     BarChartAlt2,
 } from "@styled-icons/boxicons-solid";
-import styled from "styled-components";
+import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";

src/pages/settings/server/Categories.tsx

@@ -4,7 +4,7 @@ import { DragDropContext } from "react-beautiful-dnd";
 import { TextChannel, VoiceChannel } from "revolt-api/types/Channels";
 import { Category } from "revolt-api/types/Servers";
 import { Server } from "revolt.js/dist/maps/Servers";
-import styled, { css } from "styled-components";
+import styled, { css } from "styled-components/macro";
 import { ulid } from "ulid";
 
 import { Text } from "preact-i18n";