MAINT: upgrade to webpack5 (#265)

* maint: upgrade to webpack5 * feat: enable source maps * chore: don't need sourceMap (devtool sets this)
QuantEcon · Oct 25, 2024 · 3d0b162 · 3d0b162 · github-actions · Oct 25, 2024
1 parent aeebe8d
commit 3d0b162
Show file tree

Hide file tree

Showing 8 changed files with 4,286 additions and 18,637 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,20 +5,15 @@
       "build": "webpack"
     },
     "devDependencies": {
-      "css-loader": "^3.4.2",
-      "dedent": "^0.7.0",
-      "extract-loader": "^4.0.3",
-      "file-loader": "^5.0.2",
-      "html-webpack-plugin": "^4.3.0",
-      "node-sass": "^6.0.1",
-      "optimize-css-assets-webpack-plugin": "^5.0.3",
-      "sass-loader": "^10.1.1",
-      "style-loader": "^1.1.3",
-      "webpack": "^4.41.6",
-      "webpack-cli": "^3.3.11",
-      "webpack-dev-server": "^3.10.3"
-    },
-    "dependencies": {
-      "optimize-css-assets-webpack-plugin": "^5.0.3"
+    "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^4.2.2",
+    "dedent": "^0.7.0",
+    "html-webpack-plugin": "^5.0.0",
+    "mini-css-extract-plugin": "^2.7.5",
+    "sass": "^1.59.3",
+    "sass-loader": "^10.3.1",
+    "webpack": "^5.0.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^5.0.0"
     }
   }
diff --git a/src/quantecon_book_theme/assets/styles/_breakpoints.scss b/src/quantecon_book_theme/assets/styles/_breakpoints.scss
@@ -0,0 +1,4 @@
+$xl: 1200px;
+$lg: 992px;
+$md: 768px;
+$sm: 576px;
diff --git a/src/quantecon_book_theme/assets/styles/_colors.scss b/src/quantecon_book_theme/assets/styles/_colors.scss
@@ -0,0 +1,4 @@
+$primary: #0072bc;
+$secondary: #d8655e;
+$body: #444444;
+$body-light: #888888;
diff --git a/src/quantecon_book_theme/assets/styles/_margin.scss b/src/quantecon_book_theme/assets/styles/_margin.scss
@@ -1,3 +1,5 @@
+@use "breakpoints";
+
 /**
  * Margin content
  * This is the area to the right of the main content
@@ -32,7 +34,7 @@ $margin-offset: -$margin-width-relative-to-content;
   margin-left: 0.5rem;
 
   // Wide screens and printing should force margin behavior
-  @media (min-width: $breakpoint-xl), print {
+  @media (min-width: breakpoints.$xl), print {
     width: $margin-width-width-gutter;
     margin: 0 $margin-offset 0 0;
 
@@ -69,7 +71,7 @@ label.margin-toggle {
   sup {
     user-select: none;
   }
-  @media (max-width: $breakpoint-xl) {
+  @media (max-width: breakpoints.$xl) {
     cursor: pointer;
     color: rgb(0, 113, 188);
     &.marginnote-label {
@@ -83,7 +85,7 @@ label.margin-toggle {
 
 input.margin-toggle {
   display: none;
-  @media (max-width: $breakpoint-xl) {
+  @media (max-width: breakpoints.$xl) {
     &:checked + .sidenote,
     &:checked + .marginnote {
       display: block;
@@ -102,12 +104,12 @@ input.margin-toggle {
   span.marginnote {
     z-index: 2;
     position: relative;
+    border-left: none;
     sup {
       user-select: none;
     }
     @include margin-content();
-    border-left: none;
-    @media (max-width: $breakpoint-xl) {
+    @media (max-width: breakpoints.$xl) {
       display: none;
     }
   }
@@ -150,7 +152,7 @@ input.margin-toggle {
       }
     }
 
-    @media (min-width: $breakpoint-xl) {
+    @media (min-width: breakpoints.$xl) {
       // No border for margin sidebars on wide screen
       border: none;
 
@@ -205,7 +207,7 @@ input.margin-toggle {
   div.full-width {
     z-index: 2;
     position: relative;
-    @media (min-width: $breakpoint-xl) {
+    @media (min-width: breakpoints.$xl) {
       max-width: $content-fullwidth-width;
       width: $content-fullwidth-width;
     }

diff --git a/src/quantecon_book_theme/assets/styles/_quantecon-defaults.scss b/src/quantecon_book_theme/assets/styles/_quantecon-defaults.scss
@@ -1,6 +1,8 @@
+@use "colors";
+
 body {
   div.cell div.cell_input {
-    border-left-color: $color-primary;
+    border-left-color: colors.$primary;
   }
 }
 

diff --git a/src/quantecon_book_theme/assets/styles/index.scss b/src/quantecon_book_theme/assets/styles/index.scss
@@ -4,24 +4,17 @@ IMPORTS
 -----------------------------------
 */
 
-@import url("https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,700;1,400&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap");
-
-$breakpoint-xl: 1200px;
-$breakpoint-lg: 992px;
-$breakpoint-md: 768px;
-$breakpoint-sm: 576px;
+@use "colors";
+@use "breakpoints";
 
-$color-primary: #0072bc;
-$color-secondary: #d8655e;
-$color-body: #444444;
-$color-body-light: #888888;
+@forward "normalize";
+@forward "html5boilerplate";
+@forward "quantecon-defaults";
+@forward "syntax";
+@forward "tippy-themes";
+@forward "margin";
 
-@import "normalize";
-@import "html5boilerplate";
-@import "quantecon-defaults";
-@import "syntax";
-@import "tippy-themes";
-@import "margin";
+@import url("https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,700;1,400&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap");
 
 * {
   -webkit-font-smoothing: antialiased;
@@ -41,7 +34,7 @@ html {
     font-size: 0.9rem;
   }
 
-  @media (min-width: $breakpoint-md) {
+  @media (min-width: breakpoints.$md) {
     font-size: 16px;
 
     &.font-plus {
@@ -53,7 +46,7 @@ html {
     }
   }
 
-  @media (min-width: $breakpoint-lg) {
+  @media (min-width: breakpoints.$lg) {
     font-size: 18px;
 
     &.font-plus {
@@ -65,7 +58,7 @@ html {
     }
   }
 
-  @media (min-width: $breakpoint-xl) {
+  @media (min-width: breakpoints.$xl) {
     font-size: 18px;
 
     &.font-plus {
@@ -473,7 +466,7 @@ tt {
         }
 
         a {
-          color: $color-body;
+          color: colors.$body;
         }
         path {
           fill: inherit;
@@ -553,7 +546,7 @@ tt {
             transform: none;
 
             input {
-              border-color: $color-body;
+              border-color: colors.$body;
             }
           }
         }
@@ -580,7 +573,7 @@ tt {
           height: 20px;
         }
 
-        @media (max-width: $breakpoint-sm) {
+        @media (max-width: breakpoints.$sm) {
           &.btn__plus,
           &.btn__minus,
           &.btn__fullscreen,
@@ -597,21 +590,21 @@ tt {
   max-width: 800px;
   position: relative;
   flex-grow: 1;
-  @media (max-width: $breakpoint-md) {
+  @media (max-width: breakpoints.$md) {
     max-width: 100%;
   }
   &__toc {
-    @media (max-width: 1350px) {
-      display: none;
-    }
-
     position: absolute;
     right: calc(-200px - 3rem);
     top: 0;
     margin: 0;
     height: 100%;
     width: 200px;
 
+    @media (max-width: 1350px) {
+      display: none;
+    }
+
     .inner {
       height: 100%;
     }
@@ -638,11 +631,11 @@ tt {
           padding: 0;
 
           a {
-            color: $color-body;
+            color: colors.$body;
             opacity: 0.8;
 
             &.active {
-              color: $color-primary;
+              color: colors.$primary;
               opacity: 1;
             }
           }
@@ -666,12 +659,12 @@ tt {
       font-size: 0.9rem;
 
       a {
-        color: $color-body;
+        color: colors.$body;
         opacity: 0.8;
         text-decoration: none;
 
         &:hover {
-          color: $color-primary;
+          color: colors.$primary;
           opacity: 1;
         }
       }
@@ -691,15 +684,15 @@ tt {
       display: none;
     }
 
-    border-bottom: 5px solid $color-primary;
+    border-bottom: 5px solid colors.$primary;
     margin: 0 0 4rem 0;
     padding: 0 0 1rem 0;
 
     &-copy {
       display: flex;
       //justify-content: space-between;
 
-      @media (max-width: $breakpoint-md) {
+      @media (max-width: breakpoints.$md) {
         flex-direction: column-reverse;
       }
     }
@@ -710,10 +703,10 @@ tt {
       flex-shrink: 0;
 
       a {
-        color: $color-body;
+        color: colors.$body;
       }
 
-      @media (max-width: $breakpoint-md) {
+      @media (max-width: breakpoints.$md) {
         font-weight: 400;
         font-size: 0.9rem;
       }
@@ -722,7 +715,7 @@ tt {
     &-subheading {
       margin: 0;
 
-      @media (max-width: $breakpoint-md) {
+      @media (max-width: breakpoints.$md) {
         margin: 0 0 0.5rem 0;
         font-weight: 700;
       }
@@ -732,7 +725,7 @@ tt {
       margin: 0.25rem 0 0 0;
       font-size: 0.9rem;
 
-      @media (max-width: $breakpoint-md) {
+      @media (max-width: breakpoints.$md) {
         font-size: 0.8rem;
       }
     }
@@ -837,11 +830,11 @@ tt {
         margin: 0.25rem 0;
         padding: 0;
         a {
-          color: $color-body;
+          color: colors.$body;
           opacity: 0.8;
 
           &.active {
-            color: $color-primary;
+            color: colors.$primary;
             opacity: 1;
           }
         }
@@ -1199,7 +1192,9 @@ div.admonition,
   margin: 1.5rem auto;
   padding: 0 1rem 0.5rem 1rem;
   page-break-inside: avoid;
-  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1), 0 0 0.05rem rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0 0.2rem 0.5rem rgba(0, 0, 0, 0.1),
+    0 0 0.05rem rgba(0, 0, 0, 0.1);
   > .admonition-title {
     position: relative;
     margin: 0 -1rem;
@@ -1337,13 +1332,13 @@ blockquote {
       display: block;
       text-decoration: none;
       font-weight: normal;
-      background: $color-primary;
+      background: colors.$primary;
       color: #fff;
       padding: 0.25rem 0.5rem;
       border-radius: 2px;
       text-align: center;
       &:hover {
-        background: $color-body;
+        background: colors.$body;
       }
     }
   }