Update all dependencies (#1075)

Author: scriptex

README.md

@@ -143,20 +143,17 @@ npm run build
 ## Details
 
 1.  [SCSS](http://sass-lang.com/) stylesheets preprocessing
-
-    -   SCSS entry point is `main.scss` file located in `assets/styles`
-    -   The whole stylesheets file/folder structure is up to you
-    -   [ITSCSS](https://github.com/scriptex/itscss) boilerplate used as a starting point.
-    -   Glob import in SCSS thanks to [node-sass-magic-importer](https://github.com/maoberlehner/node-sass-magic-importer)
+    - SCSS entry point is `main.scss` file located in `assets/styles`
+    - The whole stylesheets file/folder structure is up to you
+    - [ITSCSS](https://github.com/scriptex/itscss) boilerplate used as a starting point.
 
 2.  [PostCSS](https://github.com/postcss/postcss) stylesheets postprocessing including:
-
-    -   [easy importing](https://github.com/TrySound/postcss-easy-import) of non-sass files
-    -   [url rebase](https://github.com/postcss/postcss-url) - locates and copies assets from `node_modules`
-    -   [postcss-utilities](https://github.com/ismamz/postcss-utilities) - allows usage of utility mixins such as `clearfix`
-    -   [flexbox bugs](https://github.com/luisrudge/postcss-flexbugs-fixes) - fixes common flexbox issues on Internet Explorer
-    -   [css minification](http://cssnano.co/) - minifies the bundles stylesheet
-    -   [automatic vendor prefixes](https://github.com/postcss/autoprefixer)
+    - [easy importing](https://github.com/TrySound/postcss-easy-import) of non-sass files
+    - [url rebase](https://github.com/postcss/postcss-url) - locates and copies assets from `node_modules`
+    - [postcss-utilities](https://github.com/ismamz/postcss-utilities) - allows usage of utility mixins such as `clearfix`
+    - [flexbox bugs](https://github.com/luisrudge/postcss-flexbugs-fixes) - fixes common flexbox issues on Internet Explorer
+    - [css minification](http://cssnano.co/) - minifies the bundles stylesheet
+    - [automatic vendor prefixes](https://github.com/postcss/autoprefixer)
 
     > "Write your CSS rules without vendor prefixes (in fact, forget about them entirely)"
 
@@ -174,16 +171,14 @@ npm run build
     The class name corresponds to the name of the PNG file.
 
 4.  Latest EcmaScript support
-
-    -   Usage of the latest features in EcmaScript
-    -   Using [Babel](https://github.com/babel/babel) to transpile to ES5
-    -   Minification of the bundled file
-    -   Source maps
+    - Usage of the latest features in EcmaScript
+    - Using [Babel](https://github.com/babel/babel) to transpile to ES5
+    - Minification of the bundled file
+    - Source maps
 
 5.  Automatic browser reload using [BrowserSync](https://browsersync.io/)
-
-    -   The setup assumes that you have a web server (MAMP, XAMPP, etc) installed.
-    -   If you wish to use a proxy in browsersync you can do it using the `url` CLI argument like this:
+    - The setup assumes that you have a web server (MAMP, XAMPP, etc) installed.
+    - If you wish to use a proxy in browsersync you can do it using the `url` CLI argument like this:
 
     ```sh
     yarn start --env url=http://your.app
@@ -214,10 +209,9 @@ npm run build
     This action is performed each time the `start` command is invoked.
 
     In order to use the SVG sprite you first need to include it in your markup. You can do so in several ways:
-
-    -   If you're using PHP files, include it in each of your PHP files: `<?php include_once('assets/dist/sprite.svg'); ?>`
-    -   If you're using HTML files, paste the content of the SVG sprite in each of your HTML files.
-    -   If you're using another templating method (posthtml include, handlebars, ejs, etc) you need to do so according to its documentation.
+    - If you're using PHP files, include it in each of your PHP files: `<?php include_once('assets/dist/sprite.svg'); ?>`
+    - If you're using HTML files, paste the content of the SVG sprite in each of your HTML files.
+    - If you're using another templating method (posthtml include, handlebars, ejs, etc) you need to do so according to its documentation.
 
     It is preferred to include the SVG sprite right after your opening `<body>` tag
 
@@ -235,13 +229,13 @@ npm run build
 
 The `assets` folder contains several folders:
 
--   `images` - contains several folders too:
-    -   `favicon` - contains [all icons variations](https://github.com/audreyr/favicon-cheat-sheet)
-    -   `sprite` - contains png sprite's parts
-    -   `svg` - contains svg sprite's parts
-    -   `temp` - contains content images
--   `scripts` - contains the JS modules
--   `styles` - contains the SASS stylesheets
+- `images` - contains several folders too:
+    - `favicon` - contains [all icons variations](https://github.com/audreyr/favicon-cheat-sheet)
+    - `sprite` - contains png sprite's parts
+    - `svg` - contains svg sprite's parts
+    - `temp` - contains content images
+- `scripts` - contains the JS modules
+- `styles` - contains the SASS stylesheets
 
 **Each `start` command regenerates the contents of the `dist` folder.**
 

eslint.config.mjs

@@ -2,19 +2,12 @@ import globals from 'globals';
 
 import compat from 'eslint-plugin-compat';
 
-const GLOBALS_BROWSER_FIX = Object.assign({}, globals.browser, {
-	AudioWorkletGlobalScope: globals.browser['AudioWorkletGlobalScope ']
-});
-
-delete GLOBALS_BROWSER_FIX['AudioWorkletGlobalScope '];
-
 export default [
 	{
 		files: ['./assets/scripts/**/*.js'],
 		languageOptions: {
 			globals: {
-				...globals.node,
-				...GLOBALS_BROWSER_FIX
+				...globals.node
 			},
 			parserOptions: {
 				ecmaVersion: 2023,

package.json

@@ -42,8 +42,8 @@
 		"itscss": "3.1.0"
 	},
 	"devDependencies": {
-		"@babel/core": "7.29.0",
-		"@babel/preset-env": "7.29.5",
+		"@babel/core": "7.29.7",
+		"@babel/preset-env": "7.29.7",
 		"autoprefixer": "10.5.0",
 		"babel-loader": "10.1.1",
 		"browser-sync": "3.0.4",
@@ -54,31 +54,30 @@
 		"critical": "8.0.0",
 		"css-loader": "7.1.4",
 		"cssnano": "8.0.1",
-		"eslint": "10.4.0",
+		"eslint": "10.4.1",
 		"eslint-config-recommended": "4.1.0",
 		"eslint-plugin-compat": "7.0.2",
 		"mini-css-extract-plugin": "2.10.2",
-		"node-sass-magic-importer": "5.3.3",
-		"postcss": "8.5.14",
+		"postcss": "8.5.15",
 		"postcss-cli": "11.0.1",
 		"postcss-easy-import": "4.0.0",
 		"postcss-flexbugs-fixes": "5.0.2",
 		"postcss-loader": "8.2.1",
 		"postcss-merge-rules": "8.0.0",
 		"postcss-normalize": "13.0.1",
-		"postcss-url": "10.1.3",
+		"postcss-url": "10.1.4",
 		"postcss-utilities": "0.8.4",
 		"postcss-watch-folder": "2.0.0",
 		"sass": "1.100.0",
-		"sass-loader": "16.0.8",
+		"sass-loader": "17.0.0",
 		"stylelint": "17.12.0",
 		"stylelint-config-recommended": "18.0.0",
 		"stylelint-config-standard-scss": "17.0.0",
 		"stylelint-no-unsupported-browser-features": "8.1.1",
-		"stylelint-scss": "7.1.1",
+		"stylelint-scss": "7.2.0",
 		"svg-symbol-sprite": "1.5.2",
 		"webpack": "5.107.2",
-		"webpack-cli": "7.0.2",
+		"webpack-cli": "7.0.3",
 		"webpack-shell-plugin-next": "2.3.3",
 		"webpack-spritesmith": "1.1.0"
 	},

webpack.config.js

@@ -3,7 +3,6 @@ const { parse } = require('url');
 const { resolve } = require('path');
 const { readdirSync } = require('fs');
 
-const magicImporter = require('node-sass-magic-importer');
 const { ProvidePlugin } = require('webpack');
 const SpritesmithPlugin = require('webpack-spritesmith');
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
@@ -35,7 +34,7 @@ const browserSyncConfig = server => ({
 
 						exec(`php ${file} > ${name}.html`);
 					}
-			  }
+				}
 			: '**/*.php',
 		'**/*.html',
 		'./assets/dist/app.css',
@@ -159,10 +158,7 @@ module.exports = (env, argv) => {
 						{
 							loader: 'sass-loader',
 							options: {
-								api: 'legacy',
-								sassOptions: {
-									importer: magicImporter()
-								},
+								api: 'auto',
 								...sourceMap
 							}
 						}