Attempt to simplify assets config by repalcing webpack with phx 1.6 esbuild

Author: grzuy

.github/workflows/elixir.yml

@@ -26,13 +26,13 @@ jobs:
       run: mix deps.unlock --check-unused
     - name: Check code format
       run: mix format --check-formatted
-    - name: Install yarn dependencies
-      run: yarn --cwd assets
-    - name: Compile assets
-      run: cd assets && ./node_modules/.bin/webpack --mode development
     - name: Compile elixir deps
       run: MIX_ENV=test mix deps.compile
     - name: Compile elixir project
       run: MIX_ENV=test mix compile --force --warnings-as-errors
+    - name: Install assets dependencies
+      run: mix assets.setup
+    - name: Compile assets
+      run: mix assets.build
     - name: Run tests
       run: mix test

assets/.babelrc

@@ -1,12 +1,3 @@
-// We 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.css"
-
-// 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"

assets/js/app.js

@@ -3,32 +3,13 @@
   "description": " ",
   "license": "MIT",
   "scripts": {
-    "deploy": "webpack --mode production",
-    "watch": "webpack --mode development --watch"
-  },
-  "dependencies": {
-    "phoenix": "file:../deps/phoenix",
-    "phoenix_html": "file:../deps/phoenix_html",
-    "phoenix_live_view": "file:../deps/phoenix_live_view"
+    "deploy": "NODE_ENV=production tailwindcss --postcss -i css/app.css -o ../priv/static/assets/app.css --minify",
+    "watch": "NODE_ENV=development tailwindcss --postcss -i css/app.css -o ../priv/static/assets/app.css --watch",
+    "build": "NODE_ENV=development tailwindcss --postcss -i css/app.css -o ../priv/static/assets/app.css"
   },
   "devDependencies": {
     "autoprefixer": "^10.3.6",
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "babel-loader": "^8.0.0",
-    "copy-webpack-plugin": "^4.5.0",
-    "css-loader": "^2.1.1",
-    "hard-source-webpack-plugin": "^0.13.1",
-    "mini-css-extract-plugin": "^0.4.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss": "^8.3.8",
-    "postcss-loader": "^4.0.0",
-    "tailwindcss": "^2.2.16",
-    "terser-webpack-plugin": "^1.1.0",
-    "webpack": "4.4.0",
-    "webpack-cli": "^3.3.2"
-  },
-  "resolutions": {
-    "serialize-javascript": "^2.1.1"
+    "tailwindcss": "^2.2.16"
   }
 }

assets/package.json

@@ -1,8 +1,11 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
-  purge: [],
-  darkMode: false, // or 'media' or 'class'
+  mode: 'jit',
+  purge: [
+    './js/**/*.js',
+    '../lib/*_web/**/*.*ex'
+  ],
   theme: {
     extend: {
       colors: {