Use .module.css extension for CSS Modules

src/codecs/generic/quality-option.tsx

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
-import * as style from '../../components/Options/style.scss';
+import * as style from '../../components/Options/style.module.scss';
 import Range from '../../components/range';
 
 interface EncodeOptions {

src/codecs/imagequant/options.tsx

@@ -2,7 +2,7 @@ import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
 import { inputFieldValueAsNumber, konami, preventDefault } from '../../lib/util';
 import { QuantizeOptions } from './processor-meta';
-import * as style from '../../components/Options/style.scss';
+import * as style from '../../components/Options/style.module.scss';
 import Expander from '../../components/expander';
 import Select from '../../components/select';
 import Range from '../../components/range';

src/codecs/mozjpeg/options.tsx

@@ -2,7 +2,7 @@ import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
 import { inputFieldChecked, inputFieldValueAsNumber, preventDefault } from '../../lib/util';
 import { EncodeOptions, MozJpegColorSpace } from './encoder-meta';
-import * as style from '../../components/Options/style.scss';
+import * as style from '../../components/Options/style.module.scss';
 import Checkbox from '../../components/checkbox';
 import Expander from '../../components/expander';
 import Select from '../../components/select';

src/codecs/oxipng/options.tsx

@@ -3,7 +3,7 @@ import { bind } from '../../lib/initial-util';
 import { inputFieldValueAsNumber, preventDefault } from '../../lib/util';
 import { EncodeOptions } from './encoder-meta';
 import Range from '../../components/range';
-import * as style from '../../components/Options/style.scss';
+import * as style from '../../components/Options/style.module.scss';
 
 type Props = {
   options: EncodeOptions;

src/codecs/resize/options.tsx

@@ -5,7 +5,7 @@ import {
   inputFieldValueAsNumber, inputFieldValue, preventDefault, inputFieldChecked,
 } from '../../lib/util';
 import { ResizeOptions, isWorkerOptions } from './processor-meta';
-import * as style from '../../components/Options/style.scss';
+import * as style from '../../components/Options/style.module.scss';
 import Checkbox from '../../components/checkbox';
 import Expander from '../../components/expander';
 import Select from '../../components/select';

src/codecs/webp/options.tsx

@@ -2,7 +2,7 @@ import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
 import { inputFieldCheckedAsNumber, inputFieldValueAsNumber, preventDefault } from '../../lib/util';
 import { EncodeOptions, WebPImageHint } from './encoder-meta';
-import * as style from '../../components/Options/style.scss';
+import * as style from '../../components/Options/style.module.scss';
 import Checkbox from '../../components/checkbox';
 import Expander from '../../components/expander';
 import Select from '../../components/select';

src/components/App/index.tsx

@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 
 import { bind, linkRef, Fileish } from '../../lib/initial-util';
-import * as style from './style.scss';
+import * as style from './style.module.scss';
 import { FileDropEvent } from 'file-drop-element';
 import 'file-drop-element';
 import SnackBarElement, { SnackOptions } from '../../lib/SnackBar';
@@ -12,11 +12,9 @@ import '../custom-els/LoadingSpinner';
 const ROUTE_EDITOR = '/editor';
 
 const compressPromise = import(
-  /* webpackChunkName: "main-app" */
   '../compress');
 
 const swBridgePromise = import(
-  /* webpackChunkName: "sw-bridge" */
   '../../lib/sw-bridge');
 
 function back() {
@@ -47,8 +45,9 @@ export default class App extends Component<Props, State> {
 
     compressPromise.then((module) => {
       this.setState({ Compress: module.default });
-    }).catch(() => {
+    }).catch((e) => {
       this.showSnack('Failed to load app');
+      throw e;
     });
 
     swBridgePromise.then(async ({ offliner, getSharedImage }) => {

src/components/Options/index.tsx

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import * as style from './style.scss';
+import * as style from './style.module.scss';
 import { bind } from '../../lib/initial-util';
 import { cleanSet, cleanMerge } from '../../lib/clean-modify';
 import OxiPNGEncoderOptions from '../../codecs/oxipng/options';

src/components/Output/custom-els/TwoUp/index.ts

@@ -1,5 +1,5 @@
 import PointerTracker, { Pointer } from 'pointer-tracker';
-import * as styles from './styles.css';
+import * as styles from './styles.module.css';
 
 const legacyClipCompatAttr = 'legacy-clip-compat';
 const orientationAttr = 'orientation';

src/components/Output/index.tsx

@@ -2,7 +2,7 @@ import { h, Component } from 'preact';
 import PinchZoom, { ScaleToOpts } from './custom-els/PinchZoom';
 import './custom-els/PinchZoom';
 import './custom-els/TwoUp';
-import * as style from './style.scss';
+import * as style from './style.module.scss';
 import { bind, linkRef } from '../../lib/initial-util';
 import { shallowEqual, drawDataToCanvas } from '../../lib/util';
 import {
@@ -13,7 +13,7 @@ import {
     ToggleBackgroundActiveIcon,
     RotateIcon,
 } from '../../lib/icons';
-import { twoUpHandle } from './custom-els/TwoUp/styles.css';
+import { twoUpHandle } from './custom-els/TwoUp/styles.module.css';
 import { InputProcessorState } from '../../codecs/input-processors';
 import { cleanSet } from '../../lib/clean-modify';
 import { SourceImage } from '../compress';

src/components/checkbox/index.tsx

@@ -1,5 +1,5 @@
 import { h, Component } from 'preact';
-import * as style from './style.scss';
+import * as style from './style.module.scss';
 import { UncheckedIcon, CheckedIcon } from '../../lib/icons';
 
 interface Props extends JSX.HTMLAttributes {}

src/components/compress/custom-els/MultiPanel/index.ts

@@ -1,4 +1,4 @@
-import * as style from './styles.css';
+import * as style from './styles.module.css';
 import { transitionHeight } from '../../../../lib/util';
 
 interface CloseAllOptions {

src/components/compress/index.tsx

@@ -2,7 +2,7 @@ import { h, Component } from 'preact';
 
 import { bind, Fileish } from '../../lib/initial-util';
 import { blobToImg, drawableToImageData, blobToText } from '../../lib/util';
-import * as style from './style.scss';
+import * as style from './style.module.scss';
 import Output from '../Output';
 import Options from '../Options';
 import ResultCache from './result-cache';

src/components/custom-els/LoadingSpinner/index.ts

@@ -1,4 +1,4 @@
-import * as styles from './styles.css';
+import * as styles from './styles.module.css';
 
 /**
  * A simple spinner. This custom element has no JS API. Just put it in the document, and it'll

src/components/expander/index.tsx

@@ -1,5 +1,5 @@
 import { h, Component, ComponentChild, ComponentChildren } from 'preact';
-import * as style from './style.scss';
+import * as style from './style.module.scss';
 import { transitionHeight } from '../../lib/util';
 
 interface Props {

src/components/intro/index.tsx

@@ -3,15 +3,15 @@ import { h, Component } from 'preact';
 import { bind, linkRef, Fileish } from '../../lib/initial-util';
 import '../custom-els/LoadingSpinner';
 
-import logo from './imgs/logo.svg';
+import logo from 'url:./imgs/logo.svg';
-import largePhoto from './imgs/demos/demo-large-photo.jpg';
+import largePhoto from 'url:./imgs/demos/demo-large-photo.jpg';
-import artwork from './imgs/demos/demo-artwork.jpg';
+import artwork from 'url:./imgs/demos/demo-artwork.jpg';
-import deviceScreen from './imgs/demos/demo-device-screen.png';
+import deviceScreen from 'url:./imgs/demos/demo-device-screen.png';
-import largePhotoIcon from './imgs/demos/icon-demo-large-photo.jpg';
+import largePhotoIcon from 'url:./imgs/demos/icon-demo-large-photo.jpg';
-import artworkIcon from './imgs/demos/icon-demo-artwork.jpg';
+import artworkIcon from 'url:./imgs/demos/icon-demo-artwork.jpg';
-import deviceScreenIcon from './imgs/demos/icon-demo-device-screen.jpg';
+import deviceScreenIcon from 'url:./imgs/demos/icon-demo-device-screen.jpg';
-import logoIcon from './imgs/demos/icon-demo-logo.png';
+import logoIcon from 'url:./imgs/demos/icon-demo-logo.png';
-import * as style from './style.scss';
+import * as style from './style.module.scss';
 import SnackBarElement from '../../lib/SnackBar';
 
 const demos = [

src/components/range/index.tsx

@@ -1,5 +1,5 @@
 import { h, Component } from 'preact';
-import * as style from './style.scss';
+import * as style from './style.module.scss';
 import RangeInputElement from '../../custom-els/RangeInput';
 import '../../custom-els/RangeInput';
 import { linkRef, bind } from '../../lib/initial-util';

src/components/results/FileSize.tsx

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
-import * as prettyBytes from 'pretty-bytes';
+import prettyBytes from 'pretty-bytes';
-import * as style from './style.scss';
+import * as style from './style.module.scss';
 
 interface Props {
   blob: Blob;

src/components/results/index.tsx

@@ -1,6 +1,6 @@
 import { h, Component, ComponentChildren, ComponentChild } from 'preact';
 
-import * as style from './style.scss';
+import * as style from './style.module.scss';
 import FileSize from './FileSize';
 import { DownloadIcon, CopyAcrossIcon, CopyAcrossIconProps } from '../../lib/icons';
 import '../custom-els/LoadingSpinner';

src/components/select/index.tsx

@@ -1,5 +1,5 @@
 import { h, Component } from 'preact';
-import * as style from './style.scss';
+import * as style from './style.module.scss';
 
 interface Props extends JSX.HTMLAttributes {
   large?: boolean;

src/custom-els/RangeInput/index.ts

@@ -1,6 +1,6 @@
 import PointerTracker from 'pointer-tracker';
 import { bind } from '../../lib/initial-util';
-import * as style from './styles.css';
+import * as style from './styles.module.css';
 
 const RETARGETED_EVENTS = ['focus', 'blur'];
 const UPDATE_EVENTS = ['input', 'change'];

src/lib/SnackBar/index.ts

@@ -1,4 +1,4 @@
-import * as style from './styles.css';
+import * as style from './styles.module.css';
 
 export interface SnackOptions {
   timeout?: number;