@divriots/jampack 0.5.1 → 0.6.0

package/README.md

@@ -68,6 +68,8 @@ See [the list of features](https://jampack.divriots.com).
 - [WebComponents.dev](https://WebComponents.dev)
 - [LWC.studio](https://lwc.studio)
 - [Components.studio](https://components.studio)
+- [keycloak.ch](https://keycloak.ch)
+
 > Add yours here
 
 ## Why is it called `jampack`?

package/dist/compress.d.ts

@@ -2,6 +2,6 @@ import sharp from 'sharp';
 import type { Image } from './types.js';
 export declare const compressImage: (data: Buffer, options: {
     resize?: sharp.ResizeOptions;
-    toFormat?: 'webp' | 'pjpg' | 'unchanged';
+    toFormat?: 'webp' | 'pjpg' | 'avif' | 'unchanged';
 }) => Promise<Image | undefined>;
 export declare function compress(exclude: string): Promise<void>;

package/dist/compress.js

@@ -3,6 +3,7 @@ import * as path from 'path';
 import { optimize as svgo } from 'svgo';
 import { minify as htmlminifier } from 'html-minifier-terser';
 import { minify as csso } from 'csso';
+import { transform as lightcss } from 'lightningcss';
 import { formatBytes } from './utils.js';
 import sharp from 'sharp';
 import swc from '@swc/core';
@@ -50,9 +51,34 @@ const processFile = async (file, stats) => {
                 break;
             case '.css':
                 const cssdata = await fs.readFile(file);
-                const newcssData = await csso(cssdata.toString()).css;
-                if (newcssData) {
-                    writeData = newcssData;
+                // Compress with csso
+                const cssoCSSData = Buffer.from(await csso(cssdata.toString(), { comments: false }).css);
+                // Compress with lightningcss
+                let lightCSSData;
+                try {
+                    lightCSSData = lightcss({
+                        filename: 'style.css',
+                        code: cssdata,
+                        minify: true,
+                        sourceMap: false,
+                    }).code;
+                }
+                catch (e) {
+                    // Error while processing with lightningcss
+                    // Ignore
+                }
+                // Pick the best
+                if (cssoCSSData && lightCSSData) {
+                    writeData =
+                        cssoCSSData.length <= lightCSSData.length
+                            ? cssoCSSData
+                            : lightCSSData;
+                }
+                else if (cssoCSSData && !lightCSSData) {
+                    writeData = cssoCSSData;
+                }
+                else if (!cssoCSSData && lightCSSData) {
+                    writeData = lightCSSData;
                 }
                 break;
             case '.js':
@@ -108,87 +134,92 @@ export const compressImage = async (data, options) => {
         // Skip animated images for the moment.
         return undefined;
     }
-    let doSharp = false;
     let outputFormat;
-    switch (meta.format) {
-        case 'svg':
-            const newData = svgo(data, {
-                multipass: true,
-                plugins: [
-                    {
-                        name: 'preset-default',
-                        params: {
-                            overrides: {
-                                removeViewBox: false,
-                            },
+    // Special case for svg
+    if (meta.format === 'svg') {
+        const newData = svgo(data, {
+            multipass: true,
+            plugins: [
+                {
+                    name: 'preset-default',
+                    params: {
+                        overrides: {
+                            removeViewBox: false,
                         },
                     },
-                ],
-            });
-            if (newData.error || newData.modernError) {
-                console.log(`Error processing svg ${data}`);
-                return undefined;
-            }
-            return { format: 'svg', data: Buffer.from(newData.data, 'utf8') };
-        case 'png':
-            outputFormat = 'png';
-            if (toFormat === 'unchanged') {
+                },
+            ],
+        });
+        if (newData.error || newData.modernError) {
+            console.log(`Error processing svg ${data}`);
+            return undefined;
+        }
+        return { format: 'svg', data: Buffer.from(newData.data, 'utf8') };
+    }
+    // The bitmap images
+    if (toFormat === 'unchanged') {
+        switch (meta.format) {
+            case 'png':
                 sharpFile = sharpFile.png(config.image.png.options || {});
-            }
-            doSharp = true;
-            break;
-        case 'jpeg':
-        case 'jpg':
-            outputFormat = 'jpg';
-            if (toFormat === 'unchanged') {
+                outputFormat = 'png';
+                break;
+            case 'jpeg':
+            case 'jpg':
                 sharpFile = sharpFile.jpeg(config.image.jpeg.options || {});
-            }
-            doSharp = true;
-            break;
-        case 'webp':
-            outputFormat = 'webp';
-            sharpFile = sharpFile.webp(createWebpOptions(config.image.webp.options_lossly) || {});
-            doSharp = true;
-            toFormat = 'unchanged'; // Don't need to convert to webP again
-            break;
-        case 'avif':
-            outputFormat = 'avif';
-            // TODO but avif is already pretty optimized
-            toFormat = 'unchanged';
-            break;
-    }
-    if (doSharp) {
-        if (toFormat === 'webp') {
-            sharpFile = sharpFile.webp(createWebpOptions(meta.format === 'png'
-                ? config.image.webp.options_lossless
-                : config.image.webp.options_lossly));
-            outputFormat = 'webp';
-        }
-        else if (toFormat === 'pjpg') {
-            sharpFile = sharpFile.jpeg({ ...config.image.jpeg.options, progressive: true } || {});
-            outputFormat = 'jpg';
+                outputFormat = 'jpg';
+                break;
+            case 'webp':
+                sharpFile = sharpFile.webp(createWebpOptions(config.image.webp.options_lossly) || {});
+                outputFormat = 'webp';
+                break;
+            case 'avif':
+                sharpFile = sharpFile.avif();
+                outputFormat = 'avif';
+                break;
         }
-        if (((_a = options.resize) === null || _a === void 0 ? void 0 : _a.width) && ((_b = options.resize) === null || _b === void 0 ? void 0 : _b.height)) {
-            sharpFile = sharpFile.resize({
-                ...options.resize,
-                fit: 'fill',
-                withoutEnlargement: true,
-            });
+    }
+    else {
+        // To format
+        switch (toFormat) {
+            case 'pjpg':
+                sharpFile = sharpFile.jpeg({ ...config.image.jpeg.options, progressive: true } || {});
+                outputFormat = 'jpg';
+                break;
+            case 'webp':
+                sharpFile = sharpFile.webp(createWebpOptions(meta.format === 'png'
+                    ? config.image.webp.options_lossless
+                    : config.image.webp.options_lossly));
+                outputFormat = 'webp';
+                break;
+            case 'avif':
+                sharpFile = sharpFile.avif({ effort: 6 });
+                outputFormat = 'avif';
+                break;
         }
-        //
-        // Output image processed
-        //
-        // Add to cache
-        const outputImage = {
-            format: outputFormat,
-            data: await sharpFile.toBuffer(),
-        };
-        await addToCacheCompressImage(cacheHash, outputImage);
-        // Go
-        return outputImage;
     }
-    // Unknown input format or error while processing
-    return undefined;
+    // Unknow input format or output format
+    // Can't do
+    if (!outputFormat)
+        return undefined;
+    // If resize is requested
+    if (((_a = options.resize) === null || _a === void 0 ? void 0 : _a.width) && ((_b = options.resize) === null || _b === void 0 ? void 0 : _b.height)) {
+        sharpFile = sharpFile.resize({
+            ...options.resize,
+            fit: 'fill',
+            withoutEnlargement: true,
+        });
+    }
+    //
+    // Output image processed
+    //
+    // Add to cache
+    const outputImage = {
+        format: outputFormat,
+        data: await sharpFile.toBuffer(),
+    };
+    await addToCacheCompressImage(cacheHash, outputImage);
+    // Go
+    return outputImage;
 };
 const compressImageFile = async (file) => {
     const buffer = await fs.readFile(file);

package/dist/optimize.js

@@ -240,9 +240,12 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
         }
         else {
             // Generate image set
+            // Avif => Avif
+            // png, jpg, ... => WebP
+            const targetFormat = (await originalImage.getMime()) === 'image/avif' ? 'avif' : 'webp';
             const ext = path.extname(attrib_src);
             const fullbasename = attrib_src.slice(0, -ext.length);
-            const imageSrc = (addition) => `${fullbasename}${addition}.${canBeProgressiveJpeg ? 'jpg' : 'webp'}`;
+            const imageSrc = (addition) => `${fullbasename}${addition}.${canBeProgressiveJpeg ? 'jpg' : targetFormat}`;
             // Start from original image
             let new_srcset = '';
             // Start reduction
@@ -250,6 +253,9 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
             const ratio = w / h;
             let valueW = w - step;
             let valueH = Math.trunc(valueW / ratio);
+            let previousImageSize = (newImage === null || newImage === void 0 ? void 0 : newImage.data)
+                ? Math.min(newImage.data.length, await originalImage.getLen())
+                : await originalImage.getLen();
             while (valueW > config.image.srcset_min_width) {
                 const src = imageSrc(`@${valueW}w`);
                 const absoluteFilename = translateSrc($state.dir, path.dirname(htmlfile), src);
@@ -259,11 +265,19 @@ async function processImage(htmlfile, $, imgElement, isAboveTheFold) {
                     $state.compressedFiles.add(absoluteFilename);
                     const compressedImage = await compressImage(await originalImage.getData(), {
                         resize: { width: valueW, height: valueH },
-                        toFormat: canBeProgressiveJpeg ? 'pjpg' : 'webp',
+                        toFormat: canBeProgressiveJpeg ? 'pjpg' : targetFormat,
                     });
-                    if ((compressedImage === null || compressedImage === void 0 ? void 0 : compressedImage.data) && !$state.args.nowrite) {
+                    if (!(compressedImage === null || compressedImage === void 0 ? void 0 : compressedImage.data) ||
+                        compressedImage.data.length >= previousImageSize) {
+                        // jampack was not able to compress below the original image
+                        // Let's move on
+                        continue;
+                    }
+                    if (!$state.args.nowrite) {
                         fs.writeFile(absoluteFilename, compressedImage.data);
                     }
+                    // Add previous smaller file size
+                    previousImageSize = compressedImage.data.length;
                 }
                 new_srcset += `, ${src} ${valueW}w`;
                 // reduce size

package/dist/state.js

@@ -27,7 +27,6 @@ export class GlobalState {
         state.summary.nbFilesCompressed += isCompressed;
         state.summary.dataLenUncompressed += r.originalSize;
         state.summary.dataLenCompressed += r.compressedSize;
-        console.log(r.action);
         if (r.action) {
             let summary = this.summaryByExtension[r.action];
             if (!summary) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@divriots/jampack",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Packer for static websites",
   "author": "Georges Gomes @georges-gomes",
   "bin": {
@@ -34,6 +34,7 @@
     "hasha": "^5.2.2",
     "html-minifier-terser": "^7.1.0",
     "kleur": "^4.1.5",
+    "lightningcss": "^1.18.0",
     "mini-svg-data-uri": "^1.4.4",
     "ora": "^6.1.2",
     "sharp": "^0.31.2",
@@ -49,7 +50,7 @@
   },
   "scripts": {
     "watch": "pnpm build --watch",
-    "try": "shx rm -fr demo && cp -R demo_avif demo && node ./dist/index.js ./demo",
+    "try": "shx rm -fr demo && cp -R demo_avif demo && node ./dist/index.js ./demo --nocache",
     "build": "shx rm -rf dist && tsc -b",
     "lint": "eslint . --ext .ts --config .eslintrc"
   },