feat: add sc minification + display class names

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