Add new build script

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
     }
   ],

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"],
+};

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 }]),
+  ),
+);

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();

src/shareon.js

@@ -1,5 +1,3 @@
-import "./shareon.css";
-
 // prettier-ignore
 /**
  * Map of social networks to their respective URL builders.