feat: add sc minification + display class names

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