Get compilation back to working

resources/scripts/components/elements/AceEditor.tsx

@@ -3,7 +3,7 @@ import useRouter from 'use-react-router';
 import { ServerContext } from '@/state/server';
 import ace, { Editor } from 'brace';
 import getFileContents from '@/api/server/files/getFileContents';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 // @ts-ignore
 require('brace/ext/modelist');
@@ -113,7 +113,7 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
     return (
         <EditorContainer style={style}>
             <div id={'editor'} ref={ref}/>
-            <div className={'absolute pin-r pin-b z-50'}>
+            <div className={'absolute right-0 bottom-0 z-50'}>
                 <div className={'m-3 rounded bg-neutral-900 border border-black'}>
                     <select
                         className={'input-dark'}

resources/scripts/components/elements/DropdownMenu.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
 
 interface Props {
     children: React.ReactNode;
@@ -12,10 +13,7 @@ export const DropdownButtonRow = styled.button<{ danger?: boolean }>`
     transition: 150ms all ease;
 
     &:hover {
-        ${props => props.danger
-            ? tw`text-red-700 bg-red-100`
-            : tw`text-neutral-700 bg-neutral-100`
-        };
+        ${props => props.danger ? tw`text-red-700 bg-red-100` : tw`text-neutral-700 bg-neutral-100`};
     }
 `;
 

resources/scripts/components/elements/InputSpinner.tsx

@@ -11,7 +11,7 @@ const InputSpinner = ({ visible, children }: { visible: boolean, children: React
             appear={true}
             classNames={'fade'}
         >
-            <div className={'absolute pin-r h-full flex items-center justify-end pr-3'}>
+            <div className={'absolute right-0 h-full flex items-center justify-end pr-3'}>
                 <Spinner size={'tiny'}/>
             </div>
         </CSSTransition>

resources/scripts/components/elements/ProgressBar.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
+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';
 
 const BarFill = styled.div`
     ${tw`h-full bg-cyan-400`};

resources/scripts/components/elements/SpinnerOverlay.tsx

@@ -13,7 +13,7 @@ interface Props {
 const SpinnerOverlay = ({ size, fixed, visible, backgroundOpacity }: Props) => (
     <CSSTransition timeout={150} classNames={'fade'} in={visible} unmountOnExit={true}>
         <div
-            className={classNames('pin-t pin-l flex items-center justify-center w-full h-full rounded', {
+            className={classNames('top-0 left-0 flex items-center justify-center w-full h-full rounded', {
                 absolute: !fixed,
                 fixed: fixed,
             })}

resources/scripts/components/elements/Switch.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import v4 from 'uuid/v4';
-import classNames from 'classnames';
+import tw from 'twin.macro';
 
 const ToggleContainer = styled.div`
     ${tw`relative select-none w-12 leading-normal`};
@@ -47,8 +47,8 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
     const uuid = useMemo(() => v4(), []);
 
     return (
-        <div className={'flex items-center'}>
-            <ToggleContainer className={'flex-none'}>
+        <div css={tw`flex items-center`}>
+            <ToggleContainer css={tw`flex-none`}>
                 {children
                 || <input
                     id={uuid}
@@ -61,12 +61,15 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
                 <label htmlFor={uuid}/>
             </ToggleContainer>
             {(label || description) &&
-            <div className={'ml-4 w-full'}>
+            <div css={tw`ml-4 w-full`}>
                 {label &&
                 <label
-                    className={classNames('input-dark-label cursor-pointer', { 'mb-0': !!description })}
+                    css={[ tw`cursor-pointer`, !!description && tw`mb-0` ]}
+                    className={'input-dark-label'}
                     htmlFor={uuid}
-                >{label}</label>
+                >
+                    {label}
+                </label>
                 }
                 {description &&
                 <p className={'input-help'}>