Refactored to reflect the strict-csp API change to an options object

.gitattributes

@@ -1,2 +1,2 @@
-/codecs/**/*.js linguist-generated -diff
-/codecs/*/pkg*/*.d.ts linguist-generated
+/codecs/**/*.js linguist-generated=true
+/codecs/*/pkg*/*.d.ts linguist-generated=true

codecs/jxl/Makefile

@@ -1,5 +1,5 @@
 CODEC_URL = https://github.com/libjxl/libjxl.git
-CODEC_VERSION = 9f544641ec83f6abd9da598bdd08178ee8a003e0
+CODEC_VERSION = v0.5
 CODEC_DIR = node_modules/jxl
 CODEC_BUILD_ROOT := $(CODEC_DIR)/build
 CODEC_MT_BUILD_DIR := $(CODEC_BUILD_ROOT)/mt
@@ -75,9 +75,6 @@ $(CODEC_MT_SIMD_BUILD_DIR)/Makefile: CXXFLAGS+=-msimd128
 	-DCMAKE_CROSSCOMPILING_EMULATOR=node \
 	-B $(@D) \
 	$(<D)
-	emcc -Wall -O3 -o $(CODEC_DIR)/third_party/skcms/skcms.cc.o -I$(CODEC_DIR)/third_party/skcms -c $(CODEC_DIR)/third_party/skcms/skcms.cc
-	llvm-ar rc $(CODEC_BUILD_DIR)/third_party/libskcms.a $(CODEC_DIR)/third_party/skcms/skcms.cc.o
-	rm $(CODEC_DIR)/third_party/skcms/skcms.cc.o
 
 $(CODEC_DIR)/CMakeLists.txt:
 	$(RM) -r $(@D)

codecs/jxl/enc/jxl_enc.cpp

@@ -4,7 +4,6 @@
 #include "lib/jxl/base/thread_pool_internal.h"
 #include "lib/jxl/enc_external_image.h"
 #include "lib/jxl/enc_file.h"
-#include "lib/jxl/enc_color_management.h"
 
 using namespace emscripten;
 
@@ -18,7 +17,6 @@ struct JXLOptions {
   bool lossyPalette;
   size_t decodingSpeedTier;
   float photonNoiseIso;
-  bool lossyModular;
 };
 
 val encode(std::string image, int width, int height, JXLOptions options) {
@@ -52,16 +50,11 @@ val encode(std::string image, int width, int height, JXLOptions options) {
   float quality = options.quality;
 
   // Quality settings roughly match libjpeg qualities.
-  if (options.lossyModular || quality == 100) {
+  if (quality < 7 || quality == 100) {
     cparams.modular_mode = true;
     // Internal modular quality to roughly match VarDCT size.
-    if (quality < 7) {
-      cparams.quality_pair.first = cparams.quality_pair.second =
-          std::min(35 + (quality - 7) * 3.0f, 100.0f);
-    } else {
-      cparams.quality_pair.first = cparams.quality_pair.second =
-          std::min(35 + (quality - 7) * 65.f / 93.f, 100.0f);
-    }
+    cparams.quality_pair.first = cparams.quality_pair.second =
+        std::min(35 + (quality - 7) * 3.0f, 100.0f);
   } else {
     cparams.modular_mode = false;
     if (quality >= 30) {
@@ -98,14 +91,14 @@ val encode(std::string image, int width, int height, JXLOptions options) {
       jxl::Span<const uint8_t>(reinterpret_cast<const uint8_t*>(image.data()), image.size()), width,
       height, jxl::ColorEncoding::SRGB(/*is_gray=*/false), /*has_alpha=*/true,
       /*alpha_is_premultiplied=*/false, /*bits_per_sample=*/8, /*endiannes=*/JXL_LITTLE_ENDIAN,
-      /*flipped_y=*/false, pool_ptr, main, /*(only true if bits_per_sample==32) float_in=*/false);
+      /*flipped_y=*/false, pool_ptr, main);
 
   if (!result) {
     return val::null();
   }
 
   auto js_result = val::null();
-  if (EncodeFile(cparams, &io, &passes_enc_state, &bytes, jxl::GetJxlCms(), /*aux=*/nullptr, pool_ptr)) {
+  if (EncodeFile(cparams, &io, &passes_enc_state, &bytes, /*aux=*/nullptr, pool_ptr)) {
     js_result = Uint8Array.new_(typed_memory_view(bytes.size(), bytes.data()));
   }
 
@@ -120,7 +113,6 @@ EMSCRIPTEN_BINDINGS(my_module) {
       .field("lossyPalette", &JXLOptions::lossyPalette)
       .field("decodingSpeedTier", &JXLOptions::decodingSpeedTier)
       .field("photonNoiseIso", &JXLOptions::photonNoiseIso)
-      .field("lossyModular", &JXLOptions::lossyModular)
       .field("epf", &JXLOptions::epf);
 
   function("encode", &encode);

codecs/jxl/enc/jxl_enc.d.ts

@@ -6,7 +6,6 @@ export interface EncodeOptions {
   lossyPalette: boolean;
   decodingSpeedTier: number;
   photonNoiseIso: number;
-  lossyModular: boolean;
 }
 
 export interface JXLModule extends EmscriptenWasm.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 = (
-        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),
-      );
+      const matches = await globP('shared/prerendered-app/**/*.css', {
+        nodir: true,
+        cwd: path.join(process.cwd(), 'src'),
+      });
 
       // 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(
-        sortedMatches.map(async (path) => {
-          this.addWatchFile(path);
-          const file = await fsp.readFile(path);
+      const imports = sortedMatches
+        .map((id, i) => `import css${i} from 'css:${id}';\n`)
+        .join('');
 
-          const cssResult = await postcss([
-            postCSSNested,
-            postCSSSimpleVars(),
-            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;
-        }),
+      return (
+        imports +
+        `export default ${sortedMatches.map((_, i) => `css${i}`).join(' + ')};`
       );
-
-      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

@@ -43,15 +43,19 @@ The returned `image` object is a representation of the original image, that you
 When an image has been ingested, you can start preprocessing it and encoding it to other formats. This example will resize the image and then encode it to a `.jpg` and `.jxl` image:
 
 ```js
+await image.decoded; //Wait until the image is decoded before running preprocessors.
+
 const preprocessOptions = {
   //When both width and height are specified, the image resized to specified size.
   resize: {
+    enabled: true,
     width: 100,
     height: 50,
   },
   /*
   //When either width or height is specified, the image resized to specified size keeping aspect ratio.
   resize: {
+    enabled: true,
     width: 100,
   }
   */
@@ -64,7 +68,7 @@ const encodeOptions = {
     quality: 90,
   },
 };
-const result = await image.encode(encodeOptions);
+await image.encode(encodeOptions);
 ```
 
 The default values for each option can be found in the [`codecs.ts`][codecs.ts] file under `defaultEncoderOptions`. Every unspecified value will use the default value specified there. _Better documentation is needed here._
@@ -88,7 +92,7 @@ When you have encoded an image, you normally want to write it to a file.
 This example takes an image that has been encoded as a `jpg` and writes it to a file:
 
 ```js
-const rawEncodedImage = image.encodedWith.mozjpeg.binary;
+const rawEncodedImage = (await image.encodedWith.mozjpeg).binary;
 
 fs.writeFile('/path/to/new/image.jpg', rawEncodedImage);
 ```
@@ -99,7 +103,10 @@ This example iterates through all encoded versions of the image and writes them
 const newImagePath = '/path/to/image.'; //extension is added automatically
 
 for (const encodedImage of Object.values(image.encodedWith)) {
-  fs.writeFile(newImagePath + encodedImage.extension, encodedImage.binary);
+  fs.writeFile(
+    newImagePath + (await encodedImage).extension,
+    (await encodedImage).binary,
+  );
 }
 ```
 
@@ -128,7 +135,7 @@ console.log(await image.decoded);
 Information about an encoded image can be found at `Image.encodedWith[encoderName]`. It looks something like this:
 
 ```js
-console.log(image.encodedWith.jxl);
+console.log(await image.encodedWith.jxl);
 // Returns:
 {
   optionsUsed: {

libsquoosh/lib/move-d-ts.js

@@ -1,26 +0,0 @@
-const fs = require('fs');
-const del = require('del');
-const path = require('path');
-
-const tsOutputDir = path.resolve('..', '.tmp', 'ts', 'libsquoosh');
-const tsOutputSourceDir = path.join(tsOutputDir, 'src');
-const buildDir = path.resolve('build');
-
-(async () => {
-  await del(path.join(buildDir, '*.d.ts'));
-  const files = await fs.promises.readdir(tsOutputSourceDir);
-
-  const movePromises = [];
-  for (const file of files) {
-    if (file.endsWith('d.ts') || file.endsWith('d.ts.map')) {
-      movePromises.push(
-        fs.promises.rename(
-          path.join(tsOutputSourceDir, file),
-          path.join(buildDir, file),
-        ),
-      );
-    }
-  }
-  // We need to remove `tsconfig.tsbuildinfo` otherwise TS does not emit unchanged `.d.ts` files
-  await del([path.join(tsOutputDir, 'tsconfig.tsbuildinfo')], { force: true });
-})();

libsquoosh/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@squoosh/lib",
-  "version": "0.5.0",
+  "version": "0.4.0",
   "description": "A Node library for Squoosh",
   "public": true,
   "main": "./build/index.js",
-  "types": "./build/index.d.ts",
   "files": [
     "/build/*"
   ],
   "scripts": {
-    "build": "rollup -c && node lib/move-d-ts.js"
+    "build": "rollup -c"
   },
   "keywords": [],
   "author": "Google Chrome Developers <chromium-dev@google.com>",

libsquoosh/src/codecs.ts

@@ -419,7 +419,6 @@ export const codecs = {
       lossyPalette: false,
       decodingSpeedTier: 0,
       photonNoiseIso: 0,
-      lossyModular: false,
     },
     autoOptimize: {
       option: 'quality',

libsquoosh/src/index.ts

@@ -22,10 +22,9 @@ type EncoderKey = keyof typeof encoders;
 type PreprocessorKey = keyof typeof preprocessors;
 
 type PreprocessOptions = {
-  resize?: Partial<Omit<ResizeOptions, 'width' | 'height'>> &
-    (Pick<ResizeOptions, 'width'> | Pick<ResizeOptions, 'height'>);
-  quant?: Partial<QuantOptions>;
-  rotate?: Partial<RotateOptions>;
+  resize?: ResizeOptions;
+  quant?: QuantOptions;
+  rotate?: RotateOptions;
 };
 type EncodeResult = {
   optionsUsed: object;

libsquoosh/tsconfig.json

@@ -3,8 +3,7 @@
   "compilerOptions": {
     "lib": ["esnext"],
     "types": ["node"],
-    "allowJs": true,
-    "declaration": true
+    "allowJs": true
   },
   "include": ["src/**/*", "../codecs/**/*"]
 }

package-lock.json

@@ -5,9 +5,11 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "squoosh",
       "version": "2.0.0",
       "license": "apache-2.0",
       "dependencies": {
+        "strict-csp": "^1.0.4",
         "wasm-feature-detect": "^1.2.11"
       },
       "devDependencies": {
@@ -286,6 +288,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/@types/cheerio": {
+      "version": "0.22.30",
+      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.30.tgz",
+      "integrity": "sha512-t7ZVArWZlq3dFa9Yt33qFBQIK4CQd1Q3UJp0V+UhP6vgLWLM6Qug7vZuRSGXg45zXeB1Fm5X2vmBkEX58LV2Tw==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@@ -329,8 +339,7 @@
     "node_modules/@types/node": {
       "version": "16.11.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.1.tgz",
-      "integrity": "sha512-PYGcJHL9mwl1Ek3PLiYgyEKtwTMmkMw4vbiyz/ps3pfdRYLVv+SN7qHVAImrjdAXxgluDEw6Ph4lyv+m9UpRmA==",
-      "dev": true
+      "integrity": "sha512-PYGcJHL9mwl1Ek3PLiYgyEKtwTMmkMw4vbiyz/ps3pfdRYLVv+SN7qHVAImrjdAXxgluDEw6Ph4lyv+m9UpRmA=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -594,8 +603,7 @@
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
-      "dev": true
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
     "node_modules/boxen": {
       "version": "1.3.0",
@@ -866,6 +874,144 @@
         "node": ">=4"
       }
     },
+    "node_modules/cheerio": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.10.tgz",
+      "integrity": "sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==",
+      "dependencies": {
+        "cheerio-select": "^1.5.0",
+        "dom-serializer": "^1.3.2",
+        "domhandler": "^4.2.0",
+        "htmlparser2": "^6.1.0",
+        "parse5": "^6.0.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.1",
+        "tslib": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-1.5.0.tgz",
+      "integrity": "sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==",
+      "dependencies": {
+        "css-select": "^4.1.3",
+        "css-what": "^5.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0",
+        "domutils": "^2.7.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/css-select": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.0.tgz",
+      "integrity": "sha512-6YVG6hsH9yIb/si3Th/is8Pex7qnVHO6t7q7U6TIUnkQASGbS8tnUDBftnPynLNnuUl/r2+PTd0ekiiq7R0zJw==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^5.1.0",
+        "domhandler": "^4.3.0",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/css-what": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
+      "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/dom-serializer": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/cheerio-select/node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select/node_modules/nth-check": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
+      "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/dom-serializer": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/cheerio/node_modules/domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/cheerio/node_modules/tslib": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -1975,6 +2121,31 @@
       "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
       "dev": true
     },
+    "node_modules/domhandler": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz",
+      "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domhandler/node_modules/domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
     "node_modules/domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@@ -2066,8 +2237,7 @@
     "node_modules/entities": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
-      "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==",
-      "dev": true
+      "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
     },
     "node_modules/error-ex": {
       "version": "1.3.2",
@@ -2438,6 +2608,61 @@
       "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==",
       "dev": true
     },
+    "node_modules/htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/dom-serializer": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/htmlparser2/node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/human-signals": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
@@ -3678,6 +3903,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
+      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
+      "dependencies": {
+        "parse5": "^6.0.1"
+      }
+    },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -7954,6 +8192,15 @@
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
       "dev": true
     },
+    "node_modules/strict-csp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/strict-csp/-/strict-csp-1.0.4.tgz",
+      "integrity": "sha512-CDAq0Zpg3XtJtUxjuOgKK2UgBnW03HDIFyb0rwpxNuQdYC8JquMfnGGhNZcbq22iYzVg6eCgqBScebA6MtwRdg==",
+      "dependencies": {
+        "@types/cheerio": "^0.22.23",
+        "cheerio": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/string-argv": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",
@@ -8874,6 +9121,14 @@
         }
       }
     },
+    "@types/cheerio": {
+      "version": "0.22.30",
+      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.30.tgz",
+      "integrity": "sha512-t7ZVArWZlq3dFa9Yt33qFBQIK4CQd1Q3UJp0V+UhP6vgLWLM6Qug7vZuRSGXg45zXeB1Fm5X2vmBkEX58LV2Tw==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@@ -8917,8 +9172,7 @@
     "@types/node": {
       "version": "16.11.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.1.tgz",
-      "integrity": "sha512-PYGcJHL9mwl1Ek3PLiYgyEKtwTMmkMw4vbiyz/ps3pfdRYLVv+SN7qHVAImrjdAXxgluDEw6Ph4lyv+m9UpRmA==",
-      "dev": true
+      "integrity": "sha512-PYGcJHL9mwl1Ek3PLiYgyEKtwTMmkMw4vbiyz/ps3pfdRYLVv+SN7qHVAImrjdAXxgluDEw6Ph4lyv+m9UpRmA=="
     },
     "@types/parse-json": {
       "version": "4.0.0",
@@ -9141,8 +9395,7 @@
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
-      "dev": true
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
     "boxen": {
       "version": "1.3.0",
@@ -9357,6 +9610,106 @@
         "supports-color": "^7.1.0"
       }
     },
+    "cheerio": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.10.tgz",
+      "integrity": "sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==",
+      "requires": {
+        "cheerio-select": "^1.5.0",
+        "dom-serializer": "^1.3.2",
+        "domhandler": "^4.2.0",
+        "htmlparser2": "^6.1.0",
+        "parse5": "^6.0.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.1",
+        "tslib": "^2.2.0"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+          "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.2.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
+        },
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+        }
+      }
+    },
+    "cheerio-select": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-1.5.0.tgz",
+      "integrity": "sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==",
+      "requires": {
+        "css-select": "^4.1.3",
+        "css-what": "^5.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0",
+        "domutils": "^2.7.0"
+      },
+      "dependencies": {
+        "css-select": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.0.tgz",
+          "integrity": "sha512-6YVG6hsH9yIb/si3Th/is8Pex7qnVHO6t7q7U6TIUnkQASGbS8tnUDBftnPynLNnuUl/r2+PTd0ekiiq7R0zJw==",
+          "requires": {
+            "boolbase": "^1.0.0",
+            "css-what": "^5.1.0",
+            "domhandler": "^4.3.0",
+            "domutils": "^2.8.0",
+            "nth-check": "^2.0.1"
+          }
+        },
+        "css-what": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
+          "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw=="
+        },
+        "dom-serializer": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+          "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.2.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
+        },
+        "domutils": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+          "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+          "requires": {
+            "dom-serializer": "^1.0.1",
+            "domelementtype": "^2.2.0",
+            "domhandler": "^4.2.0"
+          }
+        },
+        "nth-check": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
+          "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
+          "requires": {
+            "boolbase": "^1.0.0"
+          }
+        }
+      }
+    },
     "clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -10278,6 +10631,21 @@
       "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
       "dev": true
     },
+    "domhandler": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz",
+      "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==",
+      "requires": {
+        "domelementtype": "^2.2.0"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
+        }
+      }
+    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@@ -10353,8 +10721,7 @@
     "entities": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
-      "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==",
-      "dev": true
+      "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
     },
     "error-ex": {
       "version": "1.3.2",
@@ -10666,6 +11033,44 @@
       "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==",
       "dev": true
     },
+    "htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+          "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.2.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
+        },
+        "domutils": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+          "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+          "requires": {
+            "dom-serializer": "^1.0.1",
+            "domelementtype": "^2.2.0",
+            "domhandler": "^4.2.0"
+          }
+        }
+      }
+    },
     "human-signals": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
@@ -11662,6 +12067,19 @@
         "lines-and-columns": "^1.1.6"
       }
     },
+    "parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+    },
+    "parse5-htmlparser2-tree-adapter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
+      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
+      "requires": {
+        "parse5": "^6.0.1"
+      }
+    },
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -15261,6 +15679,15 @@
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
       "dev": true
     },
+    "strict-csp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/strict-csp/-/strict-csp-1.0.4.tgz",
+      "integrity": "sha512-CDAq0Zpg3XtJtUxjuOgKK2UgBnW03HDIFyb0rwpxNuQdYC8JquMfnGGhNZcbq22iYzVg6eCgqBScebA6MtwRdg==",
+      "requires": {
+        "@types/cheerio": "^0.22.23",
+        "cheerio": "^1.0.0-rc.5"
+      }
+    },
     "string-argv": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",

package.json

@@ -54,6 +54,7 @@
     "*.rs": "rustfmt"
   },
   "dependencies": {
+    "strict-csp": "^1.0.4",
     "wasm-feature-detect": "^1.2.11"
   }
 }

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

@@ -11,11 +11,7 @@ export default class Checkbox extends Component<Props, State> {
     return (
       <div class={style.checkbox}>
         {props.checked ? (
-          props.disabled ? (
-            <CheckedIcon class={`${style.icon} ${style.disabled}`} />
-          ) : (
-            <CheckedIcon class={`${style.icon} ${style.checked}`} />
-          )
+          <CheckedIcon class={`${style.icon} ${style.checked}`} />
         ) : (
           <UncheckedIcon class={style.icon} />
         )}

src/client/lazy-app/Compress/Options/Checkbox/style.css

@@ -20,7 +20,3 @@
 .checked {
   fill: var(--main-theme-color);
 }
-
-.disabled {
-  fill: var(--dark-gray);
-}

src/features/encoders/jxl/client/index.tsx

@@ -30,7 +30,6 @@ interface State {
   autoEdgePreservingFilter: boolean;
   decodingSpeedTier: number;
   photonNoiseIso: number;
-  alternativeLossy: boolean;
 }
 
 export class Options extends Component<Props, State> {
@@ -56,7 +55,6 @@ export class Options extends Component<Props, State> {
       autoEdgePreservingFilter: options.epf === -1,
       decodingSpeedTier: options.decodingSpeedTier,
       photonNoiseIso: options.photonNoiseIso,
-      alternativeLossy: options.lossyModular,
     };
   }
 
@@ -98,7 +96,6 @@ export class Options extends Component<Props, State> {
           lossyPalette: optionState.lossless ? optionState.slightLoss : false,
           decodingSpeedTier: optionState.decodingSpeedTier,
           photonNoiseIso: optionState.photonNoiseIso,
-          lossyModular: optionState.quality < 7 ? true : optionState.alternativeLossy,
         };
 
         // Updating options, so we don't recalculate in getDerivedStateFromProps.
@@ -125,7 +122,6 @@ export class Options extends Component<Props, State> {
       autoEdgePreservingFilter,
       decodingSpeedTier,
       photonNoiseIso,
-      alternativeLossy,
     }: State,
   ) {
     // I'm rendering both lossy and lossless forms, as it becomes much easier when
@@ -166,14 +162,6 @@ export class Options extends Component<Props, State> {
                   Quality:
                 </Range>
               </div>
-              <label class={style.optionToggle}>
-                Alternative lossy mode
-                <Checkbox
-                  checked={quality < 7 ? true : alternativeLossy}
-                  disabled={quality < 7}
-                  onChange={this._inputChange('alternativeLossy', 'boolean')}
-                />
-              </label>
               <label class={style.optionToggle}>
                 Auto edge filter
                 <Checkbox
@@ -235,7 +223,7 @@ export class Options extends Component<Props, State> {
         </label>
         <div class={style.optionOneCell}>
           <Range
-            min="1"
+            min="3"
             max="9"
             value={effort}
             onInput={this._inputChange('effort', 'number')}

src/features/encoders/jxl/shared/meta.ts

@@ -25,5 +25,4 @@ export const defaultOptions: EncodeOptions = {
   lossyPalette: false,
   decodingSpeedTier: 0,
   photonNoiseIso: 0,
-  lossyModular: false,
 };

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">

src/static-build/utils.tsx

@@ -16,8 +16,35 @@ import { join as joinPath } from 'path';
 import render from 'preact-render-to-string';
 import { VNode } from 'preact';
 
+import { StrictCsp } from 'strict-csp';
+
 export function renderPage(vnode: VNode) {
-  return '<!DOCTYPE html>' + render(vnode);
+  const htmlString = '<!DOCTYPE html>' + render(vnode);
+  const htmlStringWithCsp = addCspAsMetaTag(htmlString);
+  return htmlStringWithCsp;
+}
+
+/**
+ * Add to the html string a strict Content-Security-Policy (CSP), as a meta tag.
+ * Details at https://web.dev/strict-csp/
+ */
+function addCspAsMetaTag(htmlString: string) {
+  const s = new StrictCsp(htmlString);
+  // Refactor sourced scripts so that we can set a strict CSP
+  s.refactorSourcedScriptsForHashBasedCsp();
+  // Hash inline scripts from this html file, if there are any
+  const scriptHashes = s.hashAllInlineScripts();
+  // Generate a strict CSP as a string
+  // enableUnsafeEval is set to true, to accomodate for uses of eval by emscripten. This makes the CSP a bit less secure
+  const strictCsp = StrictCsp.getStrictCsp(scriptHashes, {
+    enableBrowserFallbacks: true,
+    enableTrustedTypes: false,
+    enableUnsafeEval: true,
+  });
+  // Set this CSP via a meta tag
+  s.addMetaTag(strictCsp);
+  const htmlStringWithCsp = s.serializeDom();
+  return htmlStringWithCsp;
 }
 
 interface OutputMap {