Stop caching stupid things and causing builds to die

DaneEveritt · DaneEveritt · commit 22687bd0780c · 2020-12-26T10:41:25.000-08:00
diff --git a/.babel-plugin-macrosrc.js b/.babel-plugin-macrosrc.js
@@ -2,7 +2,6 @@ module.exports = {
     twin: {
         preset: 'styled-components',
         autoCssProp: true,
-        config: './tailwind.config.js',
     },
     styledComponents: {
         pure: true,
diff --git a/package.json b/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%",
diff --git a/resources/scripts/components/NavigationBar.tsx b/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()};
         }
     }
 `;
diff --git a/resources/scripts/components/elements/DropdownMenu.tsx b/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>
diff --git a/resources/scripts/components/elements/SubNavigation.tsx b/resources/scripts/components/elements/SubNavigation.tsx
@@ -1,7 +1,5 @@
 import styled from 'styled-components/macro';
-import tw from 'twin.macro';
-// @ts-ignore
-import config from '../../../../tailwind.config';
+import tw, { theme } from 'twin.macro';
 
 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()};
             }
         }
     }
diff --git a/tailwind.config.js b/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',
-            primary: {
-                50: 'hsl(202, 100%, 95%)', // lightest
-                100: 'hsl(204, 100%, 86%)', // lighter
-                200: 'hsl(206, 93%, 73%)',
-                300: 'hsl(208, 88%, 62%)',
-                400: 'hsl(210, 83%, 53%)', // light
-                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%)',
-            },
+            white: '#fff',
+            primary: colors.blue,
+            neutral: colors.coolGray,
+            cyan: colors.cyan,
+            green: colors.green,
+            yellow: colors.amber,
+            red: colors.red,
         },
         extend: {
             fontSize: {
@@ -94,4 +30,7 @@ module.exports = {
             }),
         },
     },
+    plugins: [
+        require('@tailwindcss/forms'),
+    ]
 };
diff --git a/webpack.config.js b/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: {
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -5,10 +5,8 @@ import { faCogs, faLayerGroup, faSignOutAlt, faUserCircle } from '@fortawesome/f`
`5`	`5`	`import { useStoreState } from 'easy-peasy';`
`6`	`6`	`import { ApplicationStore } from '@/state';`
`7`	`7`	`import SearchContainer from '@/components/dashboard/search/SearchContainer';`
`8`		`-import tw from 'twin.macro';`
	`8`	`+import tw, { theme } from 'twin.macro';`
`9`	`9`	`import styled from 'styled-components/macro';`
`10`		`-// @ts-ignore`
`11`		`-import * as config from '@/../../tailwind.config.js';`
`12`	`10`
`13`	`11`	const Navigation = styled.div`
`14`	`12`	${tw`w-full bg-neutral-900 shadow-md overflow-x-auto`};
@@ -37,7 +35,7 @@ const RightNavigation = styled.div`
`37`	`35`	`}`
`38`	`36`
`39`	`37`	`&:active, &:hover, &.active {`
`40`		`- box-shadow: inset 0 -2px ${config.theme.colors.cyan['700']};`
	`38`	+ box-shadow: inset 0 -2px ${theme`colors.cyan.700`.toString()};
`41`	`39`	`}`
`42`	`40`	`}`
`43`	`41`	`;
Original file line number	Diff line number	Diff line change
`@@ -94,7 +94,7 @@ class DropdownMenu extends React.PureComponent<Props, State> {`
`94`	`94`	`e.stopPropagation();`
`95`	`95`	`this.setState({ visible: false });`
`96`	`96`	`}}`
`97`		- css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48 z-50`}
	`97`	+ css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 z-50`}
`98`	`98`	`>`
`99`	`99`	`{this.props.children}`
`100`	`100`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,5 @@`
`1`	`1`	`import styled from 'styled-components/macro';`
`2`		`-import tw from 'twin.macro';`
`3`		`-// @ts-ignore`
`4`		`-import config from '../../../../tailwind.config';`
	`2`	`+import tw, { theme } from 'twin.macro';`
`5`	`3`
`6`	`4`	const SubNavigation = styled.div`
`7`	`5`	${tw`w-full bg-neutral-700 shadow overflow-x-auto`};
@@ -23,7 +21,7 @@ const SubNavigation = styled.div`
`23`	`21`
`24`	`22`	`&:active, &.active {`
`25`	`23`	${tw`text-neutral-100`};
`26`		`- box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']};`
	`24`	+ box-shadow: inset 0 -2px ${theme`colors.cyan.700`.toString()};
`27`	`25`	`}`
`28`	`26`	`}`
`29`	`27`	`}`