Fixes for purge CSS

Author: DaneEveritt

resources/scripts/components/server/Console.tsx

@@ -3,6 +3,7 @@ import { ITerminalOptions, Terminal } from 'xterm';
 import * as TerminalFit from 'xterm/lib/addons/fit/fit';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { ServerContext } from '@/state/server';
+import styled from 'styled-components';
 
 const theme = {
     background: 'transparent',
@@ -35,6 +36,16 @@ const terminalProps: ITerminalOptions = {
     theme: theme,
 };
 
+const TerminalDiv = styled.div`
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        ${tw`bg-neutral-900`};
+    }
+`;
+
 export default () => {
     const [ terminalElement, setTerminalElement ] = useState<HTMLDivElement | null>(null);
     const useRef = useCallback(node => setTerminalElement(node), []);
@@ -94,13 +105,13 @@ export default () => {
         <div className={'text-xs font-mono relative'}>
             <SpinnerOverlay visible={!connected} size={'large'}/>
             <div
-                className={'rounded-t p-2 bg-black overflow-scroll w-full'}
+                className={'rounded-t p-2 bg-black w-full'}
                 style={{
                     minHeight: '16rem',
                     maxHeight: '32rem',
                 }}
             >
-                <div id={'terminal'} ref={useRef}/>
+                <TerminalDiv id={'terminal'} ref={useRef}/>
             </div>
             <div className={'rounded-b bg-neutral-900 text-neutral-100 flex'}>
                 <div className={'flex-no-shrink p-2 font-bold'}>$</div>

resources/styles/components/navigation.css

@@ -25,6 +25,7 @@
             @apply .flex .items-center .h-full .no-underline .text-neutral-300 .px-6;
             transition: background-color 150ms linear, color 150ms linear, box-shadow 150ms ease-in;
 
+            /*! purgecss start ignore */
             &.active, &:hover {
                 @apply .text-neutral-100 .bg-black;
                 box-shadow: inset 0 -2px config('colors.cyan-700');
@@ -33,6 +34,7 @@
             &.active {
                 box-shadow: inset 0 -2px config('colors.cyan-500');
             }
+            /*! purgecss end ignore */
         }
     }
 }
@@ -43,6 +45,7 @@
     .items {
         @apply .flex .items-center .text-sm .mx-2;
 
+        /*! purgecss start ignore */
         & > a, & > div {
             @apply .inline-block .py-3 .px-4 .text-neutral-300 .no-underline;
             transition: color 150ms linear, box-shadow 150ms ease-in;
@@ -60,5 +63,6 @@
                 box-shadow: inset 0 -2px config('colors.cyan-500');
             }
         }
+        /*! purgecss end ignore */
     }
 }

webpack.config.js

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const _ = require('lodash');
 const path = require('path');
 const tailwind = require('tailwindcss');
 const glob = require('glob-all');
@@ -34,7 +33,7 @@ if (isProduction) {
                 {
                     extractor: class {
                         static extract (content) {
-                            return content.match(/[A-z0-9-:\/]+/g) || [];
+                            return content.match(/[A-Za-z0-9-_:\\/]+/g) || [];
                         }
                     },
                     extensions: ['html', 'ts', 'tsx', 'js', 'php'],
@@ -63,7 +62,7 @@ module.exports = {
         path: path.resolve(__dirname, 'public/assets'),
         filename: isProduction ? 'bundle.[chunkhash:8].js' : 'bundle.[hash:8].js',
         chunkFilename: isProduction ? '[name].[chunkhash:8].js' : '[name].[hash:8].js',
-        publicPath: _.get(process.env, 'PUBLIC_PATH', '') + '/assets/',
+        publicPath: (process.env.PUBLIC_PATH || '') + '/assets/',
         crossOriginLoading: 'anonymous',
     },
     module: {
@@ -168,7 +167,7 @@ module.exports = {
     },
     devServer: {
         contentBase: path.join(__dirname, 'public'),
-        publicPath: _.get(process.env, 'PUBLIC_PATH', '') + '/assets/',
+        publicPath: (process.env.PUBLIC_PATH || '') + '/assets/',
         allowedHosts: [
             '.pterodactyl.test',
         ],