Minify CSS Before: raw=16kB, gzip=3.63kB After: raw=12.44kB, gzip=3.27kB Added build time (Mac mini M1): 15ms~25ms To be honest, I don't think this compression result is not worth the added build time. However, the reduced 3.5kB could reduce consuming memory and CPU times... few micro seconds? I commit this since the journey to find a CSS minify library that was compatible with Deno is extremely tiresome... * `cssnano` imports `caniuse` even though related optimizations are disabled. It statically loads the module hence the access to `<CWD>` (and probably more places like `~/.config` idk), which requires completely unnecessary broad permissions. * `esbuild` is simple and great tool, but WASM is second-class citizen in Deno: requires `--allow-net=deno.land` (or `esm.sh`) or `--allow-read=<vendored path>`. One can embed WASM binary as a base64 or `JSON.parse("Uint8Array")`, but WASM binary of ESBuild weighs 30MB. I tried to open the generated file using the latter method and my nvim froze for minutes, which I had to `kill`. * `lightningcss` looks great, but this is WASM too and weighs 10MB. Better than ESBuild though. * `clean-css` declares itself as in maintenance mode. I tested it but it loads environment variables at init time and access to `cwd`. In the end, CSSO is the only ESM compatible library that works on web platform.

Changes

3 changed files (+13/-1)

• deno.lock
  • @@ -202,6 +202,8 @@ "https://esm.sh/v135/character-entities-legacy@3.0.0/denonext/character-entities-legacy.mjs": "5da76ada1554e4956dc6b702ba92b56a3faf158b24bf45279c522e85f5d9cd21",
    "https://esm.sh/v135/character-entities@2.0.2/denonext/character-entities.mjs": "9e8657f056310ac3ca8058eaf96cef695ee13a4bf6c302674796a882464f305c", "https://esm.sh/v135/character-reference-invalid@2.0.1/denonext/character-reference-invalid.mjs": "41034e591247fb2bc6a12dd190e776b84cfe1da74e984fef3efbff2a97814d53", "https://esm.sh/v135/comma-separated-tokens@2.0.3/denonext/comma-separated-tokens.mjs": "ad5df8a36487e0a63d15bbbb6bab8b153e08583d0d5eb6d0058cd0fc619252e0", + "https://esm.sh/v135/csso@5.0.5/denonext/dist/csso.esm.js": "0017d1f3183cf188c946f2691d7172a5491318105e5a19b977ce4b6860c2fda8", + "https://esm.sh/v135/csso@5.0.5/dist/csso.esm.js": "e57e515cc475bb2053dd7f1b111e3c12d95af252250751db72a4fee10e8ea78c", "https://esm.sh/v135/decode-named-character-reference@1.0.2/denonext/decode-named-character-reference.mjs": "1a5a8f9cbe302be478e964ab701be8644dbdfd4d8ce9f14de186cf84ee2a4bc1", "https://esm.sh/v135/devlop@1.1.0/denonext/devlop.mjs": "05fffa5a5168daec45963b784734dbc468758e130a340af874adfe0d457e394a", "https://esm.sh/v135/entities@4.5.0/denonext/lib/decode.js": "7fea6d8bd725edbbf7ea05031d2ea1bbbc1166dc11e3345d541198dd2dc16f1e",
• deps/esm.sh/csso/mod.ts (new)
  • @@ -0,0 +1,7 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // + // SPDX-License-Identifier: Apache-2.0 + + import * as csso from "https://esm.sh/v135/csso@5.0.5/dist/csso.esm.js"; + + export const minify: (css: string) => { css: string } = csso.minify;
• page_builder/default_theme/mod.ts
  • @@ -16,6 +16,7 @@ import type * as Hast from "../../deps/esm.sh/hast/types.ts";
    import type * as Mdast from "../../deps/esm.sh/mdast/types.ts"; import { headingRange } from "../../deps/esm.sh/mdast-util-heading-range/mod.ts"; import { toHtml } from "../../deps/esm.sh/hast-util-to-html/mod.ts"; + import * as csso from "../../deps/esm.sh/csso/mod.ts"; import { logger } from "../../logger.ts";
  • @@ -180,13 +181,15 @@ jsonCanvasRendererStyles,
    ), ); + const minCss = csso.minify(styles); + const assets: Assets = { globalCss: [".assets", "global.css"], }; await fileSystemWriter.write( assets.globalCss, - new TextEncoder().encode(styles), + new TextEncoder().encode(minCss.css), ); const root = await fileSystemReader.getRootDirectory();