Updage sass files to not use deprecated keywords, update webpack configuration to be compatible with latest sass-loader, bump required node version to >= 18.19.0

Author: pnikolov

README.md

@@ -88,7 +88,7 @@
 
 ## Requirements
 
-- `node` : `>=18.12.0`
+- `node` : `>=18.19.0`
 - `npm`
 
 # Setup

package-lock.json

@@ -55,7 +55,7 @@
     "webpack-merge": "^5.8.0"
   },
   "engines": {
-    "node": ">=18.12.0"
+    "node": ">=18.19.0"
   },
   "keywords": [
     "webpack",
@@ -79,6 +79,5 @@
     "lint:js": "eslint --ext .js src/js/",
     "stats": "webpack --config configuration/webpack.prod.config.js --mode=production --json > dist/stats.json && webpack-bundle-analyzer dist/stats.json"
   },
-  "target": "web",
-  "dependencies": {}
+  "target": "web"
 }

package.json

@@ -160,7 +160,7 @@ <h2 id="features">Features</h2>
       </ul>
       <h2 id="requirements">Requirements</h2>
       <ul>
-        <li><code>node</code> : <code>&gt;=18.12.0</code></li>
+        <li><code>node</code> : <code>&gt;=18.19.0</code></li>
         <li><code>npm</code></li>
       </ul>
       <h1 id="setup">Setup</h1>

src/index.html

@@ -1,26 +1,26 @@
 /* By Athlon Front-End Team */
 
 /* Core variables */
-@import 'base/vars';
+@use 'base/vars';
 
 /* CSS Reset */
-@import 'base/reset';
+@use 'base/reset';
 
 /* CSS print */
-@import 'base/print';
+@use 'base/print';
 
 /* Fonts */
-@import 'base/fonts';
+@use 'base/fonts';
 
 /* Mixins, helpers and functions */
-@import 'base/mixins';
+@use 'base/mixins';
 
 /* Vendor */
 
 /* Components */
 
 /* Browser specific styles */
-@import 'dirty/hacks';
+@use 'dirty/hacks';
 
 /* Demo Page styles */
-@import 'demo';
+@use 'demo';

src/scss/app.scss

@@ -1,3 +1,5 @@
+@use "vars";
+
 /**
  * Print Stylesheet
 */
@@ -6,8 +8,8 @@
   @page { margin: 1cm; }
 
   body {
-    background: $white;
-    color: $black;
+    background: vars.$white;
+    color: vars.$black;
   }
 
   a {

src/scss/base/_print.scss

@@ -1,15 +1,17 @@
+@use "base/vars";
+
 body {
-  background: $body-background-color;
-  color: $foreground-color;
+  background: vars.$body-background-color;
+  color: vars.$foreground-color;
   font-family: 'DINP-R', arial, serif;
   font-size: 1.3em;
 }
 
 header {
   font-size: 2em;
-  color: $caption-color;
+  color: vars.$caption-color;
   text-align: center;
-  background: $foreground-color url('../images/design/heading.png') center 20px no-repeat;
+  background: vars.$foreground-color url('../images/design/heading.png') center 20px no-repeat;
   padding: 60px 30px 30px;
   background-size: 160px;
   width: 90%;
@@ -28,8 +30,8 @@ header {
 }
 
 main {
-  background: $foreground-color;
-  color: $black;
+  background: vars.$foreground-color;
+  color: vars.$black;
   margin: 20px auto;
   padding: 40px;
   width: 90%;
@@ -81,15 +83,15 @@ main {
 }
 
 a {
-  color: $link-color;
+  color: vars.$link-color;
 
   &:hover {
-    color: $black;
+    color: vars.$black;
   }
 }
 
 address {
-  color: $accent-color;
+  color: vars.$accent-color;
 }
 
 pre {
@@ -98,10 +100,10 @@ pre {
 
   code {
     display: block;
-    background: $body-background-color;
-    color: $white;
+    background: vars.$body-background-color;
+    color: vars.$white;
     padding: 10px;
-    border-left: 6px solid $link-color;
+    border-left: 6px solid vars.$link-color;
   }
 }
 
@@ -135,17 +137,17 @@ ul ol {
 }
 
 blockquote {
-  background: $light-gray;
-  border-left: 4px solid $link-color;
+  background: vars.$light-gray;
+  border-left: 4px solid vars.$link-color;
   border-radius: 5px;
   margin: 10px 0;
   padding: 10px 10px 10px 20px;
 }
 
 code {
   font-family: Consolas, 'courier new';
-  color: $link-color;
-  background-color: $light-gray;
+  color: vars.$link-color;
+  background-color: vars.$light-gray;
   padding: 2px;
   font-size: 1em;
   border-radius: 5px;
@@ -156,7 +158,7 @@ footer {
   padding-bottom: 20px;
 
   a:hover {
-    color: $white;
+    color: vars.$white;
   }
 }
 

src/scss/demo.scss

@@ -42,7 +42,18 @@ module.exports = {
     rules: [
       {
         test: /\.((c|sa|sc)ss)$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'postcss-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              api: 'modern',
+              sassOptions: {},
+            },
+          },
+        ],
       },
       {
         test: /\.js$/,