feat: add sc minification + display class names

.babelrc

@@ -0,0 +1 @@
+{ "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]] }

package.json

@@ -59,6 +59,7 @@
         }
     },
     "dependencies": {
+        "@insertish/vite-plugin-babel-macros": "^1.0.5",
         "color-rgba": "^2.3.0",
         "fs-extra": "^10.0.0",
         "klaw": "^3.0.0",
@@ -67,6 +68,7 @@
         "vite": "^2.6.14"
     },
     "devDependencies": {
+        "@babel/plugin-proposal-decorators": "^7.16.7",
         "@fontsource/atkinson-hyperlegible": "^4.4.5",
         "@fontsource/bree-serif": "^4.4.5",
         "@fontsource/comic-neue": "^4.4.5",

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