Stop caching stupid things and causing builds to die

.babel-plugin-macrosrc.js

@@ -2,7 +2,6 @@ module.exports = {
     twin: {
         preset: 'styled-components',
         autoCssProp: true,
-        config: './tailwind.config.js',
     },
     styledComponents: {
         pure: true,

package.json

@@ -35,7 +35,7 @@
         "react-transition-group": "^4.4.1",
         "reaptcha": "^1.7.2",
         "sockette": "^2.0.6",
-        "styled-components": "^5.1.1",
+        "styled-components": "^5.2.1",
         "styled-components-breakpoint": "^3.0.0-preview.20",
         "swr": "^0.2.3",
         "tailwindcss": "^2.0.2",
@@ -75,14 +75,15 @@
         "@types/react-router": "^5.1.3",
         "@types/react-router-dom": "^5.1.3",
         "@types/react-transition-group": "^4.4.0",
-        "@types/styled-components": "^5.1.0",
+        "@types/styled-components": "^5.1.7",
         "@types/uuid": "^3.4.5",
         "@types/webpack-env": "^1.15.2",
         "@types/yup": "^0.29.3",
         "@typescript-eslint/eslint-plugin": "^3.5.0",
         "@typescript-eslint/parser": "^3.5.0",
+        "autoprefixer": "^10.1.0",
         "babel-loader": "^8.0.6",
-        "babel-plugin-styled-components": "^1.10.7",
+        "babel-plugin-styled-components": "^1.12.0",
         "cross-env": "^7.0.2",
         "css-loader": "^3.2.1",
         "eslint": "^7.4.0",
@@ -94,6 +95,7 @@
         "eslint-plugin-react-hooks": "^4.0.5",
         "eslint-plugin-standard": "^4.0.1",
         "fork-ts-checker-webpack-plugin": "^5.0.6",
+        "postcss": "^8.2.1",
         "redux-devtools-extension": "^2.13.8",
         "source-map-loader": "^1.0.1",
         "style-loader": "^1.2.1",
@@ -115,7 +117,7 @@
         "watch": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --watch --progress",
         "build": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --progress",
         "build:production": "yarn run clean && cross-env NODE_ENV=production ./node_modules/.bin/webpack --mode production",
-        "serve": "yarn run clean && cross-env PUBLIC_PATH=https://pterodactyl.test:8080 NODE_ENV=development TSC_WATCHFILE=UseFsEventsWithFallbackDynamicPolling webpack-dev-server --host 0.0.0.0 --hot --https --key /etc/ssl/private/pterodactyl.test-key.pem --cert /etc/ssl/private/pterodactyl.test.pem"
+        "serve": "yarn run clean && cross-env PUBLIC_PATH=https://pterodactyl.test:8080 NODE_ENV=development webpack-dev-server --host 0.0.0.0 --hot --https --key /etc/ssl/private/pterodactyl.test-key.pem --cert /etc/ssl/private/pterodactyl.test.pem"
     },
     "browserslist": [
         "> 0.5%",

resources/scripts/components/NavigationBar.tsx

@@ -5,10 +5,8 @@ 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 from 'twin.macro';
+import tw, { theme } from 'twin.macro';
 import styled from 'styled-components/macro';
-// @ts-ignore
-import * as config from '@/../../tailwind.config.js';
 
 const Navigation = styled.div`
     ${tw`w-full bg-neutral-900 shadow-md overflow-x-auto`};
@@ -37,7 +35,7 @@ const RightNavigation = styled.div`
         }
         
         &:active, &:hover, &.active {
-            box-shadow: inset 0 -2px ${config.theme.colors.cyan['700']};
+            box-shadow: inset 0 -2px ${theme`colors.cyan.700`.toString()};
         }
     }
 `;

resources/scripts/components/elements/DropdownMenu.tsx

@@ -94,7 +94,7 @@ class DropdownMenu extends React.PureComponent<Props, State> {
                             e.stopPropagation();
                             this.setState({ visible: false });
                         }}
-                        css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48 z-50`}
+                        css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 z-50`}
                     >
                         {this.props.children}
                     </div>

resources/scripts/components/elements/SubNavigation.tsx

@@ -1,7 +1,5 @@
 import styled from 'styled-components/macro';
-import tw from 'twin.macro';
+import tw, { theme } from 'twin.macro';
-// @ts-ignore
-import config from '../../../../tailwind.config';
 
 const SubNavigation = styled.div`
     ${tw`w-full bg-neutral-700 shadow overflow-x-auto`};
@@ -23,7 +21,7 @@ const SubNavigation = styled.div`
 
             &:active, &.active {
                 ${tw`text-neutral-100`};
-                box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']};
+                box-shadow: inset 0 -2px ${theme`colors.cyan.700`.toString()};
             }
         }
     }

tailwind.config.js

@@ -1,3 +1,5 @@
+const colors = require('tailwindcss/colors');
+
 module.exports = {
     theme: {
         fontFamily: {
@@ -8,79 +10,13 @@ module.exports = {
         colors: {
             transparent: 'transparent',
             black: 'hsl(210, 27%, 10%)',
-            white: '#ffffff',
+            white: '#fff',
-            primary: {
+            primary: colors.blue,
-                50: 'hsl(202, 100%, 95%)', // lightest
+            neutral: colors.coolGray,
-                100: 'hsl(204, 100%, 86%)', // lighter
+            cyan: colors.cyan,
-                200: 'hsl(206, 93%, 73%)',
+            green: colors.green,
-                300: 'hsl(208, 88%, 62%)',
+            yellow: colors.amber,
-                400: 'hsl(210, 83%, 53%)', // light
+            red: colors.red,
-                500: 'hsl(212, 92%, 43%)', // base
-                600: 'hsl(214, 95%, 36%)', // dark
-                700: 'hsl(215, 96%, 32%)',
-                800: 'hsl(216, 98%, 25%)', // darker
-                900: 'hsl(218, 100%, 17%)', // darkest
-            },
-            neutral: {
-                50: 'hsl(216, 33%, 97%)',
-                100: 'hsl(214, 15%, 91%)',
-                200: 'hsl(210, 16%, 82%)',
-                300: 'hsl(211, 13%, 65%)',
-                400: 'hsl(211, 10%, 53%)',
-                500: 'hsl(211, 12%, 43%)',
-                600: 'hsl(209, 14%, 37%)',
-                700: 'hsl(209, 18%, 30%)',
-                800: 'hsl(209, 20%, 25%)',
-                900: 'hsl(210, 24%, 16%)',
-            },
-            red: {
-                50: 'hsl(360, 100%, 95%)',
-                100: 'hsl(360, 100%, 87%)',
-                200: 'hsl(360, 100%, 80%)',
-                300: 'hsl(360, 91%, 69%)',
-                400: 'hsl(360, 83%, 62%)',
-                500: 'hsl(356, 75%, 53%)',
-                600: 'hsl(354, 85%, 44%)',
-                700: 'hsl(352, 90%, 35%)',
-                800: 'hsl(350, 94%, 28%)',
-                900: 'hsl(348, 94%, 20%)',
-            },
-            yellow: {
-                50: 'hsl(49, 100%, 96%)',
-                100: 'hsl(48, 100%, 88%)',
-                200: 'hsl(48, 95%, 76%)',
-                300: 'hsl(48, 94%, 68%)',
-                400: 'hsl(44, 92%, 63%)',
-                500: 'hsl(42, 87%, 55%)',
-                600: 'hsl(36, 77%, 49%)',
-                700: 'hsl(29, 80%, 44%)',
-                800: 'hsl(22, 82%, 39%)',
-                900: 'hsl(15, 86%, 30%)',
-            },
-            cyan: {
-                50: 'hsl(171, 82%, 94%)',
-                100: 'hsl(172, 97%, 88%)',
-                200: 'hsl(174, 96%, 78%)',
-                300: 'hsl(176, 87%, 67%)',
-                400: 'hsl(178, 78%, 57%)',
-                500: 'hsl(180, 77%, 47%)',
-                600: 'hsl(182, 85%, 39%)',
-                700: 'hsl(184, 90%, 34%)',
-                800: 'hsl(186, 91%, 29%)',
-                900: 'hsl(188, 91%, 23%)',
-            },
-            green: {
-                50: 'hsl(125, 65%, 93%)',
-                100: 'hsl(127, 65%, 85%)',
-                200: 'hsl(124, 63%, 74%)',
-                300: 'hsl(123, 53%, 55%)',
-                400: 'hsl(123, 57%, 45%)',
-                500: 'hsl(122, 73%, 35%)',
-                600: 'hsl(122, 80%, 29%)',
-                700: 'hsl(125, 79%, 26%)',
-                800: 'hsl(125, 86%, 20%)',
-                900: 'hsl(125, 97%, 14%)',
-            },
         },
         extend: {
             fontSize: {
@@ -94,4 +30,7 @@ module.exports = {
             }),
         },
     },
+    plugins: [
+        require('@tailwindcss/forms'),
+    ]
 };

webpack.config.js

@@ -28,9 +28,6 @@ module.exports = {
                 test: /\.tsx?$/,
                 exclude: /node_modules/,
                 loader: 'babel-loader',
-                options: {
-                    cacheDirectory: !isProduction,
-                },
             },
             {
                 test: /\.css$/,
@@ -92,7 +89,7 @@ module.exports = {
         minimize: isProduction,
         minimizer: [
             new TerserPlugin({
-                cache: true,
+                cache: isProduction,
                 parallel: true,
                 extractComments: false,
                 terserOptions: {

yarn.lock

@@ -1233,13 +1233,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-native@*":
-  version "0.60.2"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.2.tgz#2dca78481a904419c2a5907288dd97d1090c6e3c"
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/react" "*"
-
 "@types/react-redux@^7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.1.tgz#eb01e89cf71cad77df9f442b819d5db692b997cb"
@@ -1286,15 +1279,14 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/styled-components@^5.1.0":
+"@types/styled-components@^5.1.7":
-  version "5.1.0"
+  version "5.1.7"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.0.tgz#24d3412ba5395aa06e14fbc93c52f9454cebd0d6"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.7.tgz#3cd10b088c1cb1acde2e4b166b3e8275a3083710"
-  integrity sha512-ZFlLCuwF5r+4Vb7JUmd+Yr2S0UBdBGmI7ctFTgJMypIp3xOHI4LCFVn2dKMvpk6xDB2hLRykrEWMBwJEpUAUIQ==
+  integrity sha512-BJzPhFygYspyefAGFZTZ/8lCEY4Tk+Iqktvnko3xmJf9LrLqs3+grxPeU3O0zLl6yjbYBopD0/VikbHgXDbJtA==
   dependencies:
     "@types/hoist-non-react-statics" "*"
     "@types/react" "*"
-    "@types/react-native" "*"
+    csstype "^3.0.2"
-    csstype "^2.2.0"
 
 "@types/tern@*":
   version "0.23.3"
@@ -1797,6 +1789,18 @@ atob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.1.tgz#ae2d5a729477f289d60dd7f96a6314a22dd6c22a"
 
+autoprefixer@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.1.0.tgz#b19fd8524edef8c85c9db3bdb0c998de84e172fb"
+  integrity sha512-0/lBNwN+ZUnb5su18NZo5MBIjDaq6boQKZcxwy86Gip/CmXA2zZqUoFQLCNAGI5P25ZWSP2RWdhDJ8osfKEjoQ==
+  dependencies:
+    browserslist "^4.15.0"
+    caniuse-lite "^1.0.30001165"
+    colorette "^1.2.1"
+    fraction.js "^4.0.12"
+    normalize-range "^0.1.2"
+    postcss-value-parser "^4.1.0"
+
 axios@^0.19.2:
   version "0.19.2"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
@@ -1838,10 +1842,10 @@ babel-plugin-macros@^2.8.0:
     babel-plugin-syntax-jsx "^6.18.0"
     lodash "^4.17.11"
 
-babel-plugin-styled-components@^1.10.7:
+babel-plugin-styled-components@^1.12.0:
-  version "1.10.7"
+  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz#3494e77914e9989b33cc2d7b3b29527a949d635c"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz#1dec1676512177de6b827211e9eda5a30db4f9b9"
-  integrity sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==
+  integrity sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.0.0"
     "@babel/helper-module-imports" "^7.0.0"
@@ -2035,6 +2039,17 @@ browserslist@^4.12.0:
     escalade "^3.0.1"
     node-releases "^1.1.58"
 
+browserslist@^4.15.0:
+  version "4.16.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.0.tgz#410277627500be3cb28a1bfe037586fbedf9488b"
+  integrity sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==
+  dependencies:
+    caniuse-lite "^1.0.30001165"
+    colorette "^1.2.1"
+    electron-to-chromium "^1.3.621"
+    escalade "^3.1.1"
+    node-releases "^1.1.67"
+
 browserslist@^4.8.5:
   version "4.14.5"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.5.tgz#1c751461a102ddc60e40993639b709be7f2c4015"
@@ -2161,6 +2176,11 @@ caniuse-lite@^1.0.30001135:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001148.tgz#dc97c7ed918ab33bf8706ddd5e387287e015d637"
   integrity sha512-E66qcd0KMKZHNJQt9hiLZGE3J4zuTqE1OnU53miEVtylFbwOEmeA5OsRu90noZful+XGSQOni1aT2tiqu/9yYw==
 
+caniuse-lite@^1.0.30001165:
+  version "1.0.30001170"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001170.tgz#0088bfecc6a14694969e391cc29d7eb6362ca6a7"
+  integrity sha512-Dd4d/+0tsK0UNLrZs3CvNukqalnVTRrxb5mcQm8rHL49t7V5ZaTygwXkrq+FB+dVDf++4ri8eJnFEJAB8332PA==
+
 chalk@^2.0, chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -2617,6 +2637,11 @@ csstype@^2.2.0, csstype@^2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
 
+csstype@^3.0.2:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.5.tgz#7fdec6a28a67ae18647c51668a9ff95bb2fa7bb8"
+  integrity sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==
+
 cyclist@~0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
@@ -2913,6 +2938,11 @@ electron-to-chromium@^1.3.571:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.582.tgz#1adfac5affce84d85b3d7b3dfbc4ade293a6ffc4"
   integrity sha512-0nCJ7cSqnkMC+kUuPs0YgklFHraWGl/xHqtZWWtOeVtyi+YqkoAOMGuZQad43DscXCQI/yizcTa3u6B5r+BLww==
 
+electron-to-chromium@^1.3.621:
+  version "1.3.633"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.633.tgz#16dd5aec9de03894e8d14a1db4cda8a369b9b7fe"
+  integrity sha512-bsVCsONiVX1abkWdH7KtpuDAhsQ3N3bjPYhROSAXE78roJKet0Y5wznA14JE9pzbwSZmSMAW6KiKYf1RvbTJkA==
+
 elliptic@^6.0.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
@@ -3015,7 +3045,7 @@ escalade@^3.0.1:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.1.tgz#52568a77443f6927cd0ab9c73129137533c965ed"
   integrity sha512-DR6NO3h9niOT+MZs7bjxlj2a1k+POu5RN8CLTPX2+i78bRi9eLe7+0zXgUHMnGXWybYcL61E9hGhPKqedy8tQA==
 
-escalade@^3.1.0:
+escalade@^3.1.0, escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
@@ -3562,6 +3592,11 @@ forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
 
+fraction.js@^4.0.12:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.0.13.tgz#3c1c315fa16b35c85fffa95725a36fa729c69dfe"
+  integrity sha512-E1fz2Xs9ltlUp+qbiyx9wmt2n9dRzPsS11Jtdb8D2o+cC7wr9xkkKsVKJuBX0ST+LVS+LhLO+SbLJNtfWcJvXA==
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -5047,6 +5082,11 @@ node-releases@^1.1.61:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.63.tgz#db6dbb388544c31e888216304e8fd170efee3ff5"
   integrity sha512-ukW3iCfQaoxJkSPN+iK7KznTeqDGVJatAEuXsJERYHa9tn/KaT5lBdIyxQjLEVTzSkyjJEuQ17/vaEjrOauDkg==
 
+node-releases@^1.1.67:
+  version "1.1.67"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.67.tgz#28ebfcccd0baa6aad8e8d4d8fe4cbc49ae239c12"
+  integrity sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==
+
 nopt@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
@@ -5074,6 +5114,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
 
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+
 npm-bundled@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.3.tgz#7e71703d973af3370a9591bafe3a63aca0be2308"
@@ -6816,10 +6861,10 @@ styled-components-breakpoint@^3.0.0-preview.20:
   version "3.0.0-preview.20"
   resolved "https://registry.yarnpkg.com/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.20.tgz#877e88a00c0cf66976f610a1d347839a1a0b6d70"
 
-styled-components@^5.1.1:
+styled-components@^5.2.1:
-  version "5.1.1"
+  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.1.1.tgz#96dfb02a8025794960863b9e8e365e3b6be5518d"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a"
-  integrity sha512-1ps8ZAYu2Husx+Vz8D+MvXwEwvMwFv+hqqUwhNlDN5ybg6A+3xyW1ECrAgywhvXapNfXiz79jJyU0x22z0FFTg==
+  integrity sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/traverse" "^7.4.5"