Optimise amount of initial CSS

lib/css-plugin.js

@@ -41,6 +41,7 @@ const assetRe = new RegExp('/fake/path/to/asset/([^/]+)/', 'g');
 const appendCssModule = '\0appendCss';
 const appendCssSource = `
   export default function appendCss(css) {
+    if (__PRERENDER__) return;
     const style = document.createElement('style');
     style.textContent = css;
     document.head.append(style);

lib/initial-css-plugin.js

@@ -30,7 +30,7 @@ export default function initialCssPlugin() {
     async load(id) {
       if (id !== initialCssModule) return;
 
-      const matches = await globP('shared/initial-app/**/*.css', {
+      const matches = await globP('shared/prerendered-app/**/*.css', {
         nodir: true,
         cwd: path.join(process.cwd(), 'src'),
       });

src/client/initial-app/App/index.tsx

@@ -1,16 +1,16 @@
 import type { FileDropEvent } from 'file-drop-element';
-import type SnackBarElement from 'shared/initial-app/custom-els/snack-bar';
-import type { SnackOptions } from 'shared/initial-app/custom-els/snack-bar';
+import type SnackBarElement from 'shared/custom-els/snack-bar';
+import type { SnackOptions } from 'shared/custom-els/snack-bar';
 
 import { h, Component } from 'preact';
 
-import { linkRef } from 'shared/initial-app/util';
+import { linkRef } from 'shared/prerendered-app/util';
 import * as style from './style.css';
 import 'add-css:./style.css';
 import 'file-drop-element';
-import 'shared/initial-app/custom-els/snack-bar';
-import Intro from 'shared/initial-app/Intro';
-import 'shared/initial-app/custom-els/loading-spinner';
+import 'shared/custom-els/snack-bar';
+import Intro from 'shared/prerendered-app/Intro';
+import 'shared/custom-els/loading-spinner';
 
 const ROUTE_EDITOR = '/editor';
 

src/client/initial-app/custom-els/missing-types.d.ts

@@ -1,5 +1,5 @@
-/// <reference path="../../../shared/initial-app/custom-els/snack-bar/missing-types.d.ts" />
-/// <reference path="../../../shared/initial-app/custom-els/loading-spinner/missing-types.d.ts" />
+/// <reference path="../../../shared/custom-els/snack-bar/missing-types.d.ts" />
+/// <reference path="../../../shared/custom-els/loading-spinner/missing-types.d.ts" />
 import type { FileDropElement, FileDropEvent } from 'file-drop-element';
 
 interface FileDropAttributes extends preact.JSX.HTMLAttributes {

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

@@ -3,7 +3,7 @@ import * as style from './style.css';
 import 'add-css:./style.css';
 import RangeInputElement from './custom-els/RangeInput';
 import './custom-els/RangeInput';
-import { linkRef } from 'shared/initial-app/util';
+import { linkRef } from 'shared/prerendered-app/util';
 
 interface Props extends preact.JSX.HTMLAttributes {}
 interface State {}

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

@@ -18,7 +18,7 @@ import { twoUpHandle } from './custom-els/TwoUp/styles.css';
 import type { PreprocessorState } from '../../feature-meta';
 import { cleanSet } from '../../util/clean-modify';
 import type { SourceImage } from '../../Compress';
-import { linkRef } from 'shared/initial-app/util';
+import { linkRef } from 'shared/prerendered-app/util';
 
 interface Props {
   source?: SourceImage;

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

@@ -1,5 +1,5 @@
 .output {
-  composes: abs-fill from '../../../../shared/initial-app/util.css';
+  composes: abs-fill from '../../../../shared/prerendered-app/util.css';
 
   &::before {
     content: '';
@@ -19,12 +19,12 @@
 }
 
 .two-up {
-  composes: abs-fill from '../../../../shared/initial-app/util.css';
+  composes: abs-fill from '../../../../shared/prerendered-app/util.css';
   --accent-color: var(--button-fg);
 }
 
 .pinch-zoom {
-  composes: abs-fill from '../../../../shared/initial-app/util.css';
+  composes: abs-fill from '../../../../shared/prerendered-app/util.css';
   outline: none;
   display: flex;
   justify-content: center;

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

@@ -8,7 +8,7 @@ import {
   CopyAcrossIcon,
   CopyAcrossIconProps,
 } from 'client/lazy-app/icons';
-import 'shared/initial-app/custom-els/loading-spinner';
+import 'shared/custom-els/loading-spinner';
 import { SourceImage } from '../';
 
 interface Props {

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

@@ -124,7 +124,7 @@
 .copy-to-other {
   grid-row: 1;
   grid-column: copy-button;
-  composes: unbutton from '../../../../shared/initial-app/util.css';
+  composes: unbutton from '../../../../shared/prerendered-app/util.css';
   composes: download;
 
   background: #656565;

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

@@ -30,7 +30,7 @@ import './custom-els/MultiPanel';
 import Results from './Results';
 import WorkerBridge from '../worker-bridge';
 import { resize } from 'features/processors/resize/client';
-import type SnackBarElement from 'shared/initial-app/custom-els/snack-bar';
+import type SnackBarElement from 'shared/custom-els/snack-bar';
 import { CopyAcrossIconProps, ExpandIcon } from '../icons';
 
 export type OutputType = EncoderType | 'identity';

src/client/lazy-app/sw-bridge/index.ts

@@ -1,4 +1,4 @@
-import type SnackBarElement from 'shared/initial-app/custom-els/snack-bar';
+import type SnackBarElement from 'shared/custom-els/snack-bar';
 
 import { get, set } from 'idb-keyval';
 

src/client/missing-types.d.ts

@@ -11,7 +11,7 @@
  * limitations under the License.
  */
 /// <reference path="../../missing-types.d.ts" />
-/// <reference path="../shared/initial-app/Intro/missing-types.d.ts" />
+/// <reference path="../shared/prerendered-app/Intro/missing-types.d.ts" />
 
 interface Navigator {
   readonly standalone: boolean;

src/features/processors/resize/client/index.tsx

@@ -22,7 +22,7 @@ import {
   inputFieldChecked,
 } from 'client/lazy-app/util';
 import * as style from 'client/lazy-app/Compress/Options/style.css';
-import { linkRef } from 'shared/initial-app/util';
+import { linkRef } from 'shared/prerendered-app/util';
 import Select from 'client/lazy-app/Compress/Options/Select';
 import Expander from 'client/lazy-app/Compress/Options/Expander';
 import Checkbox from 'client/lazy-app/Compress/Options/Checkbox';

src/shared/custom-els/loading-spinner/index.ts

@@ -1,4 +1,5 @@
 import * as styles from './styles.css';
+import 'add-css:./styles.css';
 
 // So it doesn't cause an error when running in node
 const HTMLEl = ((__PRERENDER__

src/shared/custom-els/snack-bar/index.ts

@@ -1,4 +1,5 @@
 import * as style from './styles.css';
+import 'add-css:./styles.css';
 
 // So it doesn't cause an error when running in node
 const HTMLEl = ((__PRERENDER__

src/shared/prerendered-app/Intro/index.tsx

@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 
-import { linkRef } from 'shared/initial-app/util';
-import '../custom-els/loading-spinner';
+import { linkRef } from 'shared/prerendered-app/util';
+import '../../custom-els/loading-spinner';
 import logo from 'url:./imgs/logo.svg';
 import githubLogo from 'url:./imgs/github-logo.svg';
 import largePhoto from 'url:./imgs/demos/demo-large-photo.jpg';
@@ -13,8 +13,8 @@ import deviceScreenIcon from 'url:./imgs/demos/icon-demo-device-screen.jpg';
 import logoIcon from 'url:./imgs/demos/icon-demo-logo.png';
 import logoWithText from 'url:./imgs/logo-with-text.svg';
 import * as style from './style.css';
-import type SnackBarElement from 'shared/initial-app/custom-els/snack-bar';
-import 'shared/initial-app/custom-els/snack-bar';
+import type SnackBarElement from 'shared/custom-els/snack-bar';
+import 'shared/custom-els/snack-bar';
 import { startBlobs } from './blob-anim/meta';
 
 const demos = [

src/static-build/missing-types.d.ts

@@ -11,7 +11,7 @@
  * limitations under the License.
  */
 /// <reference path="../../missing-types.d.ts" />
-/// <reference path="../shared/initial-app/Intro/missing-types.d.ts" />
+/// <reference path="../shared/prerendered-app/Intro/missing-types.d.ts" />
 
 declare module 'client-bundle:*' {
   const url: string;

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

@@ -17,7 +17,7 @@ import initialCss from 'initial-css:';
 import { allSrc } from 'client-bundle:client/initial-app';
 import favicon from 'url:static-build/assets/favicon.ico';
 import { escapeStyleScriptContent } from 'static-build/utils';
-import Intro from 'shared/initial-app/Intro';
+import Intro from 'shared/prerendered-app/Intro';
 
 interface Props {}