mix format

assets/js/app.js

@@ -1,6 +1,6 @@
 // We import the CSS which is extracted to its own file by esbuild.
 // Remove this line if you add a your own CSS build pipeline (e.g postcss).
-import "../css/app.scss"
+import '../css/app.scss'
 
 // If you want to use Phoenix channels, run `mix help phx.gen.channel`
 // to get started and then uncomment the line below.
@@ -20,23 +20,23 @@ import "../css/app.scss"
 //
 
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
-import "phoenix_html"
+import 'phoenix_html'
 // Establish Phoenix Socket and LiveView configuration.
-import {Socket} from "phoenix"
+import { Socket } from 'phoenix'
-import {LiveSocket} from "phoenix_live_view"
+import { LiveSocket } from 'phoenix_live_view'
-import topbar from "../vendor/topbar"
+import topbar from '../vendor/topbar'
 import MaintainAttrs from './maintain_attrs'
 
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
-let liveSocket = new LiveSocket("/live", Socket, {
+const liveSocket = new LiveSocket('/live', Socket, {
   params: { _csrf_token: csrfToken },
   hooks: { MaintainAttrs }
 })
 
 // Show progress bar on live navigation and form submits
-topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
+topbar.config({ barColors: { 0: '#29d' }, shadowColor: 'rgba(0, 0, 0, .3)' })
-window.addEventListener("phx:page-loading-start", info => topbar.show())
+window.addEventListener('phx:page-loading-start', info => topbar.show())
-window.addEventListener("phx:page-loading-stop", info => topbar.hide())
+window.addEventListener('phx:page-loading-stop', info => topbar.hide())
 
 // connect if there are any LiveViews on the page
 liveSocket.connect()

assets/js/maintain_attrs.js

@@ -2,7 +2,7 @@
 // update. https://github.com/phoenixframework/phoenix_live_view/issues/1011
 
 export default {
-  attrs(){ return this.el.getAttribute("data-attrs").split(", ") },
+  attrs () { return this.el.getAttribute('data-attrs').split(', ') },
-  beforeUpdate(){ this.prevAttrs = this.attrs().map(name => [name, this.el.getAttribute(name)]) },
+  beforeUpdate () { this.prevAttrs = this.attrs().map(name => [name, this.el.getAttribute(name)]) },
-  updated(){ this.prevAttrs.forEach(([name, val]) => this.el.setAttribute(name, val)) }
+  updated () { this.prevAttrs.forEach(([name, val]) => this.el.setAttribute(name, val)) }
 }

assets/postcss.config.js

@@ -1,7 +1,7 @@
 module.exports = {
-	plugins: {
+  plugins: {
-		"postcss-import": {},
+    'postcss-import': {},
-		tailwindcss: {},
+    tailwindcss: {},
-		autoprefixer: {},
+    autoprefixer: {}
-	}
+  }
 }

assets/tailwind.config.js

@@ -7,7 +7,7 @@ module.exports = {
     '../lib/**/*.eex',
     './js/**/*.js'
   ],
-  darkMode: "media",
+  darkMode: 'media',
   theme: {
     colors: {
       transparent: 'transparent',
@@ -20,15 +20,15 @@ module.exports = {
       gray: colors.trueGray,
       indigo: colors.indigo,
       red: colors.rose,
-      yellow: colors.amber,
+      yellow: colors.amber
     },
-    extend: {},
+    extend: {}
   },
   variants: {
     extend: {
       backgroundColor: ['active'],
-      borderColor: ['active'],
+      borderColor: ['active']
-    },
+    }
   },
-  plugins: [],
+  plugins: []
 }

assets/webpack.config.js

@@ -1,12 +1,12 @@
-const path = require("path");
+const path = require('path')
-const glob = require("glob");
+const glob = require('glob')
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const TerserPlugin = require("terser-webpack-plugin");
+const TerserPlugin = require('terser-webpack-plugin')
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
-const CopyWebpackPlugin = require("copy-webpack-plugin");
+const CopyWebpackPlugin = require('copy-webpack-plugin')
 
 module.exports = (env, options) => {
-  const devMode = options.mode !== "production";
+  const devMode = options.mode !== 'production'
 
   return {
     optimization: {
@@ -16,30 +16,30 @@ module.exports = (env, options) => {
       ]
     },
     entry: {
-      app: glob.sync("./vendor/**/*.js").concat(["./js/app.js"])
+      app: glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
     },
     output: {
-      filename: "[name].js",
+      filename: '[name].js',
-      path: path.resolve(__dirname, "../priv/static/js"),
+      path: path.resolve(__dirname, '../priv/static/js'),
-      publicPath: "/js/"
+      publicPath: '/js/'
     },
-    devtool: devMode ? "eval-cheap-module-source-map" : undefined,
+    devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
-            loader: "babel-loader"
+            loader: 'babel-loader'
           }
         },
         {
           test: /\.s?css$/,
           use: [
             MiniCssExtractPlugin.loader,
-            "css-loader",
+            'css-loader',
-            "postcss-loader",
+            'postcss-loader',
-            "sass-loader",
+            'sass-loader'
           ]
         },
         {
@@ -53,10 +53,10 @@ module.exports = (env, options) => {
       ]
     },
     plugins: [
-      new MiniCssExtractPlugin({ filename: "../css/app.css" }),
+      new MiniCssExtractPlugin({ filename: '../css/app.css' }),
       new CopyWebpackPlugin({
-        patterns: [{ from: "static/", to: "../" }]
+        patterns: [{ from: 'static/', to: '../' }]
       })
     ]
   }
-};
+}