css optimization: bundle bulma, main.scss as inline css injected directly into lit-element css

import a subset of bulma to decrease size in main.scss
import only base bulma for outer html page in base.scss

package.json

@@ -22,6 +22,7 @@
     "sass-loader": "^8.0.2",
     "style-loader": "^1.2.1",
     "svg-inline-loader": "^0.8.2",
+    "to-string-loader": "^1.1.6",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3"

scss/base.scss

@@ -0,0 +1,13 @@
+html {
+  scroll-behavior: smooth;
+  overflow-y: hidden;
+}
+
+html.no-overflow {
+  overflow-y: hidden;
+};
+
+@import "../node_modules/bulma/sass/utilities/_all.sass";
+@import "../node_modules/bulma/sass/base/_all.sass";
+
+

scss/main.scss

@@ -1,8 +1,5 @@
 @charset "utf-8";
 
-@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap');
-
-
 $wr-green: #64e986;
 $wr-yellow:  #f5c71a;
 $wr-light-blue: #43daff;
@@ -17,56 +14,6 @@ $link: $wr-dark-blue;
 $light: $wr-light-blue;
 $dark: $wr-accent;
 
-/*$navbar-height: 3.75rem;*/
-
-
-html {
-  scroll-behavior: smooth;
-  overflow-y: hidden;
-}
-
-/*
-@font-face {
-  font-family: 'SourceSansPro';
-  src: url('../static/SourceSansPro-Regular.ttf');
-}
-*/
-
-.font-ssp {
-  font-family: 'Source Code Pro', monospace;
-}
-
-.font-ssp-c {
-  font-family: 'Source Code Pro', monospace;
-  letter-spacing: -1.5px; 
-}
-
-html.no-overflow {
-  overflow-y: hidden;
-}
-
-.page-desc {
-  font-weight: initial;
-  font-size: initial;
-  margin-top: 10px;
-}
-
-progress:after {
-  content: attr(data-percent)'%';
-  position: absolute;
-  -webkit-transform: translate(-50%, -100%);
-  -ms-transform: translate(-50%, -100%);
-  transform: translateX(-50%, -100%);
-  font-size: calc(1.5rem / 1.5);
-  line-height: 1.5rem;
-}
-
-.sticky	{
-	position: sticky;
-  	top: 30px;
-    left: 0px;
-}
-
 .main-scroll {
   flex: 1;
   scroll-behavior: smooth;
@@ -78,7 +25,41 @@ progress:after {
   overflow-x: hidden;
 }
 
+.font-ssp {
+  font-family: 'Source Code Pro', monospace;
+}
 
-@import "../node_modules/bulma/bulma";
+.font-ssp-c {
+  font-family: 'Source Code Pro', monospace;
+  letter-spacing: -1.5px; 
+}
 
 
+
+//@import "../node_modules/bulma/bulma";
+
+
+// Bulma separated out
+@import "../node_modules/bulma/sass/utilities/_all.sass";
+@import "../node_modules/bulma/sass/base/_all.sass";
+@import "../node_modules/bulma/sass/components/navbar.sass";
+@import "../node_modules/bulma/sass/elements/container.sass";
+
+@import "../node_modules/bulma/sass/components/level.sass";
+@import "../node_modules/bulma/sass/elements/progress.sass";
+
+@import "../node_modules/bulma/sass/layout/section.sass";
+@import "../node_modules/bulma/sass/components/panel.sass";
+
+@import "../node_modules/bulma/sass/form/_all.sass";
+
+@import "../node_modules/bulma/sass/elements/button.sass";
+@import "../node_modules/bulma/sass/elements/icon.sass";
+
+@import "../node_modules/bulma/sass/components/menu.sass";
+@import "../node_modules/bulma/sass/grid/columns.sass";
+@import "../node_modules/bulma/sass/elements/table.sass";
+
+@import "../node_modules/bulma/sass/elements/notification.sass";
+@import "../node_modules/bulma/sass/elements/title.sass";
+

src/frontend.js

@@ -8,7 +8,8 @@ import { initSW, digestMessage, getTS } from './pageutils';
 import prettyBytes from 'pretty-bytes';
 import marked from 'marked';
 
-import '../scss/main.scss';
+import '../scss/base.scss';
+import allCssRaw from '../scss/main.scss';
 
 import fasArrowLeft from '@fortawesome/fontawesome-free/svgs/solid/arrow-left.svg';
 import farListAlt from '@fortawesome/fontawesome-free/svgs/solid/list-alt.svg';
@@ -18,6 +19,12 @@ import fabGoogleDrive from '@fortawesome/fontawesome-free/svgs/brands/google-dri
 import fasUpload from '@fortawesome/fontawesome-free/svgs/solid/upload.svg'
 
 
+// ===========================================================================
+const allCss = unsafeCSS(allCssRaw);
+function wrapCss(custom) {
+  return [allCss, custom];
+}
+
 // ===========================================================================
 class AppMain extends LitElement
 {
@@ -36,7 +43,7 @@ class AppMain extends LitElement
   }
 
   static get styles() {
-    return css`
+    return wrapCss(css`
     #logo {
       max-height: 2.5rem;
       margin-right: 8px;
@@ -44,12 +51,11 @@ class AppMain extends LitElement
     .has-allcaps {
       font-variant-caps: all-small-caps;
     }
-    `;
+    `);
   }
 
   render() {
     return html`
-    <link href="./dist/frontend.css" rel="stylesheet"/>
     <div class="container" style="display: sticky">
     <nav class="navbar" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
@@ -264,18 +270,27 @@ class WrLoader extends LitElement
   }
 
   static get styles() {
-    return css`
+    return wrapCss(css`
       .logo {
         width: 96px;
         height: 96px;
         margin: 1em;
       }
-    `;
+
+      progress:after {
+        content: attr(data-percent)'%';
+        position: absolute;
+        -webkit-transform: translate(-50%, -100%);
+        -ms-transform: translate(-50%, -100%);
+        transform: translateX(-50%, -100%);
+        font-size: calc(1.5rem / 1.5);
+        line-height: 1.5rem;
+      }
+    `);
   }
 
   render() {
     return html`
-    <link href="./dist/frontend.css" rel="stylesheet"/>
     <section class="container">
     <div class="level">
     <img class="level-item logo" src="/static/logo.svg"/>
@@ -395,7 +410,7 @@ class WrIndex extends LitElement
   }
 
   static get styles() {
-    return css`
+    return wrapCss(css`
     .size {
       margin-right: 20px;
     }
@@ -408,12 +423,11 @@ class WrIndex extends LitElement
     div.field.has-addons {
       flex: auto;
     }
-    `;
+    `);
   }
 
   render() {
     return html`
-    <link href="./dist/frontend.css" rel="stylesheet"/>
     <section class="section no-top-padding">
       <div class="container">
         <nav class="panel is-info">
@@ -603,7 +617,7 @@ class WrColl extends LitElement
   }
 
   static get styles() {
-    return css`
+    return wrapCss(css`
     .icon {
       vertical-align: text-top;
     }
@@ -620,17 +634,10 @@ class WrColl extends LitElement
       font-weight: initial;
       margin-right: 20px;
     }
-    `;
+    `);
   }
 
   render() {
-    return html`
-    <link href="./dist/frontend.css" rel="stylesheet"/>
-    ${this.renderColl()}
-    `;
-  }
-
-  renderColl() {
     if (this.collInfo && !this.collInfo.coll) {
       return html`<wr-loader .loadInfo="${this.loadInfo}" .coll="${this.coll}" .sourceUrl="${this.sourceUrl}" @coll-loaded=${this.onCollLoaded}></wr-loader>`;
     } else if (this.collInfo) {
@@ -750,7 +757,7 @@ class WrCuratedPages extends LitElement
   }
 
   static get styles() {
-    return css`
+    return wrapCss(css`
     .column {
       max-height: calc(100vh - 145px);
     }
@@ -759,12 +766,11 @@ class WrCuratedPages extends LitElement
       margin-top: 10px;
       max-height: calc(100vh - 155px);
     }
-    `;
+    `);
   }
 
   render() {
     return html`
-    <link href="./dist/frontend.css" rel="stylesheet"/>
     <div class="columns">
       <div class="column is-one-third">
         <div class="menu" style="overflow-y: auto; height: 100%;">
@@ -1029,7 +1035,7 @@ class WrResources extends LitElement
   }
 
   static get styles() {
-    return css`
+    return wrapCss(css`
     :host {
       display: flex;
       flex-direction: column;
@@ -1082,12 +1088,11 @@ class WrResources extends LitElement
     .flex-auto {
       flex: auto;
     }
-    `;
+    `);
   }
 
   render() {
     return html`
-    <link href="./dist/frontend.css" rel="stylesheet"/>
     <div class="notification level is-marginless">
       <div class="level-left flex-auto">
         <div class="field flex-column">
@@ -1243,7 +1248,6 @@ class WrGdrive extends LitElement
     ${!this.manual ? html`
     <p>Connecting to Google Drive...</p>
     ` : html`
-    <link href="./dist/frontend.css" rel="stylesheet"/>
     <button class="button is-primary is-rounded" @click="${this.onClickAuth}">
     <span class="icon"><fa-icon .svg="${fabGoogleDrive}"></fa-icon></span>
     <span>Authorize Google Drive</span>

webpack.config.js

@@ -47,24 +47,20 @@ module.exports = (env, argv) => {
     ],
 
     module: {
-      rules: [{
+      rules: [
-        test: /\.s[ac]ss$/i,
-        use: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-          {
-            loader: 'sass-loader',
-            options: {
-              // Prefer `dart-sass`
-              implementation: require('node-sass'),
-            },
-          },
-        ],
-      },
       {
         test:  /\.svg$/,
         loader: 'svg-inline-loader'
-      }]
+      },
+      {
+        test: /base.scss$/,
+        loaders: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+      },
+      {
+        test: /main.scss$/,
+        loaders: ['to-string-loader', 'css-loader', 'sass-loader']
+      },
+      ]
     }
   }
 }

yarn.lock

@@ -2611,7 +2611,7 @@ lcid@^2.0.0:
   dependencies:
     invert-kv "^2.0.0"
 
-lit-element@^2.3.1:
+lit-element@^2.2.1, lit-element@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.3.1.tgz#73343b978fa1e73d60526c6bb6ad60f53a16c343"
   integrity sha512-tOcUAmeO3BzwiQ7FGWdsshNvC0HVHcTFYw/TLIImmKwXYoV0E7zCBASa8IJ7DiP4cen/Yoj454gS0qqTnIGsFA==
@@ -2648,7 +2648,7 @@ loader-utils@1.2.3:
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
-loader-utils@^1.1.0, loader-utils@^1.2.3:
+loader-utils@^1.0.0, loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -2681,7 +2681,7 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@~4.17.12:
+lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@~4.17.12:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -3462,14 +3462,6 @@ path-parse@^1.0.6:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
 
-path-parser@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/path-parser/-/path-parser-6.1.0.tgz#ee8a1dd7b1ffaf4069f2ddd1c20d1867c8fd3a08"
-  integrity sha512-nAB6J73z2rFcQP+870OHhpkHFj5kO4rPLc2Ol4Y3Ale7F6Hk1/cPKp7cQ8RznKF8FOSvu+YR9Xc6Gafk7DlpYA==
-  dependencies:
-    search-params "3.0.0"
-    tslib "^1.10.0"
-
 path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
@@ -3779,6 +3771,11 @@ read-pkg@^1.0.0:
     normalize-package-data "^2.3.2"
     path-type "^1.0.0"
 
+readable-stream-node-to-web@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/readable-stream-node-to-web/-/readable-stream-node-to-web-1.0.1.tgz#8b7614faa1465ebfa0da9b9ca6303fa27073b7cf"
+  integrity sha1-i3YU+qFGXr+g2pucpjA/onBzt88=
+
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
@@ -4034,11 +4031,6 @@ scss-tokenizer@^0.2.3:
     js-base64 "^2.1.8"
     source-map "^0.4.2"
 
-search-params@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/search-params/-/search-params-3.0.0.tgz#dbc7c243058e5a33ae1e9870be91f5aced4100d8"
-  integrity sha512-8CYNl/bjkEhXWbDTU/K7c2jQtrnqEffIPyOLMqygW/7/b+ym8UtQumcAZjOfMLjZKR6AxK5tOr9fChbQZCzPqg==
-
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -4677,6 +4669,13 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+to-string-loader@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/to-string-loader/-/to-string-loader-1.1.6.tgz#230529ccc63dd0ecca052a85e1fb82afe946b0ab"
+  integrity sha512-VNg62//PS1WfNwrK3n7t6wtK5Vdtx/qeYLLEioW46VMlYUwAYT6wnfB+OwS2FMTCalIHu0tk79D3RXX8ttmZTQ==
+  dependencies:
+    loader-utils "^1.0.0"
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
@@ -4702,7 +4701,7 @@ trim-newlines@^1.0.0:
   dependencies:
     glob "^7.1.2"
 
-tslib@^1.10.0, tslib@^1.9.0:
+tslib@^1.9.0:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
   integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
@@ -4885,11 +4884,24 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
-"wabac@link:../serviceworker":
+"wabac@github:https://github.com/webrecorder/wabac.js":
-  version "0.0.0"
+  version "1.4.1"
-  uid ""
+  resolved "https://codeload.github.com/webrecorder/wabac.js/tar.gz/69fd2f1d446773c52b8811e1c35add19c49a5592"
+  dependencies:
+    brotli "github:foliojs/brotli.js"
+    fast-xml-parser "^3.15.1"
+    flatpickr "^4.6.1"
+    idb "^5.0.1"
+    lit-element "^2.2.1"
+    lodash "^4.17.13"
+    pako "^1.0.10"
+    parse5-html-rewriting-stream "^5.1.0"
+    unescape-js "^1.1.4"
+    warcio "^1.0.3"
+    wbn "^0.0.3"
+    web-streams-node "^0.4.0"
 
-warcio@^1.1.3:
+warcio@^1.0.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/warcio/-/warcio-1.1.3.tgz#ebff5eee27214face9b8cd3e0f5397488d28da4a"
   integrity sha512-DAsuVEP9zhcNt/BKZTbc33Fvz/2HCCtQr+hEd0XPxpQ9VazXyqyOKwf2Hs+/uxO00bZ2/GzYhml/hvLHJW6oVA==
@@ -4922,6 +4934,20 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+web-streams-node@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/web-streams-node/-/web-streams-node-0.4.0.tgz#641e42d7a7c4df95785a774e2484ba93d36fd672"
+  integrity sha512-u+PBQs8DFaBrN/bxCLFn21tO/ZP7EM3qA4FGzppoUCcZ5CaMbKOsN8uOp27ylVEsfrxcR2tsF6gWHI5M8bN73w==
+  dependencies:
+    is-stream "^1.1.0"
+    readable-stream-node-to-web "^1.0.1"
+    web-streams-ponyfill "^1.4.1"
+
+web-streams-ponyfill@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/web-streams-ponyfill/-/web-streams-ponyfill-1.4.2.tgz#0ae863cc5f7493903679f16b08cbf14d432b62f4"
+  integrity sha512-LCHW+fE2UBJ2vjhqJujqmoxh1ytEDEr0dPO3CabMdMDJPKmsaxzS90V1Ar6LtNE5VHLqxR4YMEj1i4lzMAccIA==
+
 webpack-cli@^3.3.11:
   version "3.3.11"
   resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.11.tgz#3bf21889bf597b5d82c38f215135a411edfdc631"