switch from webpack to esbuild + postcss

.gitignore

@@ -66,3 +66,7 @@ deps.path*
 schema.graphql
 deploy
 .pnpm-debug.log
+
+# we use pnpm, so ignore others
+assets/package-lock.json
+assets/yarn.lock

assets/.babelrc

@@ -1,5 +0,0 @@
-{
-    "presets": [
-        "@babel/preset-env"
-    ]
-}

assets/js/both.js

@@ -1,17 +0,0 @@
-// We may need to import the CSS so that webpack will load it.
-// The MiniCssExtractPlugin is used to separate it out into its own CSS file.
-import "../css/app.scss" // no longer used in favour of Tailwind
-
-// webpack automatically bundles all modules in your
-// entry points. Those entry points can be configured
-// in "webpack.config.js".
-//
-// Import deps with the dep name or local files with a relative path, for example:
-//
-//     import {Socket} from "phoenix"
-//     import socket from "./socket"
-
-import "phoenix_html"
-
-// lightweight JS toolkit
-import 'alpinejs'

assets/js/common.js

@@ -0,0 +1,6 @@
+// import "../css/app.scss" // no longer used in favour of Tailwind
+
+import "phoenix_html"
+
+// lightweight JS toolkit
+import 'alpinejs'

assets/js/live.js

@@ -1,5 +1,5 @@
 // JS shared with non_live pages
-import "./both"
+import "./common"
 
 // for JS features & extensions to hook into LiveView
 let Hooks = {}; 

assets/js/non_live.js

@@ -1 +1 @@
-import "./both"
+import "./common"

assets/package.json

@@ -1,42 +1,38 @@
 {
-  "repository": {},
-  "description": " ",
-  "license": "MIT",
+  "version": "0.0.0",
   "scripts": {
-    "deploy": "webpack --mode production",
-    "watch": "webpack --mode development --watch"
+    "preinstall": "npx -y only-allow pnpm",
+    "watch.js": "esbuild ./js/live.js ./js/non_live.js --target=es2015 --bundle --sourcemap --outdir=../priv/static/js --watch",
+    "build.js": "esbuild ./js/live.js ./js/non_live.js --target=es2015 --bundle --sourcemap --outdir=../priv/static/js",
+    "watch.postcss": "TAILWIND_MODE=watch NODE_ENV=development postcss ./css/app.scss -o ../priv/static/css/app.css -w",
+    "build.postcss": "TAILWIND_MODE=build NODE_ENV=production postcss ./css/app.scss -o ../priv/static/css/app.css",
+    "watch.tw": "TAILWIND_MODE=build NODE_ENV=production npx tailwindcss@canary -i ./css/app.scss -o ../priv/static/css/app.css --files ../{lib,forks,deps}/**/*{.leex,.sface} --jit -w",
+    "build.tw": "TAILWIND_MODE=build NODE_ENV=production npx tailwindcss@canary -i ./css/app.scss -o ../priv/static/css/app.css --files ../{lib,forks,deps}/**/*{.leex,.sface} --jit",
+    "watch.assets": "cpx 'static/**/*' ../priv/static --watch",
+    "build": "pnpm build.postcss && pnpm build.js"
   },
   "dependencies": {
     "@github/details-dialog-element": "^3.1.2",
     "@github/details-menu-element": "^1.0.9",
-    "@tailwindcss/forms": "^0.1.4",
+    "@tailwindcss/forms": "^0.3.2",
+    "@tailwindcss/jit": "^0.1.18",
     "@tailwindcss/line-clamp": "^0.2.0",
     "@tailwindcss/typography": "^0.4.0",
     "alpinejs": "^2.8.1",
-    "leaflet": "^1.7.1",
+    "cpx": "^1.5.0",
     "nprogress": "^0.2.0",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
-    "tailwindcss": "^2.1"
+    "tailwindcss": "2"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "autoprefixer": "^10.1.0",
-    "babel-loader": "^8.2.2",
-    "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.4.2",
-    "file-loader": "^6.2.0",
-    "hard-source-webpack-plugin": "^0.13.1",
-    "mini-css-extract-plugin": "^0.9.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "postcss": "^8.2.1",
+    "autoprefixer": "^10.2.6",
+    "esbuild": "^0.12.7",
+    "only-allow": "^1.0.0",
+    "pnpm": "^6.7.1",
+    "postcss": "^8.3.0",
     "postcss-cli": "^8.3.1",
-    "postcss-loader": "^4.1.0",
-    "tailwindcss-debug-screens": "^2.0.0",
-    "terser-webpack-plugin": "^2.3.2",
-    "webpack": "4.41.5",
-    "webpack-cli": "^3.3.2"
+    "tailwindcss-debug-screens": "^2.0.0"
   }
-}
+}

assets/postcss.config.js

@@ -1,8 +1,6 @@
 module.exports = {
-  plugins: [
-    // ...
-    require('tailwindcss'),
-    require('autoprefixer'),
-    // ...
-  ]
-}
+  plugins: {
+    '@tailwindcss/jit': {},
+    autoprefixer: {},
+  },
+};

assets/tailwind.config.js

@@ -9,20 +9,7 @@ module.exports = {
   purge: {
     enabled: true,
     content: [
-      '../forks/**/lib/**/*.leex',
-      '../forks/**/lib/**/**/*.leex',
-      '../forks/**/lib/**/**/**/*.leex',
-      '../deps/bonfire_**/lib/**/*.leex',
-      '../deps/bonfire_**/lib/**/**/*.leex',
-      '../deps/bonfire_**/lib/**/**/**/*.leex',
-      '../lib/web/**/*.leex',
-      '../forks/**/lib/**/*.sface',
-      '../forks/**/lib/**/**/*.sface',
-      '../forks/**/lib/**/**/**/*.sface',
-      '../deps/bonfire_**/lib/**/*.sface',
-      '../deps/bonfire_**/lib/**/**/*.sface',
-      '../deps/bonfire_**/lib/**/**/**/*.sface',
-      '../lib/web/**/*.sface',
+      '../{lib,forks,deps}/**/*{.leex,.sface,_live.ex}'
     ]
   },
   darkMode: 'class',

flavours/classic/config/dev.exs

@@ -26,11 +26,19 @@ config :bonfire, Bonfire.Web.Endpoint,
   check_origin: false,
   code_reloader: true,
   watchers: [
-    node: [
-      "node_modules/webpack/bin/webpack.js",
-      "--mode",
-      "development",
-      "--watch-stdin",
+    # node: [
+    #   "node_modules/webpack/bin/webpack.js",
+    #   "--mode",
+    #   "development",
+    #   "--watch-stdin",
+    #   cd: Path.expand("assets", File.cwd!())
+    # ]
+    pnpm: [
+      "watch.js",
+      cd: Path.expand("assets", File.cwd!())
+    ],
+    pnpm: [
+      "watch.postcss",
       cd: Path.expand("assets", File.cwd!())
     ]
   ],