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
This commit is contained in:
Ilya Kreymer
2020-05-03 14:57:51 -07:00
parent 6f04588dfd
commit 1a4793eefa
10 changed files with 210 additions and 189 deletions
+1 -2
View File
File diff suppressed because one or more lines are too long
+68 -67
View File
File diff suppressed because one or more lines are too long
+1
View File
@@ -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"
+13
View File
@@ -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";
+35 -54
View File
@@ -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";
+30 -26
View File
@@ -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>
+1 -1
View File
File diff suppressed because one or more lines are too long
+3 -3
View File
File diff suppressed because one or more lines are too long
+11 -15
View File
@@ -47,24 +47,20 @@ module.exports = (env, argv) => {
],
module: {
rules: [{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
// Prefer `dart-sass`
implementation: require('node-sass'),
},
},
],
},
rules: [
{
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']
},
]
}
}
}
+47 -21
View File
@@ -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":
version "0.0.0"
uid ""
"wabac@github:https://github.com/webrecorder/wabac.js":
version "1.4.1"
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"