Add tailwind and postcss configs

Fix an issue with Spotify redirect URL in release

Author: shellbear

assets/css/app.scss

@@ -1,9 +1,7 @@
 /* Tailwind.css imports */
-@import "~tailwindcss";
-@import "~tailwindcss/base";
-@import "~tailwindcss/components";
-@import "~tailwindcss/utilities";
-@import "~@tailwindcss/typography/dist/typography.css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 /* This file is for your main application css. */
 @import "./yail.scss";

assets/package-lock.json

@@ -7,25 +7,29 @@
     "watch": "webpack --mode development --watch"
   },
   "dependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/core": "^7.14.3",
+    "@babel/preset-env": "^7.14.2",
+    "@tailwindcss/forms": "^0.3.2",
     "@tailwindcss/typography": "^0.4.0",
-    "babel-loader": "^8.0.0",
-    "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.4.2",
+    "autoprefixer": "^10.2.5",
+    "babel-loader": "^8.2.2",
+    "copy-webpack-plugin": "^9.0.0",
+    "css-loader": "^5.2.5",
     "hard-source-webpack-plugin": "^0.13.1",
-    "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "^4.13.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "mini-css-extract-plugin": "^1.6.0",
+    "optimize-css-assets-webpack-plugin": "^6.0.0",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
-    "sass-loader": "^8.0.2",
+    "postcss": "^8.3.0",
+    "postcss-loader": "^5.3.0",
+    "sass": "^1.34.0",
+    "sass-loader": "^11.1.1",
     "tailwindcss": "^2.1.2",
-    "terser-webpack-plugin": "^2.3.2",
-    "topbar": "^0.1.4",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.2"
+    "terser-webpack-plugin": "^5.1.2",
+    "topbar": "^1.0.1",
+    "webpack": "^5.37.1",
+    "webpack-cli": "^4.7.0"
   },
   "devDependencies": {}
 }

assets/package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+  }
+}

assets/postcss.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  mode: "jit",
+  purge: [
+    "../lib/**/*.ex",
+    "../lib/**/*.leex",
+    "../lib/**/*.eex",
+    "./js/**/*.js",
+  ],
+  darkMode: false,
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [
+    require("@tailwindcss/forms"),
+    require('@tailwindcss/typography'),
+  ],
+}

assets/tailwind.config.js

@@ -1,21 +1,13 @@
 const path = require('path');
 const glob = require('glob');
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const TerserPlugin = require("terser-webpack-plugin");
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = (env, options) => {
   const devMode = options.mode !== 'production';
 
   return {
-    optimization: {
-      minimizer: [
-        new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
-        new OptimizeCSSAssetsPlugin({})
-      ]
-    },
     entry: {
       'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
     },
@@ -39,15 +31,27 @@ module.exports = (env, options) => {
           use: [
             MiniCssExtractPlugin.loader,
             'css-loader',
+            'postcss-loader',
             'sass-loader',
           ],
         }
       ]
     },
+    optimization: {
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            sourceMap: devMode,
+            compress: true,
+          }
+        })
+      ],
+    },
     plugins: [
       new MiniCssExtractPlugin({ filename: '../css/app.css' }),
-      new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
+      new CopyWebpackPlugin({
+        patterns: [{from: 'static/', to: '../' }],
+      }),
     ]
-    .concat(devMode ? [new HardSourceWebpackPlugin()] : [])
   }
 };