Bump postcss from 7.0.35 to 8.4.31

Bumps [postcss](https://github.com/postcss/postcss) from 7.0.35 to 8.4.31. - [Release notes](https://github.com/postcss/postcss/releases) - [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/postcss/postcss/compare/7.0.35...8.4.31) --- updated-dependencies: - dependency-name: postcss dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com>
Adding the Quite OK Image (QOI) Codec (#1384 )
2023-10-20 08:30:03 +00:00 · 2023-10-20 09:28:59 +01:00 · 2023-09-29 14:03:28 +01:00 · 2023-04-12 14:31:49 -07:00 · 2023-04-12 23:13:11 +02:00 · 2023-04-12 09:11:16 -07:00
46 changed files with 834 additions and 194 deletions
--- a/codecs/avif/Makefile
+++ b/codecs/avif/Makefile
@@ -1,9 +1,9 @@
 # libavif and libaom versions are from
-# https://docs.google.com/document/d/1wEEA5rRU7wT54k41u3qyZIZHDCJArIMzLuzsrLAwaK8/edit
-CODEC_URL = https://github.com/AOMediaCodec/libavif/archive/1c39e772c2c0d687691dd4b589a12c323f5f767d.tar.gz
+# google3/third_party/libavif/METADATA
+CODEC_URL = https://github.com/AOMediaCodec/libavif/archive/647c3c208cf152395d777c1bf7240d2ecf7df5a9.tar.gz
 CODEC_PACKAGE = node_modules/libavif.tar.gz

-LIBAOM_URL = https://aomedia.googlesource.com/aom/+archive/v3.1.0.tar.gz
+LIBAOM_URL = https://aomedia.googlesource.com/aom/+archive/v3.6.0.tar.gz
 LIBAOM_PACKAGE = node_modules/libaom.tar.gz

 export CODEC_DIR = node_modules/libavif
--- a/codecs/avif/dec/avif_dec.js
+++ b/codecs/avif/dec/avif_dec.js
--- a/codecs/avif/dec/avif_dec.wasm
+++ b/codecs/avif/dec/avif_dec.wasm
--- a/codecs/avif/dec/avif_node_dec.js
+++ b/codecs/avif/dec/avif_node_dec.js
--- a/codecs/avif/dec/avif_node_dec.wasm
+++ b/codecs/avif/dec/avif_node_dec.wasm
--- a/codecs/avif/enc/avif_enc.js
+++ b/codecs/avif/enc/avif_enc.js
--- a/codecs/avif/enc/avif_enc.wasm
+++ b/codecs/avif/enc/avif_enc.wasm
--- a/codecs/avif/enc/avif_enc_mt.js
+++ b/codecs/avif/enc/avif_enc_mt.js
--- a/codecs/avif/enc/avif_enc_mt.wasm
+++ b/codecs/avif/enc/avif_enc_mt.wasm
--- a/codecs/avif/enc/avif_node_enc.js
+++ b/codecs/avif/enc/avif_node_enc.js
--- a/codecs/avif/enc/avif_node_enc.wasm
+++ b/codecs/avif/enc/avif_node_enc.wasm
--- a/codecs/avif/enc/avif_node_enc_mt.js
+++ b/codecs/avif/enc/avif_node_enc_mt.js
--- a/codecs/avif/enc/avif_node_enc_mt.wasm
+++ b/codecs/avif/enc/avif_node_enc_mt.wasm
--- a/codecs/qoi/Makefile
+++ b/codecs/qoi/Makefile
@@ -0,0 +1,42 @@
+CODEC_URL = https://github.com/phoboslab/qoi/archive/8d35d93cdca85d2868246c2a8a80a1e2c16ba2a8.tar.gz
+
+CODEC_DIR = node_modules/qoi
+CODEC_BUILD_DIR:= $(CODEC_DIR)/build
+ENVIRONMENT = worker
+
+OUT_JS = enc/qoi_enc.js dec/qoi_dec.js
+OUT_WASM := $(OUT_JS:.js=.wasm)
+
+.PHONY: all clean
+
+all: $(OUT_JS)
+
+$(filter enc/%,$(OUT_JS)): enc/qoi_enc.o
+$(filter dec/%,$(OUT_JS)): dec/qoi_dec.o
+
+# ALL .js FILES
+$(OUT_JS):
+	$(LD) \
+		$(LDFLAGS) \
+		--bind \
+		-s ENVIRONMENT=$(ENVIRONMENT) \
+		-s EXPORT_ES6=1 \
+		-o $@ \
+		$+
+
+# ALL .o FILES
+%.o: %.cpp $(CODEC_DIR)
+	$(CXX) -c \
+		$(CXXFLAGS) \
+		-I $(CODEC_DIR) \
+		-o $@ \
+		$<
+
+# CREATE DIRECTORY
+$(CODEC_DIR):
+	mkdir -p $(CODEC_DIR)
+	curl -sL $(CODEC_URL) | tar xz --strip 1 -C $(CODEC_DIR)
+
+clean:
+	$(RM) $(OUT_JS) $(OUT_WASM)
+	$(MAKE) -C $(CODEC_DIR) clean
--- a/codecs/qoi/dec/qoi_dec.cpp
+++ b/codecs/qoi/dec/qoi_dec.cpp
@@ -0,0 +1,30 @@
+#include <emscripten/bind.h>
+#include <emscripten/val.h>
+
+#define QOI_IMPLEMENTATION
+#include "qoi.h"
+
+using namespace emscripten;
+
+thread_local const val Uint8ClampedArray = val::global("Uint8ClampedArray");
+thread_local const val ImageData = val::global("ImageData");
+
+val decode(std::string qoiimage) {
+  qoi_desc desc;
+  uint8_t* rgba = (uint8_t*)qoi_decode(qoiimage.c_str(), qoiimage.length(), &desc, 4);
+
+  // Resultant width and height stored in descriptor
+  int decodedWidth = desc.width;
+  int decodedHeight = desc.height;
+
+  val result = ImageData.new_(
+      Uint8ClampedArray.new_(typed_memory_view(4 * decodedWidth * decodedHeight, rgba)),
+      decodedWidth, decodedHeight);
+  free(rgba);
+
+  return result;
+}
+
+EMSCRIPTEN_BINDINGS(my_module) {
+  function("decode", &decode);
+}
--- a/codecs/qoi/dec/qoi_dec.d.ts
+++ b/codecs/qoi/dec/qoi_dec.d.ts
@@ -0,0 +1,7 @@
+export interface QOIModule extends EmscriptenWasm.Module {
+  decode(data: BufferSource): ImageData | null;
+}
+
+declare var moduleFactory: EmscriptenWasm.ModuleFactory<QOIModule>;
+
+export default moduleFactory;
--- a/codecs/qoi/dec/qoi_dec.js
+++ b/codecs/qoi/dec/qoi_dec.js
--- a/codecs/qoi/dec/qoi_dec.wasm
+++ b/codecs/qoi/dec/qoi_dec.wasm
--- a/codecs/qoi/enc/qoi_enc.cpp
+++ b/codecs/qoi/enc/qoi_enc.cpp
@@ -0,0 +1,36 @@
+#include <emscripten/bind.h>
+#include <emscripten/val.h>
+
+#define QOI_IMPLEMENTATION
+#include "qoi.h"
+
+using namespace emscripten;
+
+struct QoiOptions {};
+
+thread_local const val Uint8Array = val::global("Uint8Array");
+
+val encode(std::string buffer, int width, int height, QoiOptions options) {
+  int compressedSizeInBytes;
+  qoi_desc desc;
+  desc.width = width;
+  desc.height = height;
+  desc.channels = 4;
+  desc.colorspace = QOI_SRGB;
+
+  uint8_t* encodedData = (uint8_t*)qoi_encode(buffer.c_str(), &desc, &compressedSizeInBytes);
+  if (encodedData == NULL)
+    return val::null();
+
+  auto js_result =
+      Uint8Array.new_(typed_memory_view(compressedSizeInBytes, (const uint8_t*)encodedData));
+  free(encodedData);
+
+  return js_result;
+}
+
+EMSCRIPTEN_BINDINGS(my_module) {
+  value_object<QoiOptions>("QoiOptions");
+
+  function("encode", &encode);
+}
--- a/codecs/qoi/enc/qoi_enc.d.ts
+++ b/codecs/qoi/enc/qoi_enc.d.ts
@@ -0,0 +1,14 @@
+export interface EncodeOptions {}
+
+export interface QoiModule extends EmscriptenWasm.Module {
+    encode(
+        data: BufferSource,
+        width: number,
+        height: number,
+        options: EncodeOptions,
+    ): Uint8Array;
+}
+
+declare var moduleFactory: EmscriptenWasm.ModuleFactory<QoiModule>;
+
+export default moduleFactory;
--- a/codecs/qoi/enc/qoi_enc.js
+++ b/codecs/qoi/enc/qoi_enc.js
--- a/codecs/qoi/enc/qoi_enc.wasm
+++ b/codecs/qoi/enc/qoi_enc.wasm
--- a/codecs/qoi/package.json
+++ b/codecs/qoi/package.json
@@ -0,0 +1,7 @@
+{
+    "name": "qoi",
+    "scripts": {
+      "build": "../build-cpp.sh"
+    }
+  }
+  
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,6 @@
      "name": "squoosh",
      "version": "2.0.0",
      "license": "apache-2.0",
-      "dependencies": {
-        "wasm-feature-detect": "^1.2.11"
-      },
      "devDependencies": {
        "@rollup/plugin-commonjs": "^17.0.0",
        "@rollup/plugin-node-resolve": "^11.1.0",
@@ -34,7 +31,7 @@
        "mime-types": "^2.1.28",
        "npm-run-all": "^4.1.5",
        "pointer-tracker": "^2.5.3",
-        "postcss": "^7.0.35",
+        "postcss": "^8.4.31",
        "postcss-modules": "^3.2.2",
        "postcss-nested": "^4.2.3",
        "postcss-simple-vars": "^5.0.2",
@@ -46,6 +43,7 @@
        "rollup-plugin-terser": "^7.0.2",
        "serve": "^11.3.2",
        "typescript": "^4.4.4",
+        "wasm-feature-detect": "^1.2.11",
        "which": "^2.0.2"
      }
    },
@@ -3326,6 +3324,24 @@
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
      "dev": true
    },
+    "node_modules/nanoid": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
    "node_modules/negotiator": {
      "version": "0.6.2",
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -3724,6 +3740,12 @@
        "node": ">=8"
      }
    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
    "node_modules/picomatch": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
@@ -3770,17 +3792,31 @@
      "dev": true
    },
    "node_modules/postcss": {
-      "version": "7.0.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-      "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
      "dependencies": {
-        "chalk": "^2.4.2",
-        "source-map": "^0.6.1",
-        "supports-color": "^6.1.0"
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
      },
      "engines": {
-        "node": ">=6.0.0"
+        "node": "^10 || ^12 || >=14"
      }
    },
    "node_modules/postcss-calc": {
@@ -5688,6 +5724,29 @@
        "postcss-selector-parser": "^6.0.2"
      }
    },
+    "node_modules/postcss-nested/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "dev": true
+    },
+    "node_modules/postcss-nested/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
    "node_modules/postcss-normalize-charset": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
@@ -6997,6 +7056,29 @@
        "postcss": "^7.0.14"
      }
    },
+    "node_modules/postcss-simple-vars/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "dev": true
+    },
+    "node_modules/postcss-simple-vars/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
    "node_modules/postcss-svgo": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.2.tgz",
@@ -7318,80 +7400,6 @@
      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
      "dev": true
    },
-    "node_modules/postcss/node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss/node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss/node_modules/chalk/node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss/node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
-    "node_modules/postcss/node_modules/color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
-    },
-    "node_modules/postcss/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss/node_modules/supports-color": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/preact": {
      "version": "10.5.5",
      "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.5.tgz",
@@ -7895,6 +7903,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/source-map-support": {
      "version": "0.5.19",
      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
@@ -8561,7 +8578,8 @@
    "node_modules/wasm-feature-detect": {
      "version": "1.2.11",
      "resolved": "https://registry.npmjs.org/wasm-feature-detect/-/wasm-feature-detect-1.2.11.tgz",
-      "integrity": "sha512-HUqwaodrQGaZgz1lZaNioIkog9tkeEJjrM3eq4aUL04whXOVDRc/o2EGb/8kV0QX411iAYWEqq7fMBmJ6dKS6w=="
+      "integrity": "sha512-HUqwaodrQGaZgz1lZaNioIkog9tkeEJjrM3eq4aUL04whXOVDRc/o2EGb/8kV0QX411iAYWEqq7fMBmJ6dKS6w==",
+      "dev": true
    },
    "node_modules/which": {
      "version": "2.0.2",
@@ -11385,6 +11403,12 @@
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
      "dev": true
    },
+    "nanoid": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "dev": true
+    },
    "negotiator": {
      "version": "0.6.2",
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -11699,6 +11723,12 @@
      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
      "dev": true
    },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
    "picomatch": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
@@ -11733,77 +11763,14 @@
      "dev": true
    },
    "postcss": {
-      "version": "7.0.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
-      "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
      "dev": true,
      "requires": {
-        "chalk": "^2.4.2",
-        "source-map": "^0.6.1",
-        "supports-color": "^6.1.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          },
-          "dependencies": {
-            "supports-color": {
-              "version": "5.5.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-              "dev": true,
-              "requires": {
-                "has-flag": "^3.0.0"
-              }
-            }
-          }
-        },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "dev": true,
-          "requires": {
-            "color-name": "1.1.3"
-          }
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-          "dev": true
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
      }
    },
    "postcss-calc": {
@@ -13406,6 +13373,24 @@
      "requires": {
        "postcss": "^7.0.32",
        "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        }
      }
    },
    "postcss-normalize-charset": {
@@ -14508,6 +14493,24 @@
      "dev": true,
      "requires": {
        "postcss": "^7.0.14"
+      },
+      "dependencies": {
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        }
      }
    },
    "postcss-svgo": {
@@ -15202,6 +15205,12 @@
      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
      "dev": true
    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true
+    },
    "source-map-support": {
      "version": "0.5.19",
      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
@@ -15757,7 +15766,8 @@
    "wasm-feature-detect": {
      "version": "1.2.11",
      "resolved": "https://registry.npmjs.org/wasm-feature-detect/-/wasm-feature-detect-1.2.11.tgz",
-      "integrity": "sha512-HUqwaodrQGaZgz1lZaNioIkog9tkeEJjrM3eq4aUL04whXOVDRc/o2EGb/8kV0QX411iAYWEqq7fMBmJ6dKS6w=="
+      "integrity": "sha512-HUqwaodrQGaZgz1lZaNioIkog9tkeEJjrM3eq4aUL04whXOVDRc/o2EGb/8kV0QX411iAYWEqq7fMBmJ6dKS6w==",
+      "dev": true
    },
    "which": {
      "version": "2.0.2",
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
    "mime-types": "^2.1.28",
    "npm-run-all": "^4.1.5",
    "pointer-tracker": "^2.5.3",
-    "postcss": "^7.0.35",
+    "postcss": "^8.4.31",
    "postcss-modules": "^3.2.2",
    "postcss-nested": "^4.2.3",
    "postcss-simple-vars": "^5.0.2",
--- a/src/client/lazy-app/Compress/Options/Checkbox/style.css
+++ b/src/client/lazy-app/Compress/Options/Checkbox/style.css
@@ -2,6 +2,26 @@
  display: inline-block;
  position: relative;
  --size: 17px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 200%;
+    height: 200%;
+    background-color: var(--main-theme-color);
+    border-radius: 999px;
+    opacity: 0.25;
+
+    transform: translate(-50%, -50%) scale(0);
+    transition-property: transform;
+    transition-duration: 250ms;
+  }
+
+  &:focus-within::before {
+    transform: translate(-50%, -50%) scale(1);
+  }
 }

 .real-checkbox {
--- a/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/style.css
+++ b/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/style.css
@@ -47,6 +47,10 @@ range-input::before {
  height: 12px;
 }

+range-input:focus-within .thumb {
+  outline: white solid 2px;
+}
+
 .thumb-wrapper {
  position: absolute;
  left: 6px;
--- a/src/client/lazy-app/Compress/Options/Toggle/style.css
+++ b/src/client/lazy-app/Compress/Options/Toggle/style.css
@@ -11,6 +11,10 @@
  padding: 3px calc(var(--thumb-size) / 2 + 3px);
 }

+.checkbox:focus-within .track {
+  outline: white solid 2px;
+}
+
 .thumb {
  position: relative;
  width: var(--thumb-size);
--- a/src/client/lazy-app/Compress/Options/index.tsx
+++ b/src/client/lazy-app/Compress/Options/index.tsx
@@ -17,7 +17,7 @@ import Toggle from './Toggle';
 import Select from './Select';
 import { Options as QuantOptionsComponent } from 'features/processors/quantize/client';
 import { Options as ResizeOptionsComponent } from 'features/processors/resize/client';
-import { SwapIcon } from 'client/lazy-app/icons';
+import { ImportIcon, SaveIcon, SwapIcon } from 'client/lazy-app/icons';

 interface Props {
  index: 0 | 1;
@@ -29,10 +29,14 @@ interface Props {
  onEncoderOptionsChange(index: 0 | 1, newOptions: EncoderOptions): void;
  onProcessorOptionsChange(index: 0 | 1, newOptions: ProcessorState): void;
  onCopyToOtherSideClick(index: 0 | 1): void;
+  onSaveSideSettingsClick(index: 0 | 1): void;
+  onImportSideSettingsClick(index: 0 | 1): void;
 }

 interface State {
  supportedEncoderMap?: PartialButNotUndefined<typeof encoderMap>;
+  leftSideSettings?: string | null;
+  rightSideSettings?: string | null;
 }

 type PartialButNotUndefined<T> = {
@@ -60,6 +64,8 @@ const supportedEncoderMapP: Promise<PartialButNotUndefined<typeof encoderMap>> =
 export default class Options extends Component<Props, State> {
  state: State = {
    supportedEncoderMap: undefined,
+    leftSideSettings: localStorage.getItem('leftSideSettings'),
+    rightSideSettings: localStorage.getItem('rightSideSettings'),
  };

  constructor() {
@@ -69,6 +75,29 @@ export default class Options extends Component<Props, State> {
    );
  }

+  private setLeftSideSettings = () => {
+    this.setState({
+      leftSideSettings: localStorage.getItem('leftSideSettings'),
+    });
+  };
+
+  private setRightSideSettings = () => {
+    this.setState({
+      rightSideSettings: localStorage.getItem('rightSideSettings'),
+    });
+  };
+
+  componentDidMount(): void {
+    // Changing the state when side setting is stored in localstorage
+    window.addEventListener('leftSideSettings', this.setLeftSideSettings);
+    window.addEventListener('rightSideSettings', this.setRightSideSettings);
+  }
+
+  componentWillUnmount(): void {
+    window.removeEventListener('leftSideSettings', this.setLeftSideSettings);
+    window.removeEventListener('removeSideSettings', this.setRightSideSettings);
+  }
+
  private onEncoderTypeChange = (event: Event) => {
    const el = event.currentTarget as HTMLSelectElement;

@@ -110,6 +139,14 @@ export default class Options extends Component<Props, State> {
    this.props.onCopyToOtherSideClick(this.props.index);
  };

+  private onSaveSideSettingClick = () => {
+    this.props.onSaveSideSettingsClick(this.props.index);
+  };
+
+  private onImportSideSettingsClick = () => {
+    this.props.onImportSideSettingsClick(this.props.index);
+  };
+
  render(
    { source, encoderState, processorState }: Props,
    { supportedEncoderMap }: State,
@@ -139,6 +176,36 @@ export default class Options extends Component<Props, State> {
                  >
                    <SwapIcon />
                  </button>
+                  <button
+                    class={style.saveButton}
+                    title="Save side settings"
+                    onClick={this.onSaveSideSettingClick}
+                  >
+                    <SaveIcon />
+                  </button>
+                  <button
+                    class={
+                      style.importButton +
+                      ' ' +
+                      (!this.state.leftSideSettings && this.props.index === 0
+                        ? style.buttonOpacity
+                        : '') +
+                      ' ' +
+                      (!this.state.rightSideSettings && this.props.index === 1
+                        ? style.buttonOpacity
+                        : '')
+                    }
+                    title="Import saved side settings"
+                    onClick={this.onImportSideSettingsClick}
+                    disabled={
+                      // Disabled if this side's settings haven't been saved
+                      (!this.state.leftSideSettings &&
+                        this.props.index === 0) ||
+                      (!this.state.rightSideSettings && this.props.index === 1)
+                    }
+                  >
+                    <ImportIcon />
+                  </button>
                </div>
              </h3>
              <label class={style.sectionEnabler}>
@@ -190,7 +257,9 @@ export default class Options extends Component<Props, State> {
              onChange={this.onEncoderTypeChange}
              large
            >
-              <option value="identity">Original Image</option>
+              <option value="identity">{`Original Image ${
+                this.props.source ? `(${this.props.source.file.name})` : ''
+              }`}</option>
              {Object.entries(supportedEncoderMap).map(([type, encoder]) => (
                <option value={type}>{encoder.meta.label}</option>
              ))}
--- a/src/client/lazy-app/Compress/Options/style.css
+++ b/src/client/lazy-app/Compress/Options/style.css
@@ -53,6 +53,16 @@
  composes: option-toggle;
  grid-template-columns: auto 1fr;
  gap: 1em;
+
+  border-top: 1px solid #fff4;
+
+  transition-property: background-color;
+  transition-duration: 250ms;
+}
+
+.option-reveal:focus-within,
+.option-reveal:hover {
+  background-color: #fff2;
 }

 .option-one-cell {
@@ -73,11 +83,11 @@
 }

 .text-field {
-  background: var(--white);
-  color: var(--black);
+  background-color: var(--black);
+  color: var(--white);
  font: inherit;
  border: none;
-  padding: 6px 0 6px 10px;
+  padding: 6px 6px 6px 10px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
@@ -112,7 +122,37 @@
 .copy-over-button {
  composes: title-button;

+  /* Make the filled arrow point towards the other options element */
+  transform: rotate(var(--rotate-copyoverbutton-angle));
+
  svg {
    fill: var(--header-text-color);
  }
+
+  &:focus {
+    outline: var(--header-text-color) solid 2px;
+    outline-offset: 0.25em;
+  }
+}
+
+.save-button,
+.import-button {
+  composes: title-button;
+
+  svg {
+    stroke: var(--header-text-color);
+  }
+
+  &:focus {
+    outline: var(--header-text-color) solid 2px;
+    outline-offset: 0.25em;
+  }
+}
+
+.button-opacity {
+  pointer-events: none;
+  cursor: not-allowed;
+  svg {
+    opacity: 0.5;
+  }
 }
--- a/src/client/lazy-app/Compress/index.tsx
+++ b/src/client/lazy-app/Compress/index.tsx
@@ -111,6 +111,9 @@ async function decodeImage(
      if (mimeType === 'image/webp2') {
        return await workerBridge.wp2Decode(signal, blob);
      }
+      if (mimeType === 'image/qoi') {
+        return await workerBridge.qoiDecode(signal, blob);
+      }
    }
    // Otherwise fall through and try built-in decoding for a laugh.
    return await builtinDecode(signal, blob);
@@ -281,24 +284,35 @@ export default class Compress extends Component<Props, State> {
    source: undefined,
    loading: false,
    preprocessorState: defaultPreprocessorState,
+    // Tasking catched side settings if available otherwise taking default settings
    sides: [
-      {
-        latestSettings: {
-          processorState: defaultProcessorState,
-          encoderState: undefined,
-        },
-        loading: false,
-      },
-      {
-        latestSettings: {
-          processorState: defaultProcessorState,
-          encoderState: {
-            type: 'mozJPEG',
-            options: encoderMap.mozJPEG.meta.defaultOptions,
+      localStorage.getItem('leftSideSettings')
+        ? {
+            ...JSON.parse(localStorage.getItem('leftSideSettings') as string),
+            loading: false,
+          }
+        : {
+            latestSettings: {
+              processorState: defaultProcessorState,
+              encoderState: undefined,
+            },
+            loading: false,
+          },
+      localStorage.getItem('rightSideSettings')
+        ? {
+            ...JSON.parse(localStorage.getItem('rightSideSettings') as string),
+            loading: false,
+          }
+        : {
+            latestSettings: {
+              processorState: defaultProcessorState,
+              encoderState: {
+                type: 'mozJPEG',
+                options: encoderMap.mozJPEG.meta.defaultOptions,
+              },
+            },
+            loading: false,
          },
-        },
-        loading: false,
-      },
    ],
    mobileView: this.widthQuery.matches,
  };
@@ -428,6 +442,99 @@ export default class Compress extends Component<Props, State> {
      sides: cleanSet(this.state.sides, otherIndex, oldSettings),
    });
  };
+  /**
+   * This function saves encodedSettings and latestSettings of
+   * particular side in browser local storage
+   * @param index : (0|1)
+   * @returns
+   */
+  private onSaveSideSettingsClick = async (index: 0 | 1) => {
+    if (index === 0) {
+      const leftSideSettings = JSON.stringify({
+        encodedSettings: this.state.sides[index].encodedSettings,
+        latestSettings: this.state.sides[index].latestSettings,
+      });
+      localStorage.setItem('leftSideSettings', leftSideSettings);
+      // Firing an event when we save side settings in localstorage
+      window.dispatchEvent(new CustomEvent('leftSideSettings'));
+      await this.props.showSnack('Left side settings saved', {
+        timeout: 1500,
+        actions: ['dismiss'],
+      });
+      return;
+    }
+
+    if (index === 1) {
+      const rightSideSettings = JSON.stringify({
+        encodedSettings: this.state.sides[index].encodedSettings,
+        latestSettings: this.state.sides[index].latestSettings,
+      });
+      localStorage.setItem('rightSideSettings', rightSideSettings);
+      // Firing an event when we save side settings in localstorage
+      window.dispatchEvent(new CustomEvent('rightSideSettings'));
+      await this.props.showSnack('Right side settings saved', {
+        timeout: 1500,
+        actions: ['dismiss'],
+      });
+      return;
+    }
+  };
+
+  /**
+   * This function sets the side state with catched localstorage
+   * value as per side index provided
+   * @param index : (0|1)
+   * @returns
+   */
+  private onImportSideSettingsClick = async (index: 0 | 1) => {
+    const leftSideSettingsString = localStorage.getItem('leftSideSettings');
+    const rightSideSettingsString = localStorage.getItem('rightSideSettings');
+
+    if (index === 0 && leftSideSettingsString) {
+      const oldLeftSideSettings = this.state.sides[index];
+      const newLeftSideSettings = {
+        ...this.state.sides[index],
+        ...JSON.parse(leftSideSettingsString),
+      };
+      this.setState({
+        sides: cleanSet(this.state.sides, index, newLeftSideSettings),
+      });
+      const result = await this.props.showSnack('Left side settings imported', {
+        timeout: 3000,
+        actions: ['undo', 'dismiss'],
+      });
+      if (result === 'undo') {
+        this.setState({
+          sides: cleanSet(this.state.sides, index, oldLeftSideSettings),
+        });
+      }
+      return;
+    }
+
+    if (index === 1 && rightSideSettingsString) {
+      const oldRightSideSettings = this.state.sides[index];
+      const newRightSideSettings = {
+        ...this.state.sides[index],
+        ...JSON.parse(rightSideSettingsString),
+      };
+      this.setState({
+        sides: cleanSet(this.state.sides, index, newRightSideSettings),
+      });
+      const result = await this.props.showSnack(
+        'Right side settings imported',
+        {
+          timeout: 3000,
+          actions: ['undo', 'dismiss'],
+        },
+      );
+      if (result === 'undo') {
+        this.setState({
+          sides: cleanSet(this.state.sides, index, oldRightSideSettings),
+        });
+      }
+      return;
+    }
+  };

  private onPreprocessorChange = async (
    preprocessorState: PreprocessorState,
@@ -829,6 +936,8 @@ export default class Compress extends Component<Props, State> {
        onEncoderOptionsChange={this.onEncoderOptionsChange}
        onProcessorOptionsChange={this.onProcessorOptionsChange}
        onCopyToOtherSideClick={this.onCopyToOtherClick}
+        onSaveSideSettingsClick={this.onSaveSideSettingsClick}
+        onImportSideSettingsClick={this.onImportSideSettingsClick}
      />
    ));

@@ -842,7 +951,7 @@ export default class Compress extends Component<Props, State> {
        typeLabel={
          side.latestSettings.encoderState
            ? encoderMap[side.latestSettings.encoderState.type].meta.label
-            : 'Original Image'
+            : `${side.file ? `${side.file.name}` : 'Original Image'}`
        }
      />
    ));
--- a/src/client/lazy-app/Compress/style.css
+++ b/src/client/lazy-app/Compress/style.css
@@ -45,9 +45,11 @@
  --hot-theme-color: var(--hot-pink);
  --header-text-color: var(--white);
  --scroller-radius: var(--options-radius) var(--options-radius) 0 0;
+  --rotate-copyoverbutton-angle: 90deg; /* To point down */

  @media (min-width: 600px) {
    --scroller-radius: 0 var(--options-radius) var(--options-radius) 0;
+    --rotate-copyoverbutton-angle: 0deg; /* To point right (no change) */
  }
 }

@@ -56,9 +58,11 @@
  --hot-theme-color: var(--deep-blue);
  --header-text-color: var(--dark-text);
  --scroller-radius: var(--options-radius) var(--options-radius) 0 0;
+  --rotate-copyoverbutton-angle: -90deg; /* To point up */

  @media (min-width: 600px) {
    --scroller-radius: var(--options-radius) 0 0 var(--options-radius);
+    --rotate-copyoverbutton-angle: 180deg; /* To point left */
  }
 }

@@ -109,6 +113,13 @@

  & > svg {
    width: 47px;
+    overflow: visible;
+  }
+
+  &:focus .back-blob {
+    stroke: var(--deep-blue);
+    stroke-width: 5px;
+    animation: strokePulse 500ms ease forwards;
  }

  @media (min-width: 600px) {
@@ -120,6 +131,15 @@
  }
 }

+@keyframes strokePulse {
+  from {
+    stroke-width: 8px;
+  }
+  to {
+    stroke-width: 5px;
+  }
+}
+
 .back-blob {
  fill: var(--hot-pink);
  opacity: 0.77;
--- a/src/client/lazy-app/icons/index.tsx
+++ b/src/client/lazy-app/icons/index.tsx
@@ -97,3 +97,31 @@ export const SwapIcon = () => (
    <path d="M5.5 3.6v6.8L2.1 7l3.4-3.4M7 0L0 7l7 7V0zm4 0v14l7-7-7-7z" />
  </svg>
 );
+
+export const SaveIcon = () => (
+  <svg viewBox="0 0 24 24">
+    <g
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    >
+      <path d="M12.501 20.93c-.866.25-1.914-.166-2.176-1.247a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.074.26 1.49 1.296 1.252 2.158M19 22v-6m3 3l-3-3l-3 3" />
+      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0" />
+    </g>
+  </svg>
+);
+
+export const ImportIcon = () => (
+  <svg viewBox="0 0 24 24">
+    <g
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    >
+      <path d="M12.52 20.924c-.87.262-1.93-.152-2.195-1.241a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.088.264 1.502 1.323 1.242 2.192M19 16v6m3-3l-3 3l-3-3" />
+      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0" />
+    </g>
+  </svg>
+);
--- a/src/client/lazy-app/util/index.ts
+++ b/src/client/lazy-app/util/index.ts
@@ -103,6 +103,7 @@ const magicNumberMapInput = [
  [/^\x00\x00\x00 ftypavif\x00\x00\x00\x00/, 'image/avif'],
  [/^\xff\x0a/, 'image/jxl'],
  [/^\x00\x00\x00\x0cJXL \x0d\x0a\x87\x0a/, 'image/jxl'],
+  [/^qoif/, 'image/qoi'],
 ] as const;

 export type ImageMimeTypes = typeof magicNumberMapInput[number][1];
--- a/src/features/decoders/qoi/worker/qoiDecode.ts
+++ b/src/features/decoders/qoi/worker/qoiDecode.ts
@@ -0,0 +1,19 @@
+import qoiDecoder, { QOIModule } from 'codecs/qoi/dec/qoi_dec';
+import { initEmscriptenModule, blobToArrayBuffer } from 'features/worker-utils';
+
+let emscriptenModule: Promise<QOIModule>;
+
+export default async function decode(blob: Blob): Promise<ImageData> {
+  if (!emscriptenModule) {
+    emscriptenModule = initEmscriptenModule(qoiDecoder);
+  }
+
+  const [module, data] = await Promise.all([
+    emscriptenModule,
+    blobToArrayBuffer(blob),
+  ]);
+
+  const result = module.decode(data);
+  if (!result) throw new Error('Decoding error');
+  return result;
+}
--- a/src/features/encoders/qoi/client/index.tsx
+++ b/src/features/encoders/qoi/client/index.tsx
@@ -0,0 +1,11 @@
+import { EncodeOptions } from '../shared/meta';
+import type WorkerBridge from 'client/lazy-app/worker-bridge';
+
+export function encode(
+  signal: AbortSignal,
+  workerBridge: WorkerBridge,
+  imageData: ImageData,
+  options: EncodeOptions,
+) {
+  return workerBridge.qoiEncode(signal, imageData, options);
+}
--- a/src/features/encoders/qoi/client/missing-types.d.ts
+++ b/src/features/encoders/qoi/client/missing-types.d.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/// <reference path="../../../../../missing-types.d.ts" />
--- a/src/features/encoders/qoi/shared/meta.ts
+++ b/src/features/encoders/qoi/shared/meta.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { EncodeOptions } from 'codecs/qoi/enc/qoi_enc';
+export { EncodeOptions };
+
+export const label = 'QOI';
+export const mimeType = 'image/qoi';
+export const extension = 'qoi';
+export const defaultOptions: EncodeOptions = {};
--- a/src/features/encoders/qoi/shared/missing-types.d.ts
+++ b/src/features/encoders/qoi/shared/missing-types.d.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/// <reference path="../../../../../missing-types.d.ts" />
--- a/src/features/encoders/qoi/worker/missing-types.d.ts
+++ b/src/features/encoders/qoi/worker/missing-types.d.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/// <reference path="../../../../../missing-types.d.ts" />
--- a/src/features/encoders/qoi/worker/qoiEncode.ts
+++ b/src/features/encoders/qoi/worker/qoiEncode.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import qoiEncoder, { QoiModule } from 'codecs/qoi/enc/qoi_enc';
+import type { EncodeOptions } from '../shared/meta';
+import { initEmscriptenModule } from 'features/worker-utils';
+
+let emscriptenModule: Promise<QoiModule>;
+
+async function init() {
+  return initEmscriptenModule(qoiEncoder);
+}
+
+export default async function encode(
+  data: ImageData,
+  options: EncodeOptions,
+): Promise<ArrayBuffer> {
+  if (!emscriptenModule) {
+    emscriptenModule = init();
+  }
+
+  const module = await emscriptenModule;
+  const resultView = module.encode(data.data, data.width, data.height, options);
+  // wasm can’t run on SharedArrayBuffers, so we hard-cast to ArrayBuffer.
+  return resultView.buffer as ArrayBuffer;
+}
--- a/src/shared/custom-els/snack-bar/styles.css
+++ b/src/shared/custom-els/snack-bar/styles.css
@@ -62,7 +62,7 @@ snack-bar {
  position: relative;
  flex: 0 1 auto;
  padding: 8px;
-  height: 36px;
+  height: 100%;
  margin: auto 8px auto -8px;
  min-width: 5em;
  background: none;
@@ -78,6 +78,7 @@ snack-bar {
  overflow: hidden;
  transition: background-color 200ms ease;
  outline: none;
+  text-decoration: none;
 }
 .button:hover {
  background-color: rgba(0, 0, 0, 0.15);
--- a/src/shared/prerendered-app/Intro/index.tsx
+++ b/src/shared/prerendered-app/Intro/index.tsx
@@ -24,28 +24,28 @@ import SlideOnScroll from './SlideOnScroll';
 const demos = [
  {
    description: 'Large photo',
-    size: '2.8mb',
+    size: '2.8MB',
    filename: 'photo.jpg',
    url: largePhoto,
    iconUrl: largePhotoIcon,
  },
  {
    description: 'Artwork',
-    size: '2.9mb',
+    size: '2.9MB',
    filename: 'art.jpg',
    url: artwork,
    iconUrl: artworkIcon,
  },
  {
    description: 'Device screen',
-    size: '1.6mb',
+    size: '1.6MB',
    filename: 'pixel3.png',
    url: deviceScreen,
    iconUrl: deviceScreenIcon,
  },
  {
    description: 'SVG icon',
-    size: '13k',
+    size: '13KB',
    filename: 'squoosh.svg',
    url: logo,
    iconUrl: logoIcon,
@@ -319,7 +319,7 @@ export default class Intro extends Component<Props, State> {
                    class="unbutton"
                    onClick={(event) => this.onDemoClick(i, event)}
                  >
-                    <div>
+                    <div class={style.demoContainer}>
                      <div class={style.demoIconContainer}>
                        <img
                          class={style.demoIcon}
--- a/src/shared/prerendered-app/Intro/style.css
+++ b/src/shared/prerendered-app/Intro/style.css
@@ -321,6 +321,13 @@
  }
 }

+.demo-container {
+  transition: scale 400ms ease-in-out;
+  &:hover {
+    scale: 1.05;
+  }
+}
+
 .demo-size {
  background: var(--dim-blue);
  border-radius: 1000px;
--- a/src/shared/prerendered-app/colors.css
+++ b/src/shared/prerendered-app/colors.css
@@ -18,3 +18,14 @@ html {
  /* Old stuff: */
  --button-fg: rgb(95, 180, 228);
 }
+
+@media (dynamic-range: high) {
+  @supports (color: oklch(0% 0 0)) {
+    html {
+      --pink: oklch(75% 0.3 3);
+      --hot-pink: oklch(65% 0.3 3);
+      --blue: oklch(75% 0.3 248);
+      --deep-blue: oklch(65% 0.3 248);
+    }
+  }
+}
--- a/src/static-build/pages/index/index.tsx
+++ b/src/static-build/pages/index/index.tsx
@@ -19,6 +19,8 @@ import favicon from 'url:static-build/assets/favicon.ico';
 import ogImage from 'url:static-build/assets/icon-large-maskable.png';
 import { escapeStyleScriptContent, siteOrigin } from 'static-build/utils';
 import Intro from 'shared/prerendered-app/Intro';
+import snackbarCss from 'css:../../../shared/custom-els/snack-bar/styles.css';
+import * as snackbarStyle from '../../../shared/custom-els/snack-bar/styles.css';

 interface Props {}

@@ -73,6 +75,29 @@ const Index: FunctionalComponent<Props> = () => (
    <body>
      <div id="app">
        <Intro />
+        <noscript>
+          <style
+            dangerouslySetInnerHTML={{
+              __html: escapeStyleScriptContent(snackbarCss),
+            }}
+          />
+          <snack-bar>
+            <div
+              class={snackbarStyle.snackbar}
+              aria-live="assertive"
+              aria-atomic="true"
+              aria-hidden="false"
+            >
+              <div class={snackbarStyle.text}>
+                Initialization error: This site requires JavaScript, which is
+                disabled in your browser.
+              </div>
+              <a class={snackbarStyle.button} href="/">
+                reload
+              </a>
+            </div>
+          </snack-bar>
+        </noscript>
      </div>
      <script
        dangerouslySetInnerHTML={{
Author	SHA1	Message	Date
dependabot[bot]	507e8b3612	Bump postcss from 7.0.35 to 8.4.31 Bumps [postcss](https://github.com/postcss/postcss) from 7.0.35 to 8.4.31. - [Release notes](https://github.com/postcss/postcss/releases) - [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/postcss/postcss/compare/7.0.35...8.4.31) --- updated-dependencies: - dependency-name: postcss dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com>	2023-10-20 08:30:03 +00:00
Aryan Pingle	d87eff7645	Adding the Quite OK Image (QOI) Codec (#1384 )	2023-10-20 09:28:59 +01:00
Adam Argyle	f374068fb2	check support and upgrade colors (#1356 )	2023-09-29 14:03:28 +01:00
Adam Argyle	ecc715fe55	Merge pull request #1362 from Frank-Mayer/593 added snack bar inside noscript element	2023-04-12 14:31:49 -07:00
Frank Mayer	82caed4277	Merge branch 'dev' into 593	2023-04-12 23:13:11 +02:00
Adam Argyle	a7dff9475d	Merge pull request #1348 from aryanpingle/keyboard-a11y Better Keyboard A11y + Navigation	2023-04-12 09:11:16 -07:00
robo-mop	d168f7a447	Add focus animation to back button	2023-04-12 13:52:36 +05:30
robo-mop	edf9cb755e	Add styles to save-import buttons	2023-04-12 13:52:36 +05:30
Frank-Mayer	a7503e69a2	better wording wor error message	2023-04-11 11:17:19 +02:00
Frank-Mayer	5a9733563e	more information in the error message	2023-04-11 11:12:04 +02:00
robo-mop	2000e16ba2	Make text-fields match the dark theme	2023-04-08 22:35:55 +05:30
robo-mop	7dbe0a7714	Add focus effects to inputs Provides better keyboard accessibility for: * Checkboxes * Range Inputs * Copy-over Buttons * Option-reveal Elements Along with some minor design improvements	2023-04-08 22:35:55 +05:30
Frank-Mayer	25bc43e409	added snack bar inside noscript element	2023-04-08 18:27:29 +02:00
Adam Argyle	cee51bf355	Merge pull request #1359 from harsh26shah03/save-and-import-side-settings Feat : Save and import side settings	2023-04-04 15:41:45 -07:00
Adam Argyle	8d6daf0fc4	Merge branch 'dev' into save-and-import-side-settings	2023-04-04 15:39:09 -07:00
Adam Argyle	61209d0b62	Merge pull request #1358 from harsh26shah03/file-size-update-sample-data Fix : Sample File Size Unit	2023-04-04 15:38:10 -07:00
Adam Argyle	d0b4855022	Merge branch 'dev' into file-size-update-sample-data	2023-04-04 15:36:38 -07:00
Adam Argyle	6cb64a59ca	Merge pull request #1355 from harsh26shah03/sample-image-data-styles Feat : added hover animation to sample data	2023-04-04 15:32:50 -07:00
Harsh Shah	979fba0af1	Feat : Save and import side settings There were requests from multiple users that they use squoosh for compression but for each iteration side settings resets to default causing issues and there is no way to save and import side settings. There will be two buttons adjacent to copy-over save side settings : This will save side encoder and latest settings to localstorage of browser import side settings : This will import side encoder and latest settings from localstorage of browser and replace the existing settings Also if there are saved settings in locaStorage then whenever user loads the app it will take that settings and populate the side so user do not have to repeatedly enter same settings for similar compression operation subject to user has saved side settings Update:1 Import settings button remains disabled if there is nothing to import Whenever the side setting is saved there will be event fired and eventually listened to enable import button All 2 operations show notifications now Import notification has undo option Update : 2 Changed Icon SVGs	2023-04-04 22:35:09 +05:30
Harsh Shah	b1df3e1d54	Feat : Save and import side settings There were requests from multiple users that they use squoosh for compression but for each iteration side settings resets to default causing issues and there is no way to save and import side settings. There will be two buttons adjacent to copy-over save side settings : This will save side encoder and latest settings to localstorage of browser import side settings : This will import side encoder and latest settings from localstorage of browser and replace the existing settings Also if there are saved settings in locaStorage then whenever user loads the app it will take that settings and populate the side so user do not have to repeatedly enter same settings for similar compression operation subject to user has saved side settings Update:1 Import settings button remains disabled if there is nothing to import Whenever the side setting is saved there will be event fired and eventually listened to enable import button All 2 operations show notifications now Import notification has undo option	2023-04-04 15:20:06 +05:30
Harsh Shah	4f6138d97d	Fix : Sample File Size Unit Sample data had size label showing wrong memory units 13k instead of 13KB 2.8mb instead of 2.8MB small b corresponds to bits and this would change entire meaning of file so fixed it	2023-04-04 11:39:57 +05:30
Harsh Shah	6b6e3724d2	Undoing this as separate PR is raised	2023-04-04 11:34:40 +05:30
Harsh Shah	8ac5e6f678	Merge branch 'GoogleChromeLabs:dev' into sample-image-data-styles	2023-04-04 11:30:38 +05:30
Adam Argyle	a930e8d928	Merge pull request #1353 from harsh26shah03/filename-in-result-dropdowns Feat : Original image name (file name)	2023-04-03 09:08:57 -07:00
Harsh Shah	c814700cd2	Feat : changed unit of sample data and added hover animation	2023-04-03 15:00:19 +05:30
Harsh Shah	dfdf2a7f71	Feat : Original image name (file name) Inside Compress tab Original image string will be appended by file name. In mobile view due to space constrain there will be only <file name>	2023-04-02 23:11:17 +05:30
André R	cd336909fc	Update libavif (v0.12-main) and AOM (3.6) for improved compression and speed (#1334 ) * Update libavif and AOM (3.6) for improved compression and speed * Minor fixes to package-lock done by NPM, also trigger new build * Update AVIF version --------- Co-authored-by: Jake Archibald <jaffathecake@gmail.com>	2023-03-10 10:24:15 +00:00
Aryan Pingle	a8bc48f94c	Rotate copy-over-buttons correctly (#1335 )	2023-03-02 11:42:52 +00:00