Introduce esbuild plugin based

Author: andreasknoepfle

CHANGELOG.md

@@ -1,6 +1,16 @@
 # Changelog
 
-## Unreleased
+## v1.1.0
+
+## Added 
+
+- Support for 3.1.0 of bitstyles
+
+## Changed
+
+- Switched to esbuild plugin sass setup
+
+## v1.0.0
 
 This version breaks with the existing API quite a lot 🔥, since we changed the library to take advantage of the recent develpments in Phoenix and LiveView.
 

README.md

@@ -18,7 +18,7 @@ The package can be installed by adding `bitstyles_phoenix` to your list of depen
 ```elixir
 def deps do
   [
-    {:bitstyles_phoenix, "~> 1.0.0"}
+    {:bitstyles_phoenix, "~> 1.1.0"}
   ]
 end
 ```

demo/assets/build.js

@@ -0,0 +1,57 @@
+const esbuild = require('esbuild')
+
+const { sassPlugin } = require("esbuild-sass-plugin");
+
+const args = process.argv.slice(2)
+const watch = args.includes('--watch')
+const deploy = args.includes('--deploy')
+
+const loader = {
+  '.woff': 'file',
+  '.woff2': 'file',
+  '.svg': 'file'
+}
+
+const plugins = [
+  sassPlugin({
+    includePaths: ["node_modules", "node_modules/bistyles_phoenix/scss"]
+  })
+]
+
+let opts = {
+  entryPoints: ['js/app.js', 'bitstyles/assets/images/icons.svg'],
+  bundle: true,
+  target: 'es2016',
+  outdir: '../priv/static/assets',
+  logLevel: 'info',
+  loader,
+  assetNames: "assets/[name]",
+  plugins
+}
+
+if (watch) {
+  opts = {
+    ...opts,
+    watch,
+    sourcemap: 'inline'
+  }
+}
+
+if (deploy) {
+  opts = {
+    ...opts,
+    minify: true
+  }
+}
+
+const promise = esbuild.build(opts)
+
+if (watch) {
+  promise.then(_result => {
+    process.stdin.on('close', () => {
+      process.exit(0)
+    })
+
+    process.stdin.resume()
+  })
+}

demo/assets/css/app.scss

@@ -1 +1,5 @@
-@import "../node_modules/bitstyles/scss/bitstyles.scss";
+@use "~bitstyles/scss/bitstyles/settings/_typography" with (
+  $webfont-base-url: '../node_modules/bitstyles/assets/fonts/'
+);
+
+@use "~bitstyles/scss/bitstyles";

demo/assets/js/app.js

@@ -3,6 +3,8 @@ import Alpine from 'alpinejs'
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 
+import "../css/app.scss"
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})