run minifiers on ecmarkup outputs and assets

package.json

@@ -50,6 +50,7 @@
 	"license": "MIT",
 	"dependencies": {
 		"chalk": "^4.1.2",
+		"clean-css": "^5.3.3",
 		"command-line-args": "^5.2.0",
 		"command-line-usage": "^6.1.1",
 		"dedent-js": "^1.0.1",
@@ -59,16 +60,21 @@
 		"grammarkdown": "^3.3.2",
 		"highlight.js": "11.0.1",
 		"html-escape": "^1.0.2",
+		"html-minifier-terser": "^7.2.0",
 		"js-yaml": "^3.13.1",
 		"jsdom": "^25.0.1",
 		"nwsapi": "2.2.0",
 		"parse5": "^6.0.1",
 		"prex": "^0.4.7",
-		"promise-debounce": "^1.0.1"
+		"promise-debounce": "^1.0.1",
+		"svgo": "^4.0.1",
+		"terser": "^5.46.1"
 	},
 	"devDependencies": {
+		"@types/clean-css": "^4.2.11",
 		"@types/command-line-args": "^5.2.0",
 		"@types/command-line-usage": "^5.0.2",
+		"@types/html-minifier-terser": "^7.0.2",
 		"@types/js-yaml": "^3.12.1",
 		"@types/jsdom": "^16.2.13",
 		"@types/node": "^24.10.13",

src/Spec.ts

@@ -47,6 +47,7 @@ import {
 import { lint } from './lint/lint';
 import { CancellationToken } from 'prex';
 import type { JSDOM } from 'jsdom';
+import { minifyGeneratedFiles } from './minify';
 import { getProductions, rhsMatches, getLocationInGrammarFile } from './lint/utils';
 import type { AugmentedGrammarEle } from './Grammar';
 import { zip } from './utils';
@@ -701,6 +702,10 @@ export default class Spec {
       : this.opts.outfile ?? null;
     this.generatedFiles.set(file, this.toHTML());
 
+    if (this.opts.minify || this.opts.minify === undefined) {
+      this.generatedFiles = await minifyGeneratedFiles(this.generatedFiles, this.log);
+    }
+
     return this;
   }
 

src/args.ts

@@ -59,6 +59,11 @@ export const options = [
     type: Boolean,
     description: 'Enforce some style and correctness checks',
   },
+  {
+    name: 'no-minify',
+    type: Boolean,
+    description: 'Disable minification of generated output',
+  },
   {
     name: 'error-formatter',
     type: String,

src/cli.ts

@@ -129,6 +129,9 @@ const build = debounce(async function build() {
     if (args['assets-dir'] != null) {
       opts.assetsDir = args['assets-dir'];
     }
+    if (args['no-minify']) {
+      opts.minify = false;
+    }
 
     let warned = false;
 

src/ecmarkup.ts

@@ -41,6 +41,7 @@ export interface Options {
   printable?: boolean;
   markEffects?: boolean;
   lintSpec?: boolean;
+  minify?: boolean;
   cssOut?: never;
   jsOut?: never;
   assets?: 'none' | 'inline' | 'external';

src/minify.ts

@@ -0,0 +1,76 @@
+import { minify as htmlMinify } from 'html-minifier-terser';
+import * as CleanCSS from 'clean-css';
+import { optimize as svgoOptimize, type Config as SvgoConfig, type PluginConfig } from 'svgo';
+import { minify as terserMinify } from 'terser';
+import * as path from 'path';
+
+type GeneratedFiles = Map<string | null, string | Buffer>;
+type Log = (str: string) => void;
+
+const htmlMinifierOptions = {
+  caseSensitive: true,
+  collapseBooleanAttributes: true,
+  collapseWhitespace: true,
+  decodeEntities: true,
+  html5: true,
+  minifyCSS: true,
+  minifyJS: true,
+  removeAttributeQuotes: true,
+  removeComments: true,
+  removeEmptyAttributes: true,
+  removeRedundantAttributes: true,
+  removeScriptTypeAttributes: true,
+  removeStyleLinkTypeAttributes: true,
+  sortAttributes: true,
+  sortClassName: true,
+  useShortDoctype: true,
+};
+
+const cleanCss = new CleanCSS({ level: 2 });
+
+const svgoConfig: SvgoConfig = {
+  multipass: true,
+  plugins: [
+    {
+      name: 'preset-default',
+      params: { overrides: { removeViewBox: false } },
+    } as PluginConfig,
+  ],
+};
+
+export async function minifyGeneratedFiles(
+  files: GeneratedFiles,
+  log?: Log,
+): Promise<GeneratedFiles> {
+  const result: GeneratedFiles = new Map();
+
+  for (const [key, value] of files) {
+    const ext = key != null ? path.extname(key) : null;
+
+    if (ext === '.html' || key === null) {
+      const html = typeof value === 'string' ? value : value.toString('utf-8');
+      log?.(`Minifying ${key ?? 'stdout'}...`);
+      const minified = await htmlMinify(html, htmlMinifierOptions);
+      result.set(key, minified);
+    } else if (ext === '.css') {
+      const css = typeof value === 'string' ? value : value.toString('utf-8');
+      log?.(`Minifying ${key}...`);
+      const output = cleanCss.minify(css);
+      result.set(key, output.styles);
+    } else if (ext === '.svg') {
+      const svg = typeof value === 'string' ? value : value.toString('utf-8');
+      log?.(`Minifying ${key}...`);
+      const optimized = svgoOptimize(svg, svgoConfig);
+      result.set(key, optimized.data);
+    } else if (ext === '.js') {
+      const js = typeof value === 'string' ? value : value.toString('utf-8');
+      log?.(`Minifying ${key}...`);
+      const output = await terserMinify(js);
+      result.set(key, output.code!);
+    } else {
+      result.set(key, value);
+    }
+  }
+
+  return result;
+}

test/baselines.ts

@@ -26,6 +26,7 @@ function build(file: string, options: Options) {
       ),
     {
       extraBiblios: [ecma262biblio as ExportedBiblio],
+      minify: false,
       ...options,
     },
   );

test/build.ts

@@ -27,4 +27,42 @@ describe('ecmarkup#build', () => {
     assert.equal(typeof result, 'string');
     assert(result.includes(`<div id="spec-container">`));
   });
+
+  describe('minify option', () => {
+    async function buildWithMinify(minify?: boolean) {
+      const spec = await build('root.html', async file => fetch(file), {
+        toc: false,
+        copyright: false,
+        assets: 'none',
+        minify,
+      });
+      return spec.generatedFiles.get(null) as string;
+    }
+
+    it('minifies by default when option is omitted', async () => {
+      const defaultOutput = await buildWithMinify(undefined);
+      const unminified = await buildWithMinify(false);
+      assert(
+        defaultOutput.length < unminified.length,
+        `Expected default (${defaultOutput.length}) to be smaller than unminified (${unminified.length})`,
+      );
+    });
+
+    it('minifies when minify is true', async () => {
+      const minified = await buildWithMinify(true);
+      const unminified = await buildWithMinify(false);
+      assert(
+        minified.length < unminified.length,
+        `Expected minified (${minified.length}) to be smaller than unminified (${unminified.length})`,
+      );
+    });
+
+    it('does not minify when minify is false', async () => {
+      const unminified = await buildWithMinify(false);
+      assert(
+        unminified.includes(`<div id="spec-container">`),
+        'Expected unminified output to preserve whitespace and attribute quotes',
+      );
+    });
+  });
 });

test/cli.ts

@@ -35,6 +35,20 @@ describe('ecmarkup#cli', { timeout: 4000 }, () => {
       });
     });
   });
+
+  it('minifies by default and --no-minify disables it', () => {
+    const minified = execSync(`${execPath} ./bin/ecmarkup.js test/baselines/sources/example.html`, {
+      encoding: 'utf8',
+    });
+    const unminified = execSync(
+      `${execPath} ./bin/ecmarkup.js --no-minify test/baselines/sources/example.html`,
+      { encoding: 'utf8' },
+    );
+    assert(
+      minified.length < unminified.length,
+      `Expected minified (${minified.length}) to be smaller than unminified (${unminified.length})`,
+    );
+  });
 });
 
 describe('emu-format --check', { timeout: 4000 }, () => {