Add script to generate bundle sizes (#474)

Add script to generate bundle sizes

build/bundle-sizes.js

@@ -0,0 +1,92 @@
+import path from 'node:path';
+import postcss from 'postcss';
+import fs from 'node:fs/promises';
+import pkg from '../postcss.config.cjs';
+import { createRequire } from 'node:module';
+import { sync as brotli } from 'brotli-size';
+import { gzipSizeSync as gzip } from 'gzip-size';
+
+// Comes in handy later when we run postcss
+const { plugins } = pkg;
+
+// @ts-ignore
+const require = createRequire(import.meta.url);
+const { scripts } = require('../package.json');
+/** 
+ * We build up an object with script:command pairs from package.json
+ *
+ * @type {Object.<string, string>}
+ */
+const filtered = Object.keys(scripts)
+ .filter((key) => key.startsWith('lib:'))
+ .reduce((obj, key) => {
+ obj[key] = scripts[key];
+ return obj;
+ }, {});
+
+/**
+ * The regex captures a filepath and filename group from an npm command.
+ * 
+ * Captures for the command `postcss src/extra/normalize.light.css -o normalize.light.min.css` yields
+ * { 
+ * groups: {
+ * filepath: 'src/extra/normalize.light.css',
+ * filename: 'normalize.light.min.css' 
+ * }
+ * } 
+ */
+const regex = /postcss\s(?<filepath>\S+)\s\-[o]\s(?<filename>.*\.css)(?:.*$)/;
+
+/**
+ * @typedef {Object} Size
+ * @propety {number} raw - Unminified size in bytes
+ * @property {string} size - Unminified size in KiB
+ * @property {string} minified - Minified size in KiB
+ * @property {string} brotli - Brotli compressed minified size in KiB
+ * @property {string} gzip - Gzip compressed minified size in KiB
+ */
+ /** @type {Object.<string, Size>} sizes */
+let sizes = {}
+
+for (const [_, script] of Object.entries(filtered)) {
+ const found = script.match(regex);
+
+ if (!found) continue;
+
+ /**
+ * @typedef {object} CaptureGroup
+ * @property {string} filepath
+ * @property {string} filename
+ */
+ /** @type {CaptureGroup} */
+ const { filepath, filename } = found.groups;
+
+ /**
+ * @type {import('postcss').ProcessOptions}
+ */
+ const options = { from: path.resolve(`../${filepath}`), to: undefined };
+ const css = await fs.readFile(path.resolve(`../${filepath}`), 'utf-8');
+ /**
+ * Run the css through PostCSS (just like Open-Props).
+ * plugins.slice(0, -1) remove `cssnano` plugin so we can get the size of the unminified code
+ */
+ const code = await postcss(plugins.slice(0, -1)).process(css, options);
+ /**
+ * This time we want to get the minified size.
+ */
+ const minified = await postcss(plugins).process(css, options);
+
+ /**
+ * Build the sizes object.
+ * Strip `.min` from the filename
+ */
+ sizes[filename.replace('.min', '')] = {
+ raw: code.css.length, // in bytes
+ size: (code.css.length / 1024).toFixed(2), // in KiB
+ minified: (minified.css.length / 1024).toFixed(2), // KiB
+ brotli: (brotli(minified.css) / 1024).toFixed(2), // in KiB
+ gzip: (gzip(minified.css) / 1024).toFixed(2), // in KiB
+ }
+}
+
+await fs.writeFile('bundle-sizes.json', JSON.stringify(sizes, null, 2), { encoding: 'utf8' });

package.json

@@ -186,6 +186,7 @@
  "build": "concurrently npm:gen:op npm:gen:shadowdom && npm run gen:types",
  "test": "ava test/basic.test.cjs",
  "bundle": "concurrently npm:lib:* -m 25 && concurrently npm:shadow:* -m 25",
+ "bundle:sizes": "cd build && node bundle-sizes.js",
  "gen:op": "cd build && node props.js \"\" true",
  "gen:nowhere": "cd build && node props \"\" false",
  "gen:shadowdom": "cd build && node props \"\" false \":host\" \"shadow\"",
@@ -313,9 +314,11 @@
  },
  "devDependencies": {
  "ava": "^3.15.0",
+ "brotli-size": "^4.0.0",
  "colorjs.io": "^0.4.1-patch.1",
  "concurrently": "^7.2.2",
  "cssnano": "^5.1.10",
+ "gzip-size": "^7.0.0",
  "json": "^11.0.0",
  "open-color": "^1.9.1",
  "postcss": "^8.3.9",