scriptex · scriptex · Jun 4, 2026 · Jun 4, 2026
diff --git a/README.md b/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 SASS 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,14 +171,12 @@ npm run build
     The class name corresponds to the name of the PNG file.
 
 4.  Latest Typescript support
-
-    -   Minification of the bundled file
-    -   Source maps
+    - 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
@@ -212,10 +207,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
 
@@ -233,13 +227,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.**
 

diff --git a/package.json b/package.json
@@ -42,9 +42,9 @@
 		"itscss": "3.1.0"
 	},
 	"devDependencies": {
-		"@types/node": "24.12.4",
-		"@typescript-eslint/eslint-plugin": "8.59.4",
-		"@typescript-eslint/parser": "8.59.4",
+		"@types/node": "25.9.1",
+		"@typescript-eslint/eslint-plugin": "8.60.1",
+		"@typescript-eslint/parser": "8.60.1",
 		"autoprefixer": "10.5.0",
 		"browser-sync": "3.0.4",
 		"browser-sync-webpack-plugin": "2.4.0",
@@ -54,35 +54,34 @@
 		"critical": "8.0.0",
 		"css-loader": "7.1.4",
 		"cssnano": "8.0.1",
-		"eslint": "10.4.0",
+		"eslint": "10.4.1",
 		"eslint-config-prettier": "10.1.8",
 		"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.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.99.0",
-		"sass-loader": "16.0.8",
+		"sass": "1.100.0",
+		"sass-loader": "17.0.0",
 		"source-map-loader": "5.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",
-		"ts-loader": "9.5.7",
-		"typescript": "5.9.3",
-		"webpack": "5.107.0",
-		"webpack-cli": "7.0.2",
+		"ts-loader": "9.6.0",
+		"typescript": "6.0.3",
+		"webpack": "5.107.2",
+		"webpack-cli": "7.0.3",
 		"webpack-shell-plugin-next": "2.3.3",
 		"webpack-spritesmith": "1.1.0"
 	},

diff --git a/tsconfig.json b/tsconfig.json
@@ -17,6 +17,7 @@
 		"noImplicitReturns": true,
 		"noImplicitThis": true,
 		"noStrictGenericChecks": false,
+		"rootDir": ".",
 		"outDir": "./assets/dist/",
 		"pretty": true,
 		"removeComments": false,
@@ -27,7 +28,7 @@
 		"strictFunctionTypes": true,
 		"strictPropertyInitialization": true,
 		"strictNullChecks": true,
-		"target": "es5"
+		"target": "ESNext"
 	},
 	"include": ["./assets/scripts/**/*"]
 }
diff --git a/webpack.config.js b/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');
@@ -24,7 +23,7 @@ const browserSyncConfig = server => ({
 
 						exec(`php ${file} > ${name}.html`);
 					}
-			  }
+				}
 			: '**/*.php',
 		'**/*.html',
 		'./assets/dist/app.css',
@@ -149,10 +148,7 @@ module.exports = (env, argv) => {
 						{
 							loader: 'sass-loader',
 							options: {
-								api: 'legacy',
-								sassOptions: {
-									importer: magicImporter()
-								},
+								api: 'auto',
 								...sourceMap
 							}
 						}