ui: I HATE STYLED-COMPONENTS WITH TYPESCRIPT

package.json

@@ -73,7 +73,7 @@
         "react-transition-group": "^4.4.2",
         "reaptcha": "^1.7.2",
         "sockette": "^2.0.6",
-        "styled-components": "^5.2.1",
+        "styled-components": "^5.3.0",
         "styled-components-breakpoint": "^3.0.0-preview.20",
         "swr": "^0.5.6",
         "uuid": "^3.3.2",
@@ -116,7 +116,7 @@
         "@types/react-router-dom": "^5.1.8",
         "@types/react-select": "^4.0.17",
         "@types/react-transition-group": "^4.4.2",
-        "@types/styled-components": "^5.1.7",
+        "@types/styled-components": "^5.1.11",
         "@types/uuid": "^3.4.5",
         "@types/webappsec-credential-management": "^0.6.1",
         "@types/webpack-env": "^1.16.2",
@@ -143,7 +143,7 @@
         "source-map-loader": "^1.1.3",
         "style-loader": "^2.0.0",
         "svg-url-loader": "^7.1.1",
-        "tailwindcss": "^2.2.4",
+        "tailwindcss": "^2.2.6",
         "terser-webpack-plugin": "^4.2.3",
         "twin.macro": "^2.6.2",
         "typescript": "^4.3.5",

resources/scripts/TransitionRouter.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { Route } from 'react-router';
 import { SwitchTransition } from 'react-transition-group';
 import Fade from '@/components/elements/Fade';
-import styled from 'styled-components/macro';
+import tw, { styled } from 'twin.macro';
-import tw from 'twin.macro';
 
 const StyledSwitchTransition = styled(SwitchTransition)`
     ${tw`relative`};

resources/scripts/components/MessageBox.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import tw, { TwStyle } from 'twin.macro';
+import tw, { styled, TwStyle } from 'twin.macro';
-import styled from 'styled-components/macro';
 
 export type FlashMessageType = 'success' | 'info' | 'warning' | 'error';
 

resources/scripts/components/NavigationBar.tsx

@@ -5,8 +5,7 @@ import { faCogs, faLayerGroup, faSignOutAlt, faUserCircle } from '@fortawesome/f
 import { useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import SearchContainer from '@/components/dashboard/search/SearchContainer';
-import tw, { theme } from 'twin.macro';
+import tw, { styled, theme } from 'twin.macro';
-import styled from 'styled-components/macro';
 
 const Navigation = styled.div`
     ${tw`w-full bg-neutral-900 shadow-md overflow-x-auto`};

resources/scripts/components/admin/AdminCheckbox.tsx

@@ -1,7 +1,6 @@
 import Input from '@/components/elements/Input';
 import React from 'react';
-import styled from 'styled-components/macro';
+import tw, { styled } from 'twin.macro';
-import tw from 'twin.macro';
 
 export const TableCheckbox = styled(Input)`
     && {

resources/scripts/components/admin/AdminTable.tsx

@@ -4,8 +4,7 @@ import { debounce } from 'debounce';
 import React, { useCallback, useState } from 'react';
 import { TableCheckbox } from '@/components/admin/AdminCheckbox';
 import Spinner from '@/components/elements/Spinner';
-import styled from 'styled-components/macro';
+import tw, { styled } from 'twin.macro';
-import tw from 'twin.macro';
 import { PaginatedResult, PaginationDataSet } from '@/api/http';
 import { ListContext as TableHooks } from '@/api/admin';
 

resources/scripts/components/admin/SubNavigation.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import styled from 'styled-components/macro';
+import tw, { styled } from 'twin.macro';
-import tw from 'twin.macro';
 
 export const SubNavigation = styled.div`
     ${tw`flex flex-row items-center flex-shrink-0 h-12 mb-4 border-b border-neutral-700`};

resources/scripts/components/auth/LoginFormContainer.tsx

@@ -1,9 +1,8 @@
 import React, { forwardRef } from 'react';
 import { Form } from 'formik';
-import styled from 'styled-components/macro';
 import { breakpoint } from '@/theme';
 import FlashMessageRender from '@/components/FlashMessageRender';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 
 const Wrapper = styled.div`
     ${breakpoint('sm')`

resources/scripts/components/dashboard/AccountOverviewContainer.tsx

@@ -5,9 +5,8 @@ import UpdateEmailAddressForm from '@/components/dashboard/forms/UpdateEmailAddr
 import ConfigureTwoFactorForm from '@/components/dashboard/forms/ConfigureTwoFactorForm';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import { useLocation } from 'react-router-dom';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 import { breakpoint } from '@/theme';
-import styled from 'styled-components/macro';
 import MessageBox from '@/components/MessageBox';
 
 const Container = styled.div`

resources/scripts/components/dashboard/ServerRow.tsx

@@ -5,10 +5,9 @@ import { Link } from 'react-router-dom';
 import { Server } from '@/api/server/getServer';
 import getServerResourceUsage, { ServerPowerState, ServerStats } from '@/api/server/getServerResourceUsage';
 import { bytesToHuman, megabytesToHuman } from '@/helpers';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 import GreyRowBox from '@/components/elements/GreyRowBox';
 import Spinner from '@/components/elements/Spinner';
-import styled from 'styled-components/macro';
 import isEqual from 'react-fast-compare';
 
 // Determines if the current value is in an alarm threshold so we can show it in red rather

resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx

@@ -8,10 +8,9 @@ import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { ApiKey } from '@/api/account/getApiKeys';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 import Button from '@/components/elements/Button';
 import Input, { Textarea } from '@/components/elements/Input';
-import styled from 'styled-components/macro';
 import ApiKeyModal from '@/components/dashboard/ApiKeyModal';
 
 interface Values {

resources/scripts/components/dashboard/search/SearchModal.tsx

@@ -10,8 +10,7 @@ import getServers from '@/api/getServers';
 import { Server } from '@/api/server/getServer';
 import { ApplicationStore } from '@/state';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components/macro';
+import tw, { styled } from 'twin.macro';
-import tw from 'twin.macro';
 import Input from '@/components/elements/Input';
 
 type Props = RequiredModalProps;

resources/scripts/components/elements/Button.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import styled, { css } from 'styled-components/macro';
+import tw, { css, styled } from 'twin.macro';
-import tw from 'twin.macro';
 import Spinner from '@/components/elements/Spinner';
 
 interface Props {
@@ -95,7 +94,7 @@ const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) =>
     </ButtonStyle>
 );
 
-type LinkProps = Omit<JSX.IntrinsicElements['a'], 'ref' | keyof Props> & Props;
+type LinkProps = Omit<JSX.IntrinsicElements['a'], keyof JSX.IntrinsicElements['button'] | keyof Props> & Props;
 
 const LinkButton: React.FC<LinkProps> = props => <ButtonStyle as={'a'} {...props}/>;
 

resources/scripts/components/elements/ContentContainer.tsx

@@ -1,6 +1,5 @@
-import styled from 'styled-components/macro';
 import { breakpoint } from '@/theme';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 
 const ContentContainer = styled.div`
     max-width: 1200px;

resources/scripts/components/elements/CopyOnClick.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import tw from 'twin.macro';
 import styled, { keyframes } from 'styled-components/macro';
+import tw from 'twin.macro';
 import Fade from '@/components/elements/Fade';
 import { SwitchTransition } from 'react-transition-group';
 

resources/scripts/components/elements/DropdownMenu.tsx

@@ -1,6 +1,5 @@
 import React, { createRef } from 'react';
-import styled from 'styled-components/macro';
+import tw, { styled } from 'twin.macro';
-import tw from 'twin.macro';
 import Fade from '@/components/elements/Fade';
 
 interface Props {

resources/scripts/components/elements/Editor.tsx

@@ -36,8 +36,7 @@ import { toml } from '@codemirror/legacy-modes/mode/toml';
 import { xmlLanguage } from '@codemirror/lang-xml';
 import { yaml } from '@codemirror/legacy-modes/mode/yaml';
 import React, { useCallback, useEffect, useState } from 'react';
-import styled from 'styled-components/macro';
+import tw, { styled, TwStyle } from 'twin.macro';
-import tw, { TwStyle } from 'twin.macro';
 import { ayuMirage } from '@/components/elements/EditorTheme';
 
 type EditorMode = LanguageSupport | LezerLanguage | StreamParser<any>;

resources/scripts/components/elements/Fade.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
-import styled from 'styled-components/macro';
 import CSSTransition, { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 
 interface Props extends Omit<CSSTransitionProps, 'timeout' | 'classNames'> {
@@ -11,19 +10,19 @@ const Container = styled.div<{ timeout: number }>`
     .fade-enter, .fade-exit, .fade-appear {
         will-change: opacity;
     }
-    
+
     .fade-enter, .fade-appear {
         ${tw`opacity-0`};
-        
+
         &.fade-enter-active, &.fade-appear-active {
             ${tw`opacity-100 transition-opacity ease-in`};
             transition-duration: ${props => props.timeout}ms;
         }
     }
-    
+
     .fade-exit {
         ${tw`opacity-100`};
-        
+
         &.fade-exit-active {
             ${tw`opacity-0 transition-opacity ease-in`};
             transition-duration: ${props => props.timeout}ms;

resources/scripts/components/elements/GreyRowBox.tsx

@@ -1,9 +1,8 @@
-import styled from 'styled-components/macro';
+import tw, { styled } from 'twin.macro';
-import tw from 'twin.macro';
 
 export default styled.div<{ $hoverable?: boolean }>`
     ${tw`flex rounded no-underline text-neutral-200 items-center bg-neutral-700 p-4 border border-transparent transition-colors duration-150 overflow-hidden`};
-    
+
     ${props => props.$hoverable !== false && tw`hover:border-neutral-500`};
 
     & .icon {

resources/scripts/components/elements/Input.tsx

@@ -1,5 +1,4 @@
-import styled, { css } from 'styled-components/macro';
+import tw, { css, styled } from 'twin.macro';
-import tw from 'twin.macro';
 
 export interface Props {
     isLight?: boolean;

resources/scripts/components/elements/InputSpinner.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import Spinner from '@/components/elements/Spinner';
 import Fade from '@/components/elements/Fade';
-import tw from 'twin.macro';
+import tw, { css, styled } from 'twin.macro';
-import styled, { css } from 'styled-components/macro';
 import Select from '@/components/elements/Select';
 
 const Container = styled.div<{ visible?: boolean }>`
     ${tw`relative`};
-    
+
     ${props => props.visible && css`
         & ${Select} {
             background-image: none;

resources/scripts/components/elements/Label.tsx

@@ -1,5 +1,4 @@
-import styled from 'styled-components/macro';
+import tw, { styled } from 'twin.macro';
-import tw from 'twin.macro';
 
 const Label = styled.label<{ isLight?: boolean }>`
     ${tw`block text-xs uppercase text-neutral-200 mb-1 sm:mb-2`};

resources/scripts/components/elements/Modal.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import Spinner from '@/components/elements/Spinner';
-import tw from 'twin.macro';
+import tw, { css, styled } from 'twin.macro';
-import styled, { css } from 'styled-components/macro';
 import { breakpoint } from '@/theme';
 import Fade from '@/components/elements/Fade';
 import { createPortal } from 'react-dom';
@@ -25,7 +24,7 @@ export const ModalMask = styled.div`
     background: rgba(0, 0, 0, 0.70);
 `;
 
-const ModalContainer = styled.div<{ alignTop?: boolean }>`    
+const ModalContainer = styled.div<{ alignTop?: boolean }>`
     max-width: 95%;
     max-height: calc(100vh - 8rem);
     ${breakpoint('md')`max-width: 75%`};
@@ -38,13 +37,13 @@ const ModalContainer = styled.div<{ alignTop?: boolean }>`
     `};
 
     margin-bottom: auto;
-    
+
     & > .close-icon {
         ${tw`absolute right-0 p-2 text-white cursor-pointer opacity-50 transition-all duration-150 ease-linear hover:opacity-100`};
         top: -2.5rem;
-        
+
         &:hover {${tw`transform rotate-90`}}
-        
+
         & > svg {
             ${tw`w-6 h-6`};
         }

resources/scripts/components/elements/Pagination.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { PaginatedResult } from '@/api/http';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
-import styled from 'styled-components/macro';
 import Button from '@/components/elements/Button';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAngleDoubleLeft, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
@@ -22,7 +21,7 @@ interface Props<T> {
 
 const Block = styled(Button)`
     ${tw`p-0 w-10 h-10`}
-    
+
     &:not(:last-of-type) {
         ${tw`mr-2`};
     }

resources/scripts/components/elements/ProgressBar.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components/macro';
 import { useStoreActions, useStoreState } from 'easy-peasy';
 import { randomInt } from '@/helpers';
 import { CSSTransition } from 'react-transition-group';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 
 const BarFill = styled.div`
     ${tw`h-full bg-cyan-400`};

resources/scripts/components/elements/SearchableSelect.tsx

@@ -1,7 +1,6 @@
 import React, { createRef, ReactElement, useEffect, useState } from 'react';
 import { debounce } from 'debounce';
-import styled from 'styled-components/macro';
+import tw, { styled } from 'twin.macro';
-import tw from 'twin.macro';
 import Input from '@/components/elements/Input';
 import Label from '@/components/elements/Label';
 import InputSpinner from '@/components/elements/InputSpinner';

resources/scripts/components/elements/Select.tsx

@@ -1,5 +1,4 @@
-import styled, { css } from 'styled-components/macro';
+import tw, { css, styled } from 'twin.macro';
-import tw from 'twin.macro';
 
 interface Props {
     hideDropdownArrow?: boolean;
@@ -22,11 +21,11 @@ const Select = styled.select<Props>`
     &::-ms-expand {
         display: none;
     }
-    
+
     ${props => !props.hideDropdownArrow && css`
         ${tw`bg-neutral-600 border-neutral-500 text-neutral-200`};
         background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23C3D1DF' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
-    
+
         &:hover:not(:disabled), &:focus {
             ${tw`border-neutral-400`};
         }

resources/scripts/components/elements/Spinner.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
-import styled, { css, keyframes } from 'styled-components/macro';
+import styled, { keyframes } from 'styled-components/macro';
-import tw from 'twin.macro';
+import tw, { css } from 'twin.macro';
 
 export type SpinnerSize = 'small' | 'base' | 'large';
 
@@ -25,12 +25,12 @@ const SpinnerComponent = styled.div<Props>`
     border-width: 3px;
     border-radius: 50%;
     animation: ${spin} 1s cubic-bezier(0.55, 0.25, 0.25, 0.70) infinite;
-    
+
     ${props => props.size === 'small' ? tw`w-4 h-4 border-2` : (props.size === 'large' ? css`
         ${tw`w-16 h-16`};
         border-width: 6px;
     ` : null)};
-    
+
     border-color: ${props => !props.isBlue ? 'rgba(255, 255, 255, 0.2)' : 'hsla(212, 92%, 43%, 0.2)'};
     border-top-color: ${props => !props.isBlue ? 'rgb(255, 255, 255)' : 'hsl(212, 92%, 43%)'};
 `;

resources/scripts/components/elements/SubNavigation.tsx

@@ -1,5 +1,4 @@
-import styled from 'styled-components/macro';
+import tw, { styled, theme } from 'twin.macro';
-import tw, { theme } from 'twin.macro';
 
 const SubNavigation = styled.div`
     ${tw`w-full bg-neutral-700 shadow overflow-x-auto`};

resources/scripts/components/elements/Switch.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
-import styled from 'styled-components/macro';
 import v4 from 'uuid/v4';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 import Label from '@/components/elements/Label';
 import Input from '@/components/elements/Input';
 

resources/scripts/components/server/Console.tsx

@@ -7,9 +7,8 @@ import { WebLinksAddon } from 'xterm-addon-web-links';
 import { ScrollDownHelperAddon } from '@/plugins/XtermScrollDownHelperAddon';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { ServerContext } from '@/state/server';
-import styled from 'styled-components/macro';
 import { usePermissions } from '@/plugins/usePermissions';
-import tw, { theme as th } from 'twin.macro';
+import tw, { styled, theme as th } from 'twin.macro';
 import 'xterm/css/xterm.css';
 import useEventListener from '@/plugins/useEventListener';
 import { debounce } from 'debounce';

resources/scripts/components/server/files/FileDropdownMenu.tsx

@@ -21,11 +21,10 @@ import copyFile from '@/api/server/files/copyFile';
 import Can from '@/components/elements/Can';
 import getFileDownloadUrl from '@/api/server/files/getFileDownloadUrl';
 import useFlash from '@/plugins/useFlash';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 import { FileObject } from '@/api/server/files/loadDirectory';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import DropdownMenu from '@/components/elements/DropdownMenu';
-import styled from 'styled-components/macro';
 import useEventListener from '@/plugins/useEventListener';
 import compressFiles from '@/api/server/files/compressFiles';
 import decompressFiles from '@/api/server/files/decompressFiles';

resources/scripts/components/server/files/FileObjectRow.tsx

@@ -7,9 +7,8 @@ import { FileObject } from '@/api/server/files/loadDirectory';
 import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
 import { ServerContext } from '@/state/server';
 import { NavLink, useRouteMatch } from 'react-router-dom';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 import isEqual from 'react-fast-compare';
-import styled from 'styled-components/macro';
 import SelectFileCheckbox from '@/components/server/files/SelectFileCheckbox';
 import { usePermissions } from '@/plugins/usePermissions';
 import { join } from 'path';

resources/scripts/components/server/files/SelectFileCheckbox.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
-import { ServerContext } from '@/state/server';
-import styled from 'styled-components/macro';
 import Input from '@/components/elements/Input';
+import { ServerContext } from '@/state/server';
 
 export const FileActionCheckbox = styled(Input)`
     && {
         ${tw`border-neutral-500 bg-transparent`};
-        
+
         &:not(:checked) {
             ${tw`hover:border-neutral-300`};
         }

resources/scripts/components/server/files/UploadButton.tsx

@@ -1,9 +1,8 @@
 import axios from 'axios';
 import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 import Button from '@/components/elements/Button';
 import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components/macro';
 import { ModalMask } from '@/components/elements/Modal';
 import Fade from '@/components/elements/Fade';
 import useEventListener from '@/plugins/useEventListener';
@@ -15,7 +14,7 @@ import { WithClassname } from '@/components/types';
 
 const InnerContainer = styled.div`
   max-width: 600px;
-  ${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`}
+  ${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`};
 `;
 
 export default ({ className }: WithClassname) => {

resources/scripts/components/server/network/AllocationRow.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useState } from 'react';
 import isEqual from 'react-fast-compare';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
 import InputSpinner from '@/components/elements/InputSpinner';
@@ -9,7 +9,6 @@ import Can from '@/components/elements/Can';
 import Button from '@/components/elements/Button';
 import GreyRowBox from '@/components/elements/GreyRowBox';
 import { Allocation } from '@/api/server/getServer';
-import styled from 'styled-components/macro';
 import { debounce } from 'debounce';
 import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
 import useFlash from '@/plugins/useFlash';

resources/scripts/components/server/users/PermissionRow.tsx

@@ -1,5 +1,4 @@
-import styled from 'styled-components/macro';
+import tw, { styled } from 'twin.macro';
-import tw from 'twin.macro';
 import Checkbox from '@/components/elements/Checkbox';
 import React from 'react';
 import { useStoreState } from 'easy-peasy';
@@ -16,7 +15,7 @@ const Container = styled.label`
         ${tw`border-neutral-500 bg-neutral-800`};
       }
   }
-  
+
   &:not(:first-of-type) {
       ${tw`mt-4 sm:mt-2`};
   }

resources/scripts/macros.d.ts

@@ -1,28 +1,29 @@
-// This allows the use of css={} on JSX elements.
+import { ComponentType, ReactElement } from 'react';
-//
-// @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245
-//
-// This is just the contents of the @types/styled-components/cssprop.d.ts file
-// since using the other method of just importing the one file did not work
-// correctly for some reason.
-// noinspection ES6UnusedImports
-import {} from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { CSSProp } from 'styled-components';
+import styledImport, { CSSProp, css as cssImport, StyledComponentProps } from 'styled-components';
 
 declare module 'react' {
     interface Attributes {
-        // NOTE: unlike the plain javascript version, it is not possible to get access
-        // to the element's own attributes inside function interpolations.
-        // Only theme will be accessible, and only with the DefaultTheme due to the global
-        // nature of this declaration.
-        // If you are writing this inline you already have access to all the attributes anyway,
-        // no need for the extra indirection.
-        /**
-         * If present, this React element will be converted by
-         * `babel-plugin-styled-components` into a styled component
-         * with the given css as its styles.
-         */
         css?: CSSProp;
     }
 }
+
+declare module 'styled-components' {
+    interface StyledComponentBase<
+        C extends string | ComponentType<any>,
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        T extends object,
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        O extends object = {},
+        A extends keyof any = never
+    > extends ForwardRefExoticBase<StyledComponentProps<C, T, O, A>> {
+        (props: StyledComponentProps<C, T, O, A> & { as?: Element | string; forwardedAs?: never | undefined }): ReactElement<
+            StyledComponentProps<C, T, O, A>
+        >;
+    }
+}
+
+declare module 'twin.macro' {
+    const css: typeof cssImport;
+    const styled: typeof styledImport;
+}

resources/scripts/routers/AdminRouter.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { State, useStoreState } from 'easy-peasy';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
-import styled from 'styled-components/macro';
 import { breakpoint } from '@/theme';
 import { ApplicationStore } from '@/state';
 import { AdminContext } from '@/state/admin';

yarn.lock

@@ -2591,14 +2591,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/styled-components@npm:^5.1.7":
+"@types/styled-components@npm:^5.1.11":
-  version: 5.1.7
+  version: 5.1.11
-  resolution: "@types/styled-components@npm:5.1.7"
+  resolution: "@types/styled-components@npm:5.1.11"
   dependencies:
     "@types/hoist-non-react-statics": "*"
     "@types/react": "*"
     csstype: ^3.0.2
-  checksum: e0ce3949cbca71581288aac9b948c9943708f7ef20bdc030c8665f88f9e829b37ae7312979d9c949200aff99a704eb22e28f06b8c7bb50d4dbe1d01894762c99
+  checksum: ada6d315dd3cc5069f6e64c3bc4ab8a8f38eb3b7daba1b52c018567a793ae728f20078aeecb8a6fe8fbea3ffd285aa99e6737d082de6ffc30997be89ef7f73cb
   languageName: node
   linkType: hard
 
@@ -3559,21 +3559,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-styled-components@npm:>= 1":
+"babel-plugin-styled-components@npm:>= 1.12.0, babel-plugin-styled-components@npm:^1.13.2":
-  version: 1.10.6
-  resolution: "babel-plugin-styled-components@npm:1.10.6"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.0.0
-    "@babel/helper-module-imports": ^7.0.0
-    babel-plugin-syntax-jsx: ^6.18.0
-    lodash: ^4.17.11
-  peerDependencies:
-    styled-components: ">= 2"
-  checksum: 77928f4ab02e94395e27c8b38837c1aa8035c0c19083fcd9787caf72f92e7389d1ccba31a1af228eeded378f58759456a3113469e51f6c0ab4f8134c86a88f60
-  languageName: node
-  linkType: hard
-
-"babel-plugin-styled-components@npm:^1.13.2":
   version: 1.13.2
   resolution: "babel-plugin-styled-components@npm:1.13.2"
   dependencies:
@@ -4223,6 +4209,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"color-convert@npm:^1.9.3":
+  version: 1.9.3
+  resolution: "color-convert@npm:1.9.3"
+  dependencies:
+    color-name: 1.1.3
+  checksum: 5f244daa3d1fe1f216d48878c550465067d15268688308554e613b7640a068f96588096d51f0b98b68f15d6ff6bb8ad24e172582ac8c0ad43fa4d3da60fd1b79
+  languageName: node
+  linkType: hard
+
 "color-convert@npm:^2.0.1":
   version: 2.0.1
   resolution: "color-convert@npm:2.0.1"
@@ -4239,7 +4234,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:^1.0.0":
+"color-name@npm:1.1.3, color-name@npm:^1.0.0":
   version: 1.1.3
   resolution: "color-name@npm:1.1.3"
   checksum: d8b91bb90aefc05b6ff568cf8889566dcc6269824df6f3c9b8ca842b18d7f4d089c07dc166808d33f22092d4a79167aa56a96a5ff0d21efab548bf44614db43b
@@ -4263,6 +4258,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"color-string@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "color-string@npm:1.6.0"
+  dependencies:
+    color-name: ^1.0.0
+    simple-swizzle: ^0.2.2
+  checksum: d48692037a6d38bd1deb91886a075d8af82e4e8269c5ab33eadf174d8aa5e82753a2f3edfe6749e24e48898ea2eb76df706b603c65a721e10ddc57c5d6a078cf
+  languageName: node
+  linkType: hard
+
 "color@npm:^3.1.3":
   version: 3.1.3
   resolution: "color@npm:3.1.3"
@@ -4273,6 +4278,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"color@npm:^3.2.0":
+  version: 3.2.1
+  resolution: "color@npm:3.2.1"
+  dependencies:
+    color-convert: ^1.9.3
+    color-string: ^1.6.0
+  checksum: 2cf9436cba4cf0cd2da88d82aa69cbad548a850ec24abc1a64930778aa4bc6ef2839b178d85fa2bc254b2a5b982e7db1040c05764f6161a1266880bb0dd14d4f
+  languageName: node
+  linkType: hard
+
 "colorette@npm:^1.2.1":
   version: 1.2.1
   resolution: "colorette@npm:1.2.1"
@@ -4979,6 +4994,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"didyoumean@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "didyoumean@npm:1.2.2"
+  checksum: 808a1e4855dbb3c099bb9479af665b0065e574afd39c379c19be8cc4a1a9b06a520b919a6f4f07dcea9d88b4e87d3c69736c509d0725b89437f60ae09e8c4498
+  languageName: node
+  linkType: hard
+
 "diffie-hellman@npm:^5.0.0":
   version: 5.0.3
   resolution: "diffie-hellman@npm:5.0.3"
@@ -5814,7 +5836,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.5":
+"fast-glob@npm:^3.2.5, fast-glob@npm:^3.2.7":
   version: 3.2.7
   resolution: "fast-glob@npm:3.2.7"
   dependencies:
@@ -9885,7 +9907,7 @@ fsevents@^1.2.7:
     "@types/react-router-dom": ^5.1.8
     "@types/react-select": ^4.0.17
     "@types/react-transition-group": ^4.4.2
-    "@types/styled-components": ^5.1.7
+    "@types/styled-components": ^5.1.11
     "@types/uuid": ^3.4.5
     "@types/webappsec-credential-management": ^0.6.1
     "@types/webpack-env": ^1.16.2
@@ -9941,11 +9963,11 @@ fsevents@^1.2.7:
     sockette: ^2.0.6
     source-map-loader: ^1.1.3
     style-loader: ^2.0.0
-    styled-components: ^5.2.1
+    styled-components: ^5.3.0
     styled-components-breakpoint: ^3.0.0-preview.20
     svg-url-loader: ^7.1.1
     swr: ^0.5.6
-    tailwindcss: ^2.2.4
+    tailwindcss: ^2.2.6
     terser-webpack-plugin: ^4.2.3
     twin.macro: ^2.6.2
     typescript: ^4.3.5
@@ -11861,16 +11883,16 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^5.2.1":
+"styled-components@npm:^5.3.0":
-  version: 5.2.1
+  version: 5.3.0
-  resolution: "styled-components@npm:5.2.1"
+  resolution: "styled-components@npm:5.3.0"
   dependencies:
     "@babel/helper-module-imports": ^7.0.0
     "@babel/traverse": ^7.4.5
     "@emotion/is-prop-valid": ^0.8.8
     "@emotion/stylis": ^0.8.4
     "@emotion/unitless": ^0.7.4
-    babel-plugin-styled-components: ">= 1"
+    babel-plugin-styled-components: ">= 1.12.0"
     css-to-react-native: ^3.0.0
     hoist-non-react-statics: ^3.0.0
     shallowequal: ^1.1.0
@@ -11879,7 +11901,7 @@ resolve@^2.0.0-next.3:
     react: ">= 16.8.0"
     react-dom: ">= 16.8.0"
     react-is: ">= 16.8.0"
-  checksum: c27911be08f2c6212d1f381d154cab5204c63b34d1b9ba56388b19654497a523ff466884fbf8914637c046ae8862387b0fc63f9ead67e1a8ab3a8af70b0d8089
+  checksum: 1f94f92b5dab0b0a965646079604c184e9ef31fd0546881408039a5b4d9a4ebe73b6bb62b05912f06b68392352f1fed4c2dd66a74888b2446226aa0105b681c9
   languageName: node
   linkType: hard
 
@@ -11961,7 +11983,7 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
-"tailwindcss@npm:^2.1.0, tailwindcss@npm:^2.2.4":
+"tailwindcss@npm:^2.1.0":
   version: 2.2.4
   resolution: "tailwindcss@npm:2.2.4"
   dependencies:
@@ -12006,6 +12028,51 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
+"tailwindcss@npm:^2.2.6":
+  version: 2.2.6
+  resolution: "tailwindcss@npm:2.2.6"
+  dependencies:
+    arg: ^5.0.0
+    bytes: ^3.0.0
+    chalk: ^4.1.1
+    chokidar: ^3.5.2
+    color: ^3.2.0
+    cosmiconfig: ^7.0.0
+    detective: ^5.2.0
+    didyoumean: ^1.2.2
+    dlv: ^1.1.3
+    fast-glob: ^3.2.7
+    fs-extra: ^10.0.0
+    glob-parent: ^6.0.0
+    html-tags: ^3.1.0
+    is-glob: ^4.0.1
+    lodash: ^4.17.21
+    lodash.topath: ^4.5.2
+    modern-normalize: ^1.1.0
+    node-emoji: ^1.8.1
+    normalize-path: ^3.0.0
+    object-hash: ^2.2.0
+    postcss-js: ^3.0.3
+    postcss-load-config: ^3.1.0
+    postcss-nested: 5.0.5
+    postcss-selector-parser: ^6.0.6
+    postcss-value-parser: ^4.1.0
+    pretty-hrtime: ^1.0.3
+    purgecss: ^4.0.3
+    quick-lru: ^5.1.1
+    reduce-css-calc: ^2.1.8
+    resolve: ^1.20.0
+    tmp: ^0.2.1
+  peerDependencies:
+    autoprefixer: ^10.0.2
+    postcss: ^8.0.9
+  bin:
+    tailwind: lib/cli.js
+    tailwindcss: lib/cli.js
+  checksum: 61bf4028f419e9c496e53521cd18bb727cb27c9bf932958a15c320041e5c4d5572e8adf44513bb9b11bd3015719784bc7ffca1995a9208dec6d4eb06a4c91961
+  languageName: node
+  linkType: hard
+
 "tapable@npm:^1.0, tapable@npm:^1.0.0, tapable@npm:^1.1.3":
   version: 1.1.3
   resolution: "tapable@npm:1.1.3"