Bump minimatch from 3.0.4 to 3.1.2 in /libsquoosh

Bumps [minimatch](https://github.com/isaacs/minimatch) from 3.0.4 to 3.1.2.
- [Release notes](https://github.com/isaacs/minimatch/releases)
- [Commits](https://github.com/isaacs/minimatch/compare/v3.0.4...v3.1.2)

---
updated-dependencies:
- dependency-name: minimatch
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

cli/README.md

@@ -1,3 +1,7 @@
+# Project no longer maintained
+
+Unfortunately, due to a few people leaving the team, and staffing issues resulting from the current economic climate (ugh), this package is no longer actively maintained. I know that sucks, but there simply isn't the time & people to work on this. If anyone from the community wants to fork it, you have my blessing. The [squoosh.app](https://squoosh.app) will continue to be supported and improved.
+
 # Squoosh CLI
 
 Squoosh CLI is an _experimental_ way to run all the codecs you know from the [Squoosh] web app on your command line using WebAssembly. The Squoosh CLI uses a worker pool to parallelize processing images. This way you can apply the same codec to many images at once.

cli/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@squoosh/cli",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@squoosh/cli",
-      "version": "0.7.2",
+      "version": "0.7.3",
       "license": "Apache-2.0",
       "dependencies": {
         "@squoosh/lib": "^0.4.0",

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squoosh/cli",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "A CLI for Squoosh",
   "public": true,
   "type": "module",

lib/initial-css-plugin.js

@@ -11,23 +11,10 @@
  * limitations under the License.
  */
 import { promisify } from 'util';
-import { promises as fsp, readFileSync } from 'fs';
+
 import path from 'path';
 import { posix } from 'path';
 import glob from 'glob';
-import postcss from 'postcss';
-import postCSSNested from 'postcss-nested';
-import postCSSUrl from 'postcss-url';
-import postCSSModules from 'postcss-modules';
-import postCSSSimpleVars from 'postcss-simple-vars';
-import cssNano from 'cssnano';
-import {
-  parse as parsePath,
-  resolve as resolvePath,
-  dirname,
-  normalize as nomalizePath,
-  sep as pathSep,
-} from 'path';
 
 const globP = promisify(glob);
 
@@ -43,72 +30,26 @@ export default function initialCssPlugin() {
     async load(id) {
       if (id !== initialCssModule) return;
 
-      const matches = (
+      const matches = await globP('shared/prerendered-app/**/*.css', {
-        await globP('shared/prerendered-app/**/*.css', {
         nodir: true,
         cwd: path.join(process.cwd(), 'src'),
-          absolute: true,
+      });
-        })
-      ).map((cssPath) =>
-        // glob() returns windows paths with a forward slash. Normalise it:
-        path.normalize(cssPath),
-      );
 
       // Sort the matches so the parentmost items appear first.
       // This is a bit of a hack, but it means the util stuff appears in the cascade first.
       const sortedMatches = matches
         .map((match) => path.normalize(match).split(path.sep))
         .sort((a, b) => a.length - b.length)
-        .map((match) => '/' + posix.join(...match));
+        .map((match) => posix.join(...match));
 
-      const cssSources = await Promise.all(
+      const imports = sortedMatches
-        sortedMatches.map(async (path) => {
+        .map((id, i) => `import css${i} from 'css:${id}';\n`)
-          this.addWatchFile(path);
+        .join('');
-          const file = await fsp.readFile(path);
 
-          const cssResult = await postcss([
+      return (
-            postCSSNested,
+        imports +
-            postCSSSimpleVars(),
+        `export default ${sortedMatches.map((_, i) => `css${i}`).join(' + ')};`
-            postCSSModules({
-              root: '',
-            }),
-            postCSSUrl({
-              url: ({ relativePath, url }) => {
-                if (/^((https?|data):|#)/.test(url)) return url;
-                const parsedPath = parsePath(relativePath);
-                const source = readFileSync(
-                  resolvePath(dirname(path), relativePath),
       );
-                const fileId = this.emitFile({
-                  type: 'asset',
-                  name: parsedPath.base,
-                  source,
-                });
-                const hash = createHash('md5');
-                hash.update(source);
-                const md5 = hash.digest('hex');
-                hashToId.set(md5, fileId);
-                return `/fake/path/to/asset/${md5}/`;
-              },
-            }),
-            cssNano,
-          ]).process(file, {
-            from: path,
-          });
-
-          return cssResult.css;
-        }),
-      );
-
-      const css = cssSources.join('\n');
-
-      const fileId = this.emitFile({
-        type: 'asset',
-        source: css,
-        name: 'initial.css',
-      });
-
-      return `export default import.meta.ROLLUP_FILE_URL_${fileId};`;
     },
   };
 }

libsquoosh/README.md

@@ -1,3 +1,7 @@
+# Project no longer maintained
+
+Unfortunately, due to a few people leaving the team, and staffing issues resulting from the current economic climate (ugh), this package is no longer actively maintained. I know that sucks, but there simply isn't the time & people to work on this. If anyone from the community wants to fork it, you have my blessing. The [squoosh.app](https://squoosh.app) will continue to be supported and improved.
+
 # libSquoosh
 
 libSquoosh is an _experimental_ way to run all the codecs you know from the [Squoosh] web app directly inside your own JavaScript program. libSquoosh uses a worker pool to parallelize processing images. This way you can apply the same codec to many images at once.

libsquoosh/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@squoosh/lib",
-  "version": "0.4.0",
+  "version": "0.5.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@squoosh/lib",
-      "version": "0.4.0",
+      "version": "0.5.2",
       "license": "Apache-2.0",
       "dependencies": {
         "wasm-feature-detect": "^1.2.11",
@@ -1692,9 +1692,9 @@
       "dev": true
     },
     "node_modules/minimatch": {
-      "version": "3.0.4",
+      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -3660,9 +3660,9 @@
       "dev": true
     },
     "minimatch": {
-      "version": "3.0.4",
+      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"

libsquoosh/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squoosh/lib",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "A Node library for Squoosh",
   "public": true,
   "main": "./build/index.js",

src/client/lazy-app/Compress/Output/custom-els/TwoUp/styles.css

@@ -40,7 +40,8 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
 }
 
 .scrubber {
-  display: flex;
+  display: grid;
+  align-content: center;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -54,10 +55,6 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
   padding: 0 calc(var(--thumb-size) * 0.24);
 }
 
-.scrubber svg {
-  flex: 1;
-}
-
 .arrow-left {
   fill: var(--pink);
 }

src/client/lazy-app/Compress/Output/style.css

@@ -49,6 +49,7 @@
   align-self: center;
   padding: 9px 66px;
   position: relative;
+  gap: 6px;
 
   /* Allow clicks to fall through to the pinch zoom area */
   pointer-events: none;
@@ -68,7 +69,6 @@
   display: flex;
   position: relative;
   z-index: 100;
-  margin: 0 3px;
 }
 
 .button,
@@ -95,6 +95,7 @@
 
 .button {
   color: #fff;
+  margin: 0;
 
   &:hover {
     background: rgba(50, 50, 50, 0.92);
@@ -114,7 +115,7 @@
 .last-button {
   composes: button;
   border-radius: 0 6px 6px 0;
-  border-left-width: 1px;
+  border-right-width: 1px;
 }
 
 .zoom {

src/client/lazy-app/Compress/index.tsx

@@ -114,7 +114,7 @@ async function decodeImage(
       }
     }
     // Otherwise fall through and try built-in decoding for a laugh.
-    return await builtinDecode(signal, blob, mimeType);
+    return await builtinDecode(signal, blob);
   } catch (err) {
     if (err instanceof Error && err.name === 'AbortError') throw err;
     console.log(err);

src/client/lazy-app/util/canvas.ts

@@ -63,35 +63,17 @@ interface DrawableToImageDataOptions {
   sh?: number;
 }
 
-function getWidth(
-  drawable: ImageBitmap | HTMLImageElement | VideoFrame,
-): number {
-  if ('displayWidth' in drawable) {
-    return drawable.displayWidth;
-  }
-  return drawable.width;
-}
-
-function getHeight(
-  drawable: ImageBitmap | HTMLImageElement | VideoFrame,
-): number {
-  if ('displayHeight' in drawable) {
-    return drawable.displayHeight;
-  }
-  return drawable.height;
-}
-
 export function drawableToImageData(
-  drawable: ImageBitmap | HTMLImageElement | VideoFrame,
+  drawable: ImageBitmap | HTMLImageElement,
   opts: DrawableToImageDataOptions = {},
 ): ImageData {
   const {
-    width = getWidth(drawable),
+    width = drawable.width,
-    height = getHeight(drawable),
+    height = drawable.height,
     sx = 0,
     sy = 0,
-    sw = getWidth(drawable),
+    sw = drawable.width,
-    sh = getHeight(drawable),
+    sh = drawable.height,
   } = opts;
 
   // Make canvas same size as image

src/client/lazy-app/util/index.ts

@@ -10,8 +10,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import * as WebCodecs from '../util/web-codecs';
 import { drawableToImageData } from './canvas';
 
 /** If render engine is Safari */
@@ -139,15 +137,7 @@ export async function blobToImg(blob: Blob): Promise<HTMLImageElement> {
 export async function builtinDecode(
   signal: AbortSignal,
   blob: Blob,
-  mimeType: string,
 ): Promise<ImageData> {
-  // If WebCodecs are supported, use that.
-  if (await WebCodecs.isTypeSupported(mimeType)) {
-    assertSignal(signal);
-    try {
-      return await abortable(signal, WebCodecs.decode(blob, mimeType));
-    } catch (e) {}
-  }
   assertSignal(signal);
 
   // Prefer createImageBitmap as it's the off-thread option for Firefox.

src/client/lazy-app/util/web-codecs/index.ts

@@ -1,33 +0,0 @@
-import { drawableToImageData } from '../canvas';
-
-const hasImageDecoder = typeof ImageDecoder !== 'undefined';
-
-export async function isTypeSupported(mimeType: string): Promise<boolean> {
-  if (!hasImageDecoder) return false;
-  // Some old versions of this API threw here.
-  // It only impacted folks with experimental web platform flags enabled in Chrome 90.
-  // The API was updated in Chrome 91.
-  try {
-    return await ImageDecoder.isTypeSupported(mimeType);
-  } catch (err) {
-    return false;
-  }
-}
-
-export async function decode(
-  blob: Blob | File,
-  mimeType: string,
-): Promise<ImageData> {
-  if (!hasImageDecoder) {
-    throw Error(
-      `This browser does not support ImageDecoder. This function should not have been called.`,
-    );
-  }
-  const decoder = new ImageDecoder({
-    type: mimeType,
-    // Non-obvious way to turn an Blob into a ReadableStream
-    data: new Response(blob).body!,
-  });
-  const { image } = await decoder.decode();
-  return drawableToImageData(image);
-}

src/client/lazy-app/util/web-codecs/missing-types.d.ts

@@ -1,60 +0,0 @@
-interface ImageDecoderInit {
-  type: string;
-  data: BufferSource | ReadableStream;
-  premultiplyAlpha?: PremultiplyAlpha;
-  colorSpaceConversion?: ColorSpaceConversion;
-  desiredWidth?: number;
-  desiredHeight?: number;
-  preferAnimation?: boolean;
-}
-
-interface ImageDecodeOptions {
-  frameIndex: number;
-  completeFramesOnly: boolean;
-}
-
-interface ImageDecodeResult {
-  image: VideoFrame;
-  complete: boolean;
-}
-
-// I didn’t do all the types because the class is kinda complex.
-// I focused on what we need.
-// See https://w3c.github.io/webcodecs/#videoframe
-declare class VideoFrame {
-  displayWidth: number;
-  displayHeight: number;
-}
-
-// Add VideoFrame to canvas’ drawImage()
-interface CanvasDrawImage {
-  drawImage(
-    image: CanvasImageSource | VideoFrame,
-    dx: number,
-    dy: number,
-  ): void;
-  drawImage(
-    image: CanvasImageSource | VideoFrame,
-    dx: number,
-    dy: number,
-    dw: number,
-    dh: number,
-  ): void;
-  drawImage(
-    image: CanvasImageSource | VideoFrame,
-    sx: number,
-    sy: number,
-    sw: number,
-    sh: number,
-    dx: number,
-    dy: number,
-    dw: number,
-    dh: number,
-  ): void;
-}
-
-declare class ImageDecoder {
-  static isTypeSupported(type: string): Promise<boolean>;
-  constructor(desc: ImageDecoderInit);
-  decode(opts?: Partial<ImageDecodeOptions>): Promise<ImageDecodeResult>;
-}

src/static-build/index.tsx

@@ -19,15 +19,39 @@ import * as iconLarge from 'img-url:static-build/assets/icon-large.png';
 import * as screenshot1 from 'img-url:static-build/assets/screenshot1.png';
 import * as screenshot2 from 'img-url:static-build/assets/screenshot2.jpg';
 import * as screenshot3 from 'img-url:static-build/assets/screenshot3.jpg';
+import * as screenshot4 from 'img-url:static-build/assets/screenshot4.png';
+import * as screenshot5 from 'img-url:static-build/assets/screenshot5.jpg';
+import * as screenshot6 from 'img-url:static-build/assets/screenshot6.jpg';
 import dedent from 'dedent';
 import { lookup as lookupMime } from 'mime-types';
 
-const manifestSize = ({ width, height }: { width: number; height: number }) =>
+interface Dimensions {
-  `${width}x${height}`;
+  width: number;
+  height: number;
+}
+
+const manifestSize = ({ width, height }: Dimensions) => `${width}x${height}`;
+const formFactor = ({ width, height }: Dimensions) =>
+  width > height ? 'wide' : 'narrow';
+
+const screenshots = [
+  screenshot1,
+  screenshot2,
+  screenshot3,
+  screenshot4,
+  screenshot5,
+  screenshot6,
+].map((screenshot) => ({
+  src: screenshot.default,
+  type: lookupMime(screenshot.default),
+  sizes: manifestSize(screenshot),
+  form_factor: formFactor(screenshot),
+}));
 
 interface Output {
   [outputPath: string]: string;
 }
+
 const toOutput: Output = {
   'index.html': renderPage(<IndexPage />),
   'manifest.json': JSON.stringify({
@@ -55,23 +79,7 @@ const toOutput: Output = {
       'Compress and compare images with different codecs, right in your browser.',
     lang: 'en',
     categories: ['photo', 'productivity', 'utilities'],
-    screenshots: [
+    screenshots,
-      {
-        src: screenshot1.default,
-        type: lookupMime(screenshot1.default),
-        sizes: manifestSize(screenshot1),
-      },
-      {
-        src: screenshot2.default,
-        type: lookupMime(screenshot2.default),
-        sizes: manifestSize(screenshot2),
-      },
-      {
-        src: screenshot3.default,
-        type: lookupMime(screenshot3.default),
-        sizes: manifestSize(screenshot3),
-      },
-    ],
     share_target: {
       action: '/?utm_medium=PWA&utm_source=share-target&share-target',
       method: 'POST',

src/static-build/pages/index/index.tsx

@@ -64,7 +64,11 @@ const Index: FunctionalComponent<Props> = () => (
       <style
         dangerouslySetInnerHTML={{ __html: escapeStyleScriptContent(baseCss) }}
       />
-      <link rel="stylesheet" href={initialCss} />
+      <style
+        dangerouslySetInnerHTML={{
+          __html: escapeStyleScriptContent(initialCss),
+        }}
+      />
     </head>
     <body>
       <div id="app">