Fix #5975 (#5976)

Fixes issue with blank screen caused by missing `tailwind.css`.

Author: somebody1234

app/ide-desktop/eslint.config.js

@@ -24,7 +24,7 @@ const NAME = 'enso'
  * `yargs` and `react-hot-toast` are modules we explicitly want the default imports of.
  * `node:process` is here because `process.on` does not exist on the namespace import. */
 const DEFAULT_IMPORT_ONLY_MODULES =
-    'node:process|chalk|string-length|yargs|yargs\\u002Fyargs|sharp|to-ico|connect|morgan|serve-static|create-servers|electron-is-dev|fast-glob|esbuild-plugin-alias|esbuild-plugin-time|esbuild-plugin-yaml|opener'
+    'node:process|chalk|string-length|yargs|yargs\\u002Fyargs|sharp|to-ico|connect|morgan|serve-static|create-servers|electron-is-dev|fast-glob|esbuild-plugin-.+|opener'
 const ALLOWED_DEFAULT_IMPORT_MODULES = `${DEFAULT_IMPORT_ONLY_MODULES}|react-hot-toast`
 const OUR_MODULES = 'enso-content-config|enso-common'
 const RELATIVE_MODULES =

app/ide-desktop/lib/content/esbuild-config.ts

@@ -10,7 +10,7 @@
  */
 
 import * as childProcess from 'node:child_process'
-import * as fs from 'node:fs'
+import * as fs from 'node:fs/promises'
 import * as path from 'node:path'
 import * as url from 'node:url'
 
@@ -28,6 +28,13 @@ import BUILD_INFO from '../../build.json' assert { type: 'json' }
 
 export const THIS_PATH = path.resolve(path.dirname(url.fileURLToPath(import.meta.url)))
 
+// =================
+// === Constants ===
+// =================
+
+const TAILWIND_BINARY_PATH = '../../node_modules/.bin/tailwindcss'
+const TAILWIND_CSS_PATH = path.resolve(THIS_PATH, 'src', 'tailwind.css')
+
 // =============================
 // === Environment variables ===
 // =============================
@@ -93,12 +100,51 @@ export function alwaysCopiedFiles(wasmArtifacts: string) {
 export async function* filesToCopyProvider(wasmArtifacts: string, assetsPath: string) {
     console.log('Preparing a new generator for files to copy.')
     yield* alwaysCopiedFiles(wasmArtifacts)
-    for (const file of await fs.promises.readdir(assetsPath)) {
+    for (const file of await fs.readdir(assetsPath)) {
         yield path.resolve(assetsPath, file)
     }
     console.log('Generator for files to copy finished.')
 }
 
+// ======================
+// === Inline plugins ===
+// ======================
+
+function esbuildPluginGenerateTailwind(args: Pick<Arguments, 'assetsPath'>): esbuild.Plugin {
+    return {
+        name: 'enso-generate-tailwind',
+        setup: build => {
+            // Required since `onStart` is called on every rebuild.
+            let firstRun = true
+            build.onStart(() => {
+                if (firstRun) {
+                    const dest = path.join(args.assetsPath, 'tailwind.css')
+                    const config = path.resolve(THIS_PATH, 'tailwind.config.ts')
+                    console.log(`Generating tailwind css from '${TAILWIND_CSS_PATH}' to '${dest}'.`)
+                    const child = childProcess.spawn(`node`, [
+                        TAILWIND_BINARY_PATH,
+                        '-i',
+                        TAILWIND_CSS_PATH,
+                        'o',
+                        dest,
+                        '-c',
+                        config,
+                        '--minify',
+                    ])
+                    firstRun = false
+                    return new Promise(resolve =>
+                        child.on('close', () => {
+                            resolve({})
+                        })
+                    )
+                } else {
+                    return {}
+                }
+            })
+        },
+    }
+}
+
 // ================
 // === Bundling ===
 // ================
@@ -125,6 +171,8 @@ export function bundlerOptions(args: Arguments) {
             esbuildPluginNodeGlobals.NodeGlobalsPolyfillPlugin({ buffer: true, process: true }),
             esbuildPluginAlias({ ensogl_app: ensoglAppPath }),
             esbuildPluginTime(),
+            // This must run before the copy plugin so that the generated `tailwind.css` is used.
+            esbuildPluginGenerateTailwind({ assetsPath }),
             esbuildPluginCopy.create(() => filesToCopyProvider(wasmArtifacts, assetsPath)),
         ],
         define: {

app/ide-desktop/lib/content/package.json

@@ -17,8 +17,8 @@
   "scripts": {
     "typecheck": "npx tsc --noEmit",
     "lint": "npx --yes eslint src",
-    "build": "cd ../dashboard/src/authentication && npx tailwindcss -i src/styles/index.css -o ../../../../../../dist/gui/assets/tailwind.css -c tailwind.config.ts --minify && cd ../../../content && ts-node bundle.ts",
-    "watch": "cd ../dashboard/src/authentication && npx tailwindcss -i src/styles/index.css -o ../../../../../../dist/gui/assets/tailwind.css -c tailwind.config.ts --minify && cd ../../../content && ts-node watch.ts",
+    "build": "ts-node bundle.ts",
+    "watch": "ts-node watch.ts",
     "start": "ts-node start.ts"
   },
   "dependencies": {
@@ -41,9 +41,9 @@
     "@types/ws": "^8.5.4",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
+    "enso-authentication": "^1.0.0",
     "enso-copy-plugin": "^1.0.0",
     "enso-gui-server": "^1.0.0",
-    "enso-authentication": "^1.0.0",
     "esbuild": "^0.15.14",
     "esbuild-copy-static-files": "^0.1.0",
     "esbuild-dev-server": "^0.3.0",
@@ -55,14 +55,15 @@
     "glob": "^8.0.3",
     "globals": "^13.20.0",
     "source-map-loader": "^4.0.1",
+    "tailwindcss": "^3.2.7",
     "ts-loader": "^9.3.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.3",
     "yaml-loader": "^0.8.0"
   },
   "optionalDependencies": {
+    "esbuild-darwin-64": "^0.15.18",
     "esbuild-linux-64": "^0.15.18",
-    "esbuild-windows-64": "^0.15.18",
-    "esbuild-darwin-64": "^0.15.18"
+    "esbuild-windows-64": "^0.15.18"
   }
 }

app/ide-desktop/lib/content/src/index.html

@@ -35,6 +35,7 @@
     <title>Enso</title>
     <link rel="stylesheet" href="/style.css" />
     <link rel="stylesheet" href="/docsStyle.css" />
+    <link rel="stylesheet" href="/tailwind.css" />
     <script type="module" src="/index.js" defer></script>
     <script type="module" src="/run.js" defer></script>
   </head>

app/ide-desktop/lib/dashboard/src/authentication/src/styles/index.css renamed to app/ide-desktop/lib/content/src/tailwind.css

@@ -1,7 +1,8 @@
 /** @file Configuration for Tailwind. */
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ['./src/**/*.tsx'],
+    // FIXME[sb]: Tailwind building should be in `dashboard/`.
+    content: ['../dashboard/src/authentication/src/**/*.tsx'],
     theme: {
         extend: {},
     },

app/ide-desktop/lib/dashboard/src/authentication/tailwind.config.ts renamed to app/ide-desktop/lib/content/tailwind.config.ts

@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["../types", "."]
+  "include": ["../types", ".", "tailwind.config.ts"]
 }

app/ide-desktop/lib/content/tsconfig.json

@@ -5,7 +5,6 @@
   "main": "./src/index.tsx",
   "exports": "./src/index.tsx",
   "devDependencies": {
-    "tailwindcss": "^3.2.6",
     "typescript": "^4.9.3"
   },
   "dependencies": {

app/ide-desktop/lib/dashboard/src/authentication/package.json

@@ -13,7 +13,6 @@
 import * as React from "react";
 import * as reactDOM from "react-dom/client";
 
-import "./styles/index.css";
 import * as loggerProvider from "./providers/logger";
 import * as platformModule from "./platform";
 import App, * as app from "./components/app";