Isolating staking dapp css, extracting of non-critical css

apps/block_scout_web/assets/css/app.scss

@@ -24,7 +24,6 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/reboot";
 @import "node_modules/bootstrap/scss/grid";
 @import "node_modules/bootstrap/scss/code";
-@import "node_modules/bootstrap/scss/modal";
 @import "node_modules/bootstrap/scss/close";
 @import "node_modules/bootstrap/scss/buttons";
 @import "node_modules/bootstrap/scss/forms";
@@ -50,7 +49,6 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/navbar";
 @import "node_modules/bootstrap/scss/pagination";
 @import "node_modules/bootstrap/scss/tables";
-@import "node_modules/bootstrap/scss/tooltip";
 @import "node_modules/bootstrap/scss/transitions";
 
 // Code highlight
@@ -75,8 +73,10 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/filter";
 @import "components/button";
 @import "components/table";
-@import "components/qr-code";
 @import "components/navbar";
+
+@import "theme/dark-theme";
+
 @import "components/animations";
 @import "components/card";
 @import "components/tile";
@@ -93,26 +93,14 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/transaction-input";
 @import "components/coin-balance-tile";
 @import "components/highlight";
-@import "components/copy_icon";
 @import "components/btn_full";
 @import "components/btn_line";
-@import "components/stakes";
 @import "components/check";
 @import "components/stakes_table";
 @import "components/i_tooltip";
 @import "components/check_tooltip";
 @import "components/tooltip";
-@import "components/progress_from_to";
-@import "components/stakes_empty_content";
-@import "components/stakes_btn_remove_pool";
-@import "components/modal";
-@import "components/modal_validator_info";
 @import "components/form";
-@import "components/stakes_progress";
-@import "components/modal_status";
-@import "components/modal_bottom_disclaimer";
-@import "components/modal_become_candidate";
-@import "components/modal_stake";
 @import "components/btn_copy";
 @import "components/btn_qr";
 @import "components/btn_address_card";
@@ -124,11 +112,11 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/errors";
 @import "components/log-search";
 @import "components/radio";
+@import "components/modal_variables";
 @import "components/network-selector";
 @import "components/new_smart_contract";
 @import "components/radio_big";
 @import "components/btn_no_border";
-@import "theme/dark-theme";
 
 :export {
   dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color;

apps/block_scout_web/assets/css/components/_modal.scss

@@ -1,9 +1,3 @@
-$modal-overlay-color: rgba($primary, 0.9) !default;
-$modal-horizontal-padding: 30px !default;
-$modal-vertical-padding: 25px !default;
-$modal-border-radius: 10px !default;
-$modal-gray-background: #f6f7f9 !default;
-
 .modal-backdrop {
   background-color: $modal-overlay-color;
 

apps/block_scout_web/assets/css/components/_modal_variables.scss

@@ -0,0 +1,5 @@
+$modal-overlay-color: rgba($primary, 0.9) !default;
+$modal-horizontal-padding: 30px !default;
+$modal-vertical-padding: 25px !default;
+$modal-border-radius: 10px !default;
+$modal-gray-background: #f6f7f9 !default;

apps/block_scout_web/assets/css/components/_stakes_table.scss

@@ -1,5 +1,7 @@
 $stakes-table-th-background: #f5f6fa !default;
 $stakes-table-cell-separation: 25px !default;
+$stakes-banned-background: #fff3f7 !default;
+$stakes-banned-color: #ff7986 !default;
 
 .stakes-table-container {
   max-width: 100%;

apps/block_scout_web/assets/css/components/_stakes_progress.scss → apps/block_scout_web/assets/css/components/stakes/_stakes_progress.scss

@@ -1,3 +1,6 @@
+$modal-horizontal-padding: 30px !default;
+$modal-vertical-padding: 25px !default;
+
 .stakes-progress {
   .modal-stake-right & {
     border-left: 1px solid $base-border-color;

apps/block_scout_web/assets/css/non-critical.scss

@@ -0,0 +1,13 @@
+// Bootstrap Core CSS
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/mixins";
+
+@import "theme/variables";
+
+@import "node_modules/bootstrap/scss/modal";
+@import "node_modules/bootstrap/scss/tooltip";
+
+@import "components/qr-code";
+@import "components/modal_variables";
+@import "components/modal";
+@import "components/modal_status";

apps/block_scout_web/assets/css/stakes.scss

@@ -0,0 +1,19 @@
+@import "./mixins";
+
+// Bootstrap Core CSS
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/mixins";
+
+@import "theme/variables";
+
+@import "components/stakes/copy_icon";
+@import "components/stakes/stakes";
+@import "components/stakes/progress_from_to";
+@import "components/stakes/stakes_empty_content";
+@import "components/stakes/stakes_btn_remove_pool";
+@import "components/stakes/stakes_progress";
+@import "components/modal_variables";
+@import "components/stakes/modal_stake";
+@import "components/stakes/modal_become_candidate";
+@import "components/stakes/modal_validator_info";
+@import "components/stakes/modal_bottom_disclaimer";

apps/block_scout_web/assets/js/non-critical.js

@@ -0,0 +1,63 @@
+// We need to import the CSS so that webpack will load it.
+// The ExtractTextPlugin is used to separate it out into
+// its own CSS file.
+import '../css/app.scss'
+
+// webpack automatically concatenates all files in your
+// watched paths. Those paths can be configured as
+// endpoints in "webpack.config.js".
+//
+// Import dependencies
+//
+import '@babel/polyfill'
+import 'phoenix_html'
+import 'bootstrap'
+
+// Import local files
+//
+// Local files can be imported directly using relative
+// paths "./socket" or full ones "web/static/js/socket".
+
+import './locale'
+
+import './pages/address'
+import './pages/address/coin_balances'
+import './pages/address/transactions'
+import './pages/address/logs'
+import './pages/address/validations'
+import './pages/address/internal_transactions'
+import './pages/blocks'
+import './pages/chain'
+import './pages/pending_transactions'
+import './pages/transaction'
+import './pages/transactions'
+import './pages/favorites'
+import './pages/network-search'
+import './pages/layout'
+import './pages/verification_form'
+import './pages/dark-mode-switcher'
+
+import './pages/admin/tasks.js'
+
+import './lib/clipboard_buttons'
+import './lib/currency'
+import './lib/from_now'
+import './lib/indexing'
+import './lib/loading_element'
+import './lib/market_history_chart'
+import './lib/pending_transactions_toggle'
+import './lib/pretty_json'
+import './lib/reload_button'
+import './lib/smart_contract/read_only_functions'
+import './lib/smart_contract/wei_ether_converter'
+import './lib/stop_propagation'
+import './lib/token_balance_dropdown'
+import './lib/token_balance_dropdown_search'
+import './lib/token_transfers_toggle'
+import './lib/transaction_input_dropdown'
+import './lib/async_listing_load'
+import './lib/tooltip'
+import './lib/modals'
+import './lib/try_api'
+import './lib/card_tabs'
+import './lib/network_selector'

apps/block_scout_web/assets/js/pages/stakes.js

@@ -0,0 +1 @@
+import '../../css/stakes.scss'

apps/block_scout_web/assets/package.json

@@ -20,12 +20,12 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.1.0-4",
-    "highlight.js": "^9.13.1",
-    "highlightjs-solidity": "^1.0.6",
     "bignumber.js": "^7.2.1",
     "bootstrap": "^4.1.3",
     "chart.js": "^2.7.2",
     "clipboard": "^2.0.1",
+    "highlight.js": "^9.13.1",
+    "highlightjs-solidity": "^1.0.6",
     "humps": "^2.0.1",
     "jquery": "^3.3.1",
     "lodash": "^4.17.11",

apps/block_scout_web/assets/webpack.config.js

@@ -29,9 +29,13 @@ function transpileViewScript(file) {
 
 const appJs =
   {
-    entry: './js/app.js',
+    entry: {
+      app: './js/app.js',
+      stakes: './js/pages/stakes.js',
+      'non-critical': './css/non-critical.scss',
+    },
     output: {
-      filename: 'app.js',
+      filename: '[name].js',
       path: path.resolve(__dirname, '../priv/static/js')
     },
     optimization: {
@@ -80,7 +84,7 @@ const appJs =
     },
     plugins: [
       new MiniCssExtractPlugin({
-        filename: '../css/app.css'
+        filename: '../css/[name].css'
       }),
       new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
       new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/)

apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex

@@ -5,6 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
+    <link rel="preload" href="/css/non-critical.css" as="style" onload="this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="/css/non-critical.css"></noscript>
 
     <link rel="apple-touch-icon" sizes="180x180" href="<%= static_path(@conn, "/apple-touch-icon.png") %>">
     <link rel="icon" type="image/png" sizes="32x32" href="<%= static_path(@conn, "/favicon-32x32.png") %>">