feat: add sc minification + display class names

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