Merge pull request #5227 from blockscout/vb-update-css-loader

Major update of css-loader npm package
blockscout · Feb 22, 2022 · 4e952d7 · 4e952d7
2 parents 8214e26 + 75e89d9
commit 4e952d7
Show file tree

Hide file tree

Showing 18 changed files with 247 additions and 465 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,7 @@
 - [#4862](https://github.com/blockscout/blockscout/pull/4862) - Fix internal transactions pagination
 
 ### Chore
+- [#5227](https://github.com/blockscout/blockscout/pull/5227) - Major update of css-loader npm package
 - [#5226](https://github.com/blockscout/blockscout/pull/5226) - Update mini-css-extract-plugin, css-minimizer-webpack-plugin packages
 - [#5224](https://github.com/blockscout/blockscout/pull/5224) - Webpack config refactoring
 - [#5223](https://github.com/blockscout/blockscout/pull/5223) - Migrate fontawesome 5 -> 6

diff --git a/apps/block_scout_web/assets/css/_code.scss b/apps/block_scout_web/assets/css/_code.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 pre {
   white-space: pre-wrap;
 }
@@ -23,7 +25,7 @@ pre {
 }
 
 .pre-scrollable-shorty {
-  max-height: $pre-scrollable-max-height / 7;
+  max-height: math.div($pre-scrollable-max-height, 7);
 }
 
 .tile pre {

diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss
@@ -132,9 +132,3 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "theme/custom_contracts/dark-forest-theme";
 @import "theme/custom_contracts/circles-theme";
 
-:export {
-  dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color;
-  dashboardLineColorMarket: $dashboard-line-color-market;
-  dashboardLineColorPrice: $dashboard-line-color-price;
-  dashboardLineColorTransactions: $dashboard-line-color-transactions;
-}
diff --git a/apps/block_scout_web/assets/css/components/_api.scss b/apps/block_scout_web/assets/css/components/_api.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 $api-text-monospace-color: $secondary !default;
 $api-text-monospace-background: rgba($api-text-monospace-color, 0.1) !default;
 $api-anchors-list-background-color: #f6f7f9 !default;
@@ -187,7 +189,7 @@ $api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default;
 .api-doc-parameters-list {
   border-bottom: 1px solid $base-border-color;
   margin-bottom: $card-vertical-padding;
-  padding-bottom: $card-vertical-padding / 2;
+  padding-bottom: math.div($card-vertical-padding, 2);
 }
 
 .api-doc-parameters-list-title {

diff --git a/apps/block_scout_web/assets/css/components/_btn_add_to_mm.scss b/apps/block_scout_web/assets/css/components/_btn_add_to_mm.scss
@@ -1,5 +1,5 @@
 .btn-add-to-mm {
-    background-image: url("/images/icons/metamask-fox.svg");
+    background-image: url("../static/images/icons/metamask-fox.svg");
     background-position: center;
     background-size: 22px 22px;
     margin-bottom: 1px;
@@ -12,7 +12,7 @@
 }
 
 .btn-add-chain-to-mm {
-    background-image: url("/images/icons/metamask-fox.svg");
+    background-image: url("../static/images/icons/metamask-fox.svg");
     background-position: center;
     background-size: 20px 20px;
     background-repeat: no-repeat;

diff --git a/apps/block_scout_web/assets/css/components/_btn_swap.scss b/apps/block_scout_web/assets/css/components/_btn_swap.scss
@@ -9,24 +9,24 @@
     cursor: pointer;
 
     &.honeypot {
-        background-image: url("/images/icons/swap/honeyswap.png");
+        background-image: url(../static/images/icons/swap/honeyswap.png);
     }
     &.sushi {
-        background-image: url("/images/icons/swap/sushi.svg");
+        background-image: url(../static/images/icons/swap/sushi.svg);
     }
     &.swapr {
-        background-image: url("/images/icons/swap/swapr.svg");
+        background-image: url(../static/images/icons/swap/swapr.svg);
     }
     &.curve {
-        background-image: url("/images/icons/swap/curve.svg");
+        background-image: url(../static/images/icons/swap/curve.svg);
     }
     &.component {
-        background-image: url("/images/icons/swap/component.png");
+        background-image: url(../static/images/icons/swap/component.png);
     }
     &.cowswap {
-        background-image: url("/images/icons/swap/cowswap.png");
+        background-image: url(../static/images/icons/swap/cowswap.png);
     }
     &.oneinch {
-        background-image: url("/images/icons/swap/1inch.svg");
+        background-image: url(../static/images/icons/swap/1inch.svg);
     }
 }
diff --git a/apps/block_scout_web/assets/css/components/_button.scss b/apps/block_scout_web/assets/css/components/_button.scss
@@ -97,7 +97,7 @@ $button-secondary-color: $secondary !default;
 }
 
 .spinner {
-  background-image: url('/images/spinner.svg');
+  background-image: url('../static/images/spinner.svg');
   background-position: right;
   background-repeat: no-repeat;
   background-size: 30px;

diff --git a/apps/block_scout_web/assets/css/components/_fontawesome_icon.scss b/apps/block_scout_web/assets/css/components/_fontawesome_icon.scss
@@ -2,48 +2,48 @@
     background-color: $footer-text-color;
 
     &.github {
-      -webkit-mask: url(/images/icons/fontawesome/github.svg) no-repeat center;
-      mask: url(/images/icons/fontawesome/github.svg) no-repeat center;
+      -webkit-mask: url(../static/images/icons/fontawesome/github.svg) no-repeat center;
+      mask: url(../static/images/icons/fontawesome/github.svg) no-repeat center;
       height: 22px;
       width: 22px;
       mask-size: 22px !important;
       -webkit-mask-size: 22px !important;
     }
     &.twitter {
-      -webkit-mask: url(/images/icons/fontawesome/twitter.svg) no-repeat center;
-      mask: url(/images/icons/fontawesome/twitter.svg) no-repeat center;
+      -webkit-mask: url(../static/images/icons/fontawesome/twitter.svg) no-repeat center;
+      mask: url(../static/images/icons/fontawesome/twitter.svg) no-repeat center;
       height: 22px;
       width: 22px;
       mask-size: 22px !important;
       -webkit-mask-size: 22px !important;
     }
     &.telegram {
-      -webkit-mask: url(/images/icons/fontawesome/telegram.svg) no-repeat center;
-      mask: url(/images/icons/fontawesome/telegram.svg) no-repeat center;
+      -webkit-mask: url(../static/images/icons/fontawesome/telegram.svg) no-repeat center;
+      mask: url(../static/images/icons/fontawesome/telegram.svg) no-repeat center;
       height: 22px;
       width: 22px;
       mask-size: 22px !important;
       -webkit-mask-size: 22px !important;
     }
     &.bar-chart {
-      -webkit-mask: url(/images/icons/fontawesome/bar-chart.svg) no-repeat center;
-      mask: url(/images/icons/fontawesome/bar-chart.svg) no-repeat center;
+      -webkit-mask: url(../static/images/icons/fontawesome/bar-chart.svg) no-repeat center;
+      mask: url(../static/images/icons/fontawesome/bar-chart.svg) no-repeat center;
       height: 22px;
       width: 22px;
       mask-size: 22px !important;
       -webkit-mask-size: 22px !important;
     }
     &.info-circle {
-      -webkit-mask: url(/images/icons/fontawesome/info-circle.svg) no-repeat center;
-      mask: url(/images/icons/fontawesome/info-circle.svg) no-repeat center;
+      -webkit-mask: url(../static/images/icons/fontawesome/info-circle.svg) no-repeat center;
+      mask: url(../static/images/icons/fontawesome/info-circle.svg) no-repeat center;
       height: 12px;
       width: 12px;
       mask-size: 12px !important;
       -webkit-mask-size: 12px !important;
     }
     &.tag {
-      -webkit-mask: url(/images/icons/fontawesome/tag.svg) no-repeat center;
-      mask: url(/images/icons/fontawesome/tag.svg) no-repeat center;
+      -webkit-mask: url(../static/images/icons/fontawesome/tag.svg) no-repeat center;
+      mask: url(../static/images/icons/fontawesome/tag.svg) no-repeat center;
       height: 12px;
       width: 12px;
       mask-size: 12px !important;

diff --git a/apps/block_scout_web/assets/css/components/_verify_other_explorers.scss b/apps/block_scout_web/assets/css/components/_verify_other_explorers.scss
@@ -66,18 +66,18 @@
 		background-repeat: no-repeat;
 		background-position: center;
 		&.etherscan {
-			@include image-2x('/images/icons/etherscan@2x.png', 15px, 16px);
-			background-image: url("/images/icons/etherscan.png");
+			@include image-2x('../static/images/icons/etherscan@2x.png', 15px, 16px);
+			background-image: url("../static/images/icons/etherscan.png");
 			background-size: 15px 16px;
 		}
 		&.blockchair {
-			@include image-2x('/images/icons/blockchair@2x.png', 10px, 16px);
-			background-image: url("/images/icons/blockchair.png");
+			@include image-2x('../static/images/icons/blockchair@2x.png', 10px, 16px);
+			background-image: url("../static/images/icons/blockchair.png");
 			background-size: 10px 16px;
 		}
 		&.etherchain {
-			@include image-2x('/images/icons/etherchain@2x.png', 16px, 16px);
-			background-image: url("/images/icons/etherchain.png");
+			@include image-2x('../static/images/icons/etherchain@2x.png', 16px, 16px);
+			background-image: url("../static/images/icons/etherchain.png");
 			background-size: 16px 16px;
 		}
 	}
@@ -168,8 +168,8 @@
 	&:first-child {
 		.verify-other-explorers-cell.left {
 			.exp-logo {
-				@include image-2x('/images/icons/etherscan@2x.png', 15px, 16px);
-				background-image: url("/images/icons/etherscan.png");
+				@include image-2x('../static/images/icons/etherscan@2x.png', 15px, 16px);
+				background-image: url("../static/images/icons/etherscan.png");
 				background-repeat: no-repeat;
 				padding-left: 25px;
 				background-size: 15px 16px;
@@ -179,8 +179,8 @@
 	&:nth-child(2) {
 		.verify-other-explorers-cell.left {
 			.exp-logo {
-				@include image-2x('/images/icons/blockchair@2x.png', 10px, 16px);
-				background-image: url("/images/icons/blockchair.png");
+				@include image-2x('../static/images/icons/blockchair@2x.png', 10px, 16px);
+				background-image: url("../static/images/icons/blockchair.png");
 				background-repeat: no-repeat;
 				padding-left: 25px;
 				background-size: 10px 16px;
@@ -191,8 +191,8 @@
 	&:nth-child(3) {
 		.verify-other-explorers-cell.left {
 			.exp-logo {
-				@include image-2x('/images/icons/etherchain@2x.png', 16px, 16px);
-				background-image: url("/images/icons/etherchain.png");
+				@include image-2x('../static/images/icons/etherchain@2x.png', 16px, 16px);
+				background-image: url("../static/images/icons/etherchain.png");
 				background-repeat: no-repeat;
 				padding-left: 25px;
 				background-size: 16px 16px;
@@ -209,7 +209,7 @@
 }
 
 .link {
-	background-image: url("/images/icons/link.svg");
+	background-image: url("../static/images/icons/link.svg");
 	background-repeat: no-repeat;
 	padding-left: 15px;
 	background-size: 12px 12px;

diff --git a/apps/block_scout_web/assets/css/export-vars-to-js.module.scss b/apps/block_scout_web/assets/css/export-vars-to-js.module.scss
@@ -0,0 +1,32 @@
+@import "./mixins";
+
+// Bootstrap Core CSS
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+@import "theme/variables";
+
+@import "~bootstrap/scss/utilities/background";
+@import "~bootstrap/scss/utilities/position";
+@import "~bootstrap/scss/utilities/borders";
+@import "~bootstrap/scss/progress";
+
+@import "components/navbar";
+@import "components/alerts";
+@import "components/stakes_variables";
+@import "components/stakes_table";
+@import "components/dashboard-banner";
+
+@import "theme/dark-theme";
+
+@import "theme/custom_contracts/dark-forest-theme";
+@import "theme/custom_contracts/circles-theme";
+
+
+:export {
+  dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color;
+  dashboardLineColorMarket: $dashboard-line-color-market;
+  dashboardLineColorPrice: $dashboard-line-color-price;
+  dashboardLineColorTransactions: $dashboard-line-color-transactions;
+}
diff --git a/apps/block_scout_web/assets/css/main-page.scss b/apps/block_scout_web/assets/css/main-page.scss
@@ -63,7 +63,6 @@
 @import "components/btn_line";
 @import "components/stakes_variables";
 @import "components/btn_add_to_mm";
-@import "components/btn_swap";
 @import "components/errors";
 @import "components/btn_no_border";
 @import "components/custom_tooltips";

diff --git a/apps/block_scout_web/assets/css/theme/_base_variables.scss b/apps/block_scout_web/assets/css/theme/_base_variables.scss
@@ -3,6 +3,8 @@
 // Variables should follow the `$component-state-property-size` formula for
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
+@use 'sass:math';
+
 $dashboard-line-color-price: #8286a9 !default;
 $base-border-color: #e2e5ec !default;
 $common-container-margin: 50px !default;
@@ -286,7 +288,7 @@ $h4-font-size: $font-size-base * 1.5 !default;
 $h5-font-size: $font-size-base * 1.25 !default;
 $h6-font-size: $font-size-base !default;
 
-$headings-margin-bottom: ($spacer / 2) !default;
+$headings-margin-bottom: math.div($spacer, 2) !default;
 $headings-font-family: inherit !default;
 $headings-font-weight: 500 !default;
 $headings-line-height: 1.2 !default;
@@ -672,11 +674,11 @@ $nav-pills-link-active-color: $component-active-color !default;
 $nav-pills-link-active-bg: $component-active-bg !default;
 
 $nav-divider-color: $gray-200 !default;
-$nav-divider-margin-y: ($spacer / 2) !default;
+$nav-divider-margin-y: math.div($spacer, 2) !default;
 
 // Navbar
 
-$navbar-padding-y: ($spacer / 2) !default;
+$navbar-padding-y: math.div($spacer, 2) !default;
 $navbar-padding-x: $spacer !default;
 
 $navbar-nav-link-padding-x: 0.5rem !default;
@@ -687,7 +689,7 @@ $nav-link-height: (
   $font-size-base * $line-height-base + $nav-link-padding-y * 2
 ) !default;
 $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-padding-y: math.div($nav-link-height - $navbar-brand-height, 2) !default;
 
 $navbar-toggler-padding-y: 0.25rem !default;
 $navbar-toggler-padding-x: 0.75rem !default;
@@ -766,7 +768,7 @@ $card-bg: $white !default;
 
 $card-img-overlay-padding: 1.25rem !default;
 
-$card-group-margin: ($grid-gutter-width / 2) !default;
+$card-group-margin: math.div($grid-gutter-width, 2) !default;
 $card-deck-margin: $card-group-margin !default;
 
 $card-columns-count: 3 !default;

diff --git a/apps/block_scout_web/assets/css/theme/custom_contracts/_circles-theme.scss b/apps/block_scout_web/assets/css/theme/custom_contracts/_circles-theme.scss
@@ -40,7 +40,7 @@ $c-dark-text-color: #8a8dba;
 	.footer {
 		background: $c-secondary;
 		color: $c-quarternary;
-		background-image: url(/images/custom-themes/circles/footer_logo.svg) !important;
+		background-image: url(../static/images/custom-themes/circles/footer_logo.svg) !important;
 		background-position: bottom 0px right 30px;
 		background-repeat: no-repeat;
 	}
@@ -105,7 +105,7 @@ $c-dark-text-color: #8a8dba;
 
 	.card-background-1 {
 		background-color: $c-tertiary;
-		background-image: url(/images/custom-themes/circles/balance.svg);
+		background-image: url(../static/images/custom-themes/circles/balance.svg);
 		background-repeat: no-repeat;
 		-webkit-background-size: cover;
 		-moz-background-size: cover;
@@ -187,11 +187,11 @@ $c-dark-text-color: #8a8dba;
 	}
 
 	.btn-copy-icon {
-		content: url(/images/custom-themes/circles/copy-circles.svg);
+		content: url(../static/images/custom-themes/circles/copy-circles.svg);
 	}
 
 	.btn-qr-icon {
-		content: url(/images/custom-themes/circles/qr-circles.svg);
+		content: url(../static/images/custom-themes/circles/qr-circles.svg);
 	}
 
 	.btn-copy-icon, .btn-qr-icon, .btn-address-card-icon .btn-contract-icon {
@@ -499,7 +499,7 @@ $c-dark-text-color: #8a8dba;
 	}
 
 	.custom-balance-icon {
-		background-image: url(/images/custom-themes/circles/balance.svg);
+		background-image: url(../static/images/custom-themes/circles/balance.svg);
 		margin-right: 0px;
 		margin-left: auto;
 		max-width: 100%;
@@ -518,7 +518,7 @@ $c-dark-text-color: #8a8dba;
 	}
 
 	.custom-address-icon {
-		content: url(/images/custom-themes/circles/logo.svg);
+		content: url(../static/images/custom-themes/circles/logo.svg);
 
 		@media screen and (max-width: 768px) {
 			margin-bottom: 20px;
@@ -547,7 +547,7 @@ $c-dark-text-color: #8a8dba;
 	}
 
 	.application-icon {
-		content: url(/images/custom-themes/circles/logo.svg);
+		content: url(../static/images/custom-themes/circles/logo.svg);
 		&:hover {
 			background-color: rgba(125, 34, 68, 0.4);
 		}