feat: add sc minification + display class names

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