ui: I HATE STYLED-COMPONENTS WITH TYPESCRIPT

2021-07-22 11:15:27 -06:00 · 2021-07-22 11:15:27 -06:00 · 361596e051
commit 361596e051
parent 23de3d68f3
40 changed files with 180 additions and 147 deletions
--- a/package.json
+++ b/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",
--- a/resources/scripts/TransitionRouter.tsx
+++ b/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 from 'twin.macro';
+import tw, { styled } from 'twin.macro';

 const StyledSwitchTransition = styled(SwitchTransition)`
    ${tw`relative`};
--- a/resources/scripts/components/MessageBox.tsx
+++ b/resources/scripts/components/MessageBox.tsx
@ -1,6 +1,5 @@
 import * as React from 'react';
-import tw, { TwStyle } from 'twin.macro';
-import styled from 'styled-components/macro';
+import tw, { styled, TwStyle } from 'twin.macro';

 export type FlashMessageType = 'success' | 'info' | 'warning' | 'error';

--- a/resources/scripts/components/NavigationBar.tsx
+++ b/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 styled from 'styled-components/macro';
+import tw, { styled, theme } from 'twin.macro';

 const Navigation = styled.div`
    ${tw`w-full bg-neutral-900 shadow-md overflow-x-auto`};
--- a/resources/scripts/components/admin/AdminCheckbox.tsx
+++ b/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 from 'twin.macro';
+import tw, { styled } from 'twin.macro';

 export const TableCheckbox = styled(Input)`
    && {
--- a/resources/scripts/components/admin/AdminTable.tsx
+++ b/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 from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 import { PaginatedResult, PaginationDataSet } from '@/api/http';
 import { ListContext as TableHooks } from '@/api/admin';

--- a/resources/scripts/components/admin/SubNavigation.tsx
+++ b/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 from 'twin.macro';
+import tw, { styled } 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`};
--- a/resources/scripts/components/auth/LoginFormContainer.tsx
+++ b/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')`
--- a/resources/scripts/components/dashboard/AccountOverviewContainer.tsx
+++ b/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`
--- a/resources/scripts/components/dashboard/ServerRow.tsx
+++ b/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
--- a/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx
+++ b/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 {
--- a/resources/scripts/components/dashboard/search/SearchModal.tsx
+++ b/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 from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 import Input from '@/components/elements/Input';

 type Props = RequiredModalProps;
--- a/resources/scripts/components/elements/Button.tsx
+++ b/resources/scripts/components/elements/Button.tsx
@ -1,6 +1,5 @@
 import React from 'react';
-import styled, { css } from 'styled-components/macro';
-import tw from 'twin.macro';
+import tw, { css, styled } 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}/>;

--- a/resources/scripts/components/elements/ContentContainer.tsx
+++ b/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;
--- a/resources/scripts/components/elements/CopyOnClick.tsx
+++ b/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';

--- a/resources/scripts/components/elements/DropdownMenu.tsx
+++ b/resources/scripts/components/elements/DropdownMenu.tsx
@ -1,6 +1,5 @@
 import React, { createRef } from 'react';
-import styled from 'styled-components/macro';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 import Fade from '@/components/elements/Fade';

 interface Props {
--- a/resources/scripts/components/elements/Editor.tsx
+++ b/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, { TwStyle } from 'twin.macro';
+import tw, { styled, TwStyle } from 'twin.macro';
 import { ayuMirage } from '@/components/elements/EditorTheme';

 type EditorMode = LanguageSupport | LezerLanguage | StreamParser<any>;
--- a/resources/scripts/components/elements/Fade.tsx
+++ b/resources/scripts/components/elements/Fade.tsx
@ -1,6 +1,5 @@
 import React from 'react';
-import tw from 'twin.macro';
-import styled from 'styled-components/macro';
+import tw, { styled } from 'twin.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;
--- a/resources/scripts/components/elements/GreyRowBox.tsx
+++ b/resources/scripts/components/elements/GreyRowBox.tsx
@ -1,9 +1,8 @@
-import styled from 'styled-components/macro';
-import tw from 'twin.macro';
+import tw, { styled } 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 {
--- a/resources/scripts/components/elements/Input.tsx
+++ b/resources/scripts/components/elements/Input.tsx
@ -1,5 +1,4 @@
-import styled, { css } from 'styled-components/macro';
-import tw from 'twin.macro';
+import tw, { css, styled } from 'twin.macro';

 export interface Props {
    isLight?: boolean;
--- a/resources/scripts/components/elements/InputSpinner.tsx
+++ b/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 styled, { css } from 'styled-components/macro';
+import tw, { css, styled } from 'twin.macro';
 import Select from '@/components/elements/Select';

 const Container = styled.div<{ visible?: boolean }>`
    ${tw`relative`};
-    
+
    ${props => props.visible && css`
        & ${Select} {
            background-image: none;
--- a/resources/scripts/components/elements/Label.tsx
+++ b/resources/scripts/components/elements/Label.tsx
@ -1,5 +1,4 @@
-import styled from 'styled-components/macro';
-import tw from 'twin.macro';
+import tw, { styled } from 'twin.macro';

 const Label = styled.label<{ isLight?: boolean }>`
    ${tw`block text-xs uppercase text-neutral-200 mb-1 sm:mb-2`};
--- a/resources/scripts/components/elements/Modal.tsx
+++ b/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 styled, { css } from 'styled-components/macro';
+import tw, { css, styled } from 'twin.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`};
        }
--- a/resources/scripts/components/elements/Pagination.tsx
+++ b/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 styled from 'styled-components/macro';
+import tw, { styled } from 'twin.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`};
    }
--- a/resources/scripts/components/elements/ProgressBar.tsx
+++ b/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`};
--- a/resources/scripts/components/elements/SearchableSelect.tsx
+++ b/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 from 'twin.macro';
+import tw, { styled } from 'twin.macro';
 import Input from '@/components/elements/Input';
 import Label from '@/components/elements/Label';
 import InputSpinner from '@/components/elements/InputSpinner';
--- a/resources/scripts/components/elements/Select.tsx
+++ b/resources/scripts/components/elements/Select.tsx
@ -1,5 +1,4 @@
-import styled, { css } from 'styled-components/macro';
-import tw from 'twin.macro';
+import tw, { css, styled } 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`};
        }
--- a/resources/scripts/components/elements/Spinner.tsx
+++ b/resources/scripts/components/elements/Spinner.tsx
@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
-import styled, { css, keyframes } from 'styled-components/macro';
-import tw from 'twin.macro';
+import styled, { keyframes } from 'styled-components/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%)'};
 `;
--- a/resources/scripts/components/elements/SubNavigation.tsx
+++ b/resources/scripts/components/elements/SubNavigation.tsx
@ -1,5 +1,4 @@
-import styled from 'styled-components/macro';
-import tw, { theme } from 'twin.macro';
+import tw, { styled, theme } from 'twin.macro';

 const SubNavigation = styled.div`
    ${tw`w-full bg-neutral-700 shadow overflow-x-auto`};
--- a/resources/scripts/components/elements/Switch.tsx
+++ b/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';

--- a/resources/scripts/components/server/Console.tsx
+++ b/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';
--- a/resources/scripts/components/server/files/FileDropdownMenu.tsx
+++ b/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';
--- a/resources/scripts/components/server/files/FileObjectRow.tsx
+++ b/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';
--- a/resources/scripts/components/server/files/SelectFileCheckbox.tsx
+++ b/resources/scripts/components/server/files/SelectFileCheckbox.tsx
@ -1,13 +1,12 @@
 import React from 'react';
-import tw from 'twin.macro';
-import { ServerContext } from '@/state/server';
-import styled from 'styled-components/macro';
+import tw, { styled } from 'twin.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`};
        }
--- a/resources/scripts/components/server/files/UploadButton.tsx
+++ b/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) => {
--- a/resources/scripts/components/server/network/AllocationRow.tsx
+++ b/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';
--- a/resources/scripts/components/server/users/PermissionRow.tsx
+++ b/resources/scripts/components/server/users/PermissionRow.tsx
@ -1,5 +1,4 @@
-import styled from 'styled-components/macro';
-import tw from 'twin.macro';
+import tw, { styled } 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`};
  }
--- a/resources/scripts/macros.d.ts
+++ b/resources/scripts/macros.d.ts
@ -1,28 +1,29 @@
-// This allows the use of css={} on JSX elements.
-//
-// @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';
+import { ComponentType, ReactElement } 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;
+}
--- a/resources/scripts/routers/AdminRouter.tsx
+++ b/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 styled from 'styled-components/macro';
+import tw, { styled } from 'twin.macro';
 import { breakpoint } from '@/theme';
 import { ApplicationStore } from '@/state';
 import { AdminContext } from '@/state/admin';
--- a/yarn.lock
+++ b/yarn.lock
@ -2591,14 +2591,14 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/styled-components@npm:^5.1.7":
-  version: 5.1.7
-  resolution: "@types/styled-components@npm:5.1.7"
+"@types/styled-components@npm:^5.1.11":
+  version: 5.1.11
+  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":
-  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":
+"babel-plugin-styled-components@npm:>= 1.12.0, 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":
-  version: 5.2.1
-  resolution: "styled-components@npm:5.2.1"
+"styled-components@npm:^5.3.0":
+  version: 5.3.0
+  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"