[dashboard] Optimize build

Author: aledbf

components/dashboard/.eslintrc.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+module.exports = {
+    root: true,
+    extends: ['react-app'],
+}

components/dashboard/BUILD.yaml

@@ -11,6 +11,9 @@ packages:
       - package.json
       - tailwind.config.js
       - tsconfig.*
+      - craco.config.js
+      - postcss.config.js
+      - .eslintrc.js
     deps:
       - components/gitpod-protocol:lib
     config:

components/dashboard/craco.config.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+module.exports = {
+    style: {
+        postcss: {
+            plugins: [
+                require('tailwindcss'),
+                require('autoprefixer'),
+            ],
+        }
+    }
+}

components/dashboard/package.json

@@ -14,39 +14,38 @@
     "xterm-addon-fit": "^0.5.0"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.2.1",
-    "@tailwindcss/postcss7-compat": "^2.0.2",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
+    "@craco/craco": "^6.1.1",
+    "@tailwindcss/forms": "^0.3.2",
+    "@tailwindcss/postcss7-compat": "^2.1.0",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.1.10",
     "@types/classnames": "^2.2.11",
-    "@types/jest": "^26.0.15",
+    "@types/jest": "^26.0.22",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/react-router": "^5.1.12",
+    "@types/react-dom": "^17.0.3",
+    "@types/react-router": "^5.1.13",
     "@types/react-router-dom": "^5.1.7",
-    "@typescript-eslint/eslint-plugin": "^4.15.2",
-    "@typescript-eslint/parser": "^4.15.2",
+    "@typescript-eslint/eslint-plugin": "^4.21.0",
+    "@typescript-eslint/parser": "^4.21.0",
     "autoprefixer": "^9.8.6",
-    "classnames": "^2.2.6",
-    "eslint": "^7.21.0",
+    "classnames": "^2.3.1",
+    "eslint": "^7.24.0",
+    "eslint-config-react-app": "^6.0.0",
     "postcss": "^7.0.35",
-    "react-scripts": "4.0.2",
+    "react-scripts": "^4.0.3",
     "tailwind-underline-utils": "^1.1.2",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0",
     "tailwindcss-filters": "^3.0.0",
     "typescript": "~4.1.2",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.1.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build --verbose",
+    "test": "craco test",
     "eject": "react-scripts eject",
-    "build:tailwind": "tailwindcss build src/index.css -o src/tailwind.output.css",
-    "prestart": "npm run build:tailwind",
-    "prebuild": "npm run build:tailwind",
     "telepresence": "TELEPRESENCE_USE_DEPLOYMENT=1 leeway run .:telepresence"
   },
   "files": [

components/dashboard/postcss.config.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {}
+    }
+}

components/dashboard/src/index.tsx

@@ -9,7 +9,7 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import { UserContextProvider } from './user-context';
 
-import "./tailwind.output.css"
+import "./index.css"
 
 ReactDOM.render(
     <React.StrictMode>