From af86a0ac5ded9ef36989e357257a2961edfb0898 Mon Sep 17 00:00:00 2001
From: Nikita Karamov <me@kytta.dev>
Date: Mon, 5 Feb 2024 21:29:43 +0100
Subject: [PATCH] Add new build script

---
 package.json             |  4 ++--
 script/.build-common.mjs | 46 ++++++++++++++++++++++++++++++++++++++++
 script/build             | 46 ++++++++++++++++++++++++++++++++++++++++
 script/dev               | 14 ++++++------
 src/shareon.js           |  2 --
 5 files changed, 101 insertions(+), 11 deletions(-)
 create mode 100644 script/.build-common.mjs
 create mode 100755 script/build

diff --git a/package.json b/package.json
index 1b09f5e..99077e0 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "vite build",
+    "build": "node script/build",
     "dev": "node script/dev",
     "lint": "prettier --check . && eslint .",
     "size": "size-limit",
@@ -117,7 +117,7 @@
     },
     {
       "limit": "1 KiB",
-      "path": "./dist/shareon.es.js",
+      "path": "./dist/shareon.mjs",
       "brotli": true
     }
   ],
diff --git a/script/.build-common.mjs b/script/.build-common.mjs
new file mode 100644
index 0000000..6f98ca8
--- /dev/null
+++ b/script/.build-common.mjs
@@ -0,0 +1,46 @@
+import { readFile } from "node:fs/promises";
+
+import postcss from "postcss";
+import cssVariables from "postcss-css-variables";
+import calc from "postcss-calc";
+
+/** @type {Map<string, string>} */
+export const formatToJsExtension = new Map([
+  ["esm", ".mjs"],
+  ["cjs", ".cjs"],
+  ["iife", ".iife.js"],
+]);
+
+/** @type {import("esbuild").Plugin} */
+const postcssPlugin = {
+  name: "postcss",
+  async setup(build) {
+    const postcssInstance = postcss([cssVariables(), calc()]);
+
+    build.onLoad({ filter: /\.css$/ }, async (args) => {
+      const css = await readFile(args.path);
+
+      const result = await postcssInstance.process(css, {
+        from: args.path,
+      });
+
+      return {
+        contents: result.css,
+        loader: "css",
+      };
+    });
+  },
+};
+
+/** @type {import("esbuild").BuildOptions} */
+export const commonOptions = {
+  sourcemap: true,
+  bundle: true,
+  loader: {
+    ".svg": "dataurl",
+  },
+  plugins: [postcssPlugin],
+  entryNames: "[dir]/shareon",
+  globalName: "Shareon",
+  target: ["es2019"],
+};
diff --git a/script/build b/script/build
new file mode 100755
index 0000000..695f66e
--- /dev/null
+++ b/script/build
@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+
+import * as path from "node:path";
+import * as esbuild from "esbuild";
+
+import { commonOptions, formatToJsExtension } from "./.build-common.mjs";
+
+/** @type {import('esbuild').BuildOptions} */
+const commonBuildOptions = {
+  ...commonOptions,
+  metafile: true,
+  outdir: path.join(".", "dist"),
+};
+
+const buildJs = async (format, entry = "shareon.js", minify = true) =>
+  esbuild.build({
+    ...commonBuildOptions,
+    entryPoints: [path.join(".", "src", entry)],
+    format,
+    minify,
+    outExtension: { ".js": formatToJsExtension.get(format) },
+  });
+
+const buildCss = async () =>
+  esbuild.build({
+    ...commonBuildOptions,
+    entryPoints: [path.join(".", "src", "shareon.css")],
+    minify: true,
+    outExtension: { ".css": ".min.css" },
+  });
+
+const results = await Promise.all([
+  buildJs("esm", "shareon.js", false),
+  buildJs("cjs"),
+  buildJs("iife", "index.js"),
+  buildCss(),
+]);
+
+console.table(
+  Object.fromEntries(
+    results
+      .flatMap((result) => Object.entries(result.metafile.outputs))
+      .filter(([fileName, _]) => !fileName.endsWith(".map"))
+      .map(([filename, { bytes }]) => [filename, { bytes }]),
+  ),
+);
diff --git a/script/dev b/script/dev
index 68c120b..8c4684e 100755
--- a/script/dev
+++ b/script/dev
@@ -3,18 +3,18 @@
 import * as path from "node:path";
 import * as esbuild from "esbuild";
 
+import { commonOptions } from "./.build-common.mjs";
+
 const dir = path.join(".", "dev");
 
 const ctx = await esbuild.context({
-  entryPoints: [path.join(".", "src", "index.js")],
-  entryNames: "[dir]/shareon",
-  bundle: true,
-  sourcemap: true,
+  ...commonOptions,
+  entryPoints: [
+    path.join(".", "src", "index.js"),
+    path.join(".", "src", "shareon.css"),
+  ],
   outdir: dir,
   format: "esm",
-  loader: {
-    ".svg": "dataurl",
-  },
 });
 
 await ctx.watch();
diff --git a/src/shareon.js b/src/shareon.js
index b5358cc..2ee26fd 100644
--- a/src/shareon.js
+++ b/src/shareon.js
@@ -1,5 +1,3 @@
-import "./shareon.css";
-
 // prettier-ignore
 /**
  * Map of social networks to their respective URL builders.