Merge pull request #1689 from lemonslut/🍋/uppies

chore: bump deps

package.json

@@ -26,45 +26,45 @@
 		"font:update": "node bin/update_fonts"
 	},
 	"devDependencies": {
-		"@cyclonedx/webpack-plugin": "^3.14.0",
+		"@cyclonedx/webpack-plugin": "^5.0.1",
 		"@ffz/fontello-cli": "^1.0.4",
 		"@types/chrome": "^0.0.277",
-		"@types/crypto-js": "^4.2.1",
+		"@types/crypto-js": "^4.2.2",
 		"@types/js-cookie": "^3.0.6",
 		"@types/safe-regex": "^1.1.6",
 		"@types/vue-clickaway": "^2.2.4",
-		"@types/webpack-env": "^1.18.4",
+		"@types/webpack-env": "^1.18.8",
-		"browserslist": "^4.21.10",
+		"browserslist": "^4.25.0",
 		"copy-webpack-plugin": "^11.0.0",
 		"cross-env": "^7.0.3",
-		"css-loader": "^6.8.1",
+		"css-loader": "^6.11.0",
-		"esbuild-loader": "^4.0.2",
+		"esbuild-loader": "^4.3.0",
-		"eslint": "^8.48.0",
+		"eslint": "^8.57.1",
-		"eslint-plugin-import": "^2.28.1",
+		"eslint-plugin-import": "^2.31.0",
-		"eslint-plugin-react": "^7.33.2",
+		"eslint-plugin-react": "^7.37.5",
-		"eslint-plugin-vue": "^9.17.0",
+		"eslint-plugin-vue": "^9.33.0",
 		"extract-loader": "^5.1.0",
 		"file-loader": "^6.2.0",
-		"glob": "^10.3.10",
+		"glob": "^10.4.5",
 		"json-loader": "^0.5.7",
 		"minify-graphql-loader": "^1.0.2",
 		"raw-loader": "^4.0.2",
-		"rimraf": "^5.0.1",
+		"rimraf": "^5.0.10",
-		"sass": "^1.66.1",
+		"sass": "^1.89.1",
-		"sass-loader": "^13.3.2",
+		"sass-loader": "^16.0.5",
-		"semver": "^7.5.4",
+		"semver": "^7.7.2",
-		"typedoc": "^0.25.3",
+		"typedoc": "^0.25.13",
 		"typedoc-plugin-markdown": "^3.17.1",
-		"typedoc-plugin-mdn-links": "^3.1.0",
+		"typedoc-plugin-mdn-links": "^3.3.8",
-		"typedoc-plugin-no-inherit": "^1.4.0",
+		"typedoc-plugin-no-inherit": "^1.6.1",
-		"typedoc-plugin-rename-defaults": "^0.7.0",
+		"typedoc-plugin-rename-defaults": "^0.7.3",
-		"typescript": "^5.2.2",
+		"typescript": "^5.8.3",
-		"vue-loader": "^15.10.2",
+		"vue-loader": "^15.11.1",
-		"vue-template-compiler": "^2.6.14",
+		"vue-template-compiler": "^2.7.16",
-		"webpack": "^5.88.2",
+		"webpack": "^5.99.9",
-		"webpack-cli": "^5.1.4",
+		"webpack-cli": "^6.0.1",
-		"webpack-dev-server": "^4.15.1",
+		"webpack-dev-server": "^5.2.2",
-		"webpack-manifest-plugin": "^5.0.0"
+		"webpack-manifest-plugin": "^5.0.1"
 	},
 	"repository": {
 		"type": "git",
@@ -74,28 +74,28 @@
 		"@ffz/icu-msgparser": "^2.0.0",
 		"@popperjs/core": "^2.11.8",
 		"crypto-js": "^4.2.0",
-		"dayjs": "^1.10.7",
+		"dayjs": "^1.11.13",
 		"denoflare-mqtt": "^0.0.2",
 		"displacejs": "^1.4.1",
 		"emoji-regex": "^9.2.2",
 		"file-saver": "^2.0.5",
-		"graphql": "^16.0.1",
+		"graphql": "^16.11.0",
 		"graphql-tag": "^2.12.6",
 		"js-cookie": "^3.0.5",
-		"jszip": "^3.7.1",
+		"jszip": "^3.10.1",
-		"markdown-it": "^12.2.0",
+		"markdown-it": "^12.3.2",
 		"markdown-it-link-attributes": "^3.0.0",
 		"mnemonist": "^0.38.5",
-		"path-to-regexp": "^3.2.0",
+		"path-to-regexp": "^3.3.0",
 		"raven-js": "^3.27.2",
 		"react": "^18.3.1",
 		"safe-regex": "^2.1.1",
-		"sortablejs": "^1.14.0",
+		"sortablejs": "^1.15.6",
 		"sourcemapped-stacktrace": "^1.1.11",
 		"text-diff": "^1.0.1",
-		"vue": "^2.6.14",
+		"vue": "^2.7.16",
 		"vue-clickaway": "^2.2.2",
-		"vue-color": "^2.8.1",
+		"vue-color": "^2.8.2",
 		"vue-observe-visibility": "^1.0.0",
 		"vuedraggable": "^2.24.3"
 	},
@@ -105,6 +105,14 @@
 			"chalk@<4": ">=4 <5",
 			"set-value@<4.0.1": ">=4.0.1",
 			"glob-parent@<5.1.2": ">=5.1.2"
-		}
+		},
+		"onlyBuiltDependencies": [
+			"esbuild",
+			"libxmljs2"
+		],
+		"ignoredBuiltDependencies": [
+			"@parcel/watcher",
+			"core-js"
+		]
 	}
 }

src/sites/clips/styles/clips-main.scss

@@ -1,5 +1,5 @@
-@import 'styles/main.scss';
+@use '../../../../styles/main.scss';
-@import '../../twitch-twilight/styles/mod_card.scss';
+@use '../../twitch-twilight/styles/mod_card.scss';
 
 .tw-root--theme-dark, html {
 	body {

src/sites/player/styles/player-main.scss

@@ -1,4 +1,4 @@
-@import 'styles/main.scss';
+@use '../../../../styles/main.scss';
 
 .video-player__inactive,
 .video-player__overlay[data-controls="false"] {
@@ -55,4 +55,4 @@ div[data-a-target="player-settings-menu"] {
 
 .ffz--cc-button {
 	order: 999;
-}
+}

src/sites/twitch-twilight/styles/main.scss

@@ -1,15 +1,15 @@
-@import 'styles/main.scss';
+@use '../../../../styles/main.scss';
 
-@import 'menu_button';
+@use 'menu_button';
-@import 'player';
+@use 'player';
-@import 'channel';
+@use 'channel';
 
-@import 'chat';
+@use 'chat';
-@import 'directory';
+@use 'directory';
 
-@import 'fixes';
+@use 'fixes';
 
 //@import 'host_options';
-@import 'featured_follow';
+@use 'featured_follow';
-@import 'mod_card';
+@use 'mod_card';
-@import 'easteregg';
+@use 'easteregg';

styles/icons.scss

@@ -1,3 +1,4 @@
+@use "sass:meta";
 @font-face {
 	font-family: 'ffz-fontello';
 	src: url('~res/font/ffz-fontello.woff2') format('woff2'),
@@ -94,7 +95,7 @@
 	}
 }
 
-@import "./fontello/ffz-fontello-codes.scss";
+@include meta.load-css("fontello/ffz-fontello-codes.scss");
 
 .ffz-i-pd-1:before { margin-right: 1rem }
 .ffz-i-pd-2:before { margin-right: 2rem }

styles/main.scss

@@ -1,12 +1,12 @@
-@import 'icons';
+@use 'icons';
-@import 'tooltips';
+@use 'tooltips';
-@import 'widgets';
+@use 'widgets';
-@import 'dialog';
+@use 'dialog';
 
-@import 'native/index';
+@use 'native/index';
-@import 'structure/index';
+@use 'structure/index' as index2;
 
-@import 'chat';
+@use 'chat';
 
 @keyframes ffz-rotateplane {
 	0% { transform: rotateY(90deg) rotateX(180deg) }

styles/native/index.scss

@@ -1,14 +1,14 @@
-@import "button";
+@use "button";
-@import "checkbox";
+@use "checkbox";
-@import "interactable";
+@use "interactable";
-@import "text";
+@use "text";
-@import "link";
+@use "link";
-@import "card";
+@use "card";
-@import "tag";
+@use "tag";
-@import "progress";
+@use "progress";
-@import "tooltip";
+@use "tooltip";
-@import "balloon";
+@use "balloon";
-@import "slider";
+@use "slider";
 
 .tw-line-height-body {
     line-height: 1.5!important

styles/structure/index.scss

@@ -1,4 +1,4 @@
-@import "balloon";
+@use "balloon";
 
 .ffz-avatar {
 	background-color: inherit;

styles/widgets.scss

@@ -1,21 +1,21 @@
-@import "./widgets/container.scss";
+@use "widgets/container.scss";
 
-@import "./widgets/main-menu.scss";
+@use "widgets/main-menu.scss";
-@import "./widgets/menu-container.scss";
+@use "widgets/menu-container.scss";
-@import "./widgets/tab-container.scss";
+@use "widgets/tab-container.scss";
 
-@import "./widgets/key-picker.scss";
+@use "widgets/key-picker.scss";
-@import "./widgets/menu-tree.scss";
+@use "widgets/menu-tree.scss";
-@import "./widgets/profile-selector.scss";
+@use "widgets/profile-selector.scss";
-@import "./widgets/badge-visibility.scss";
+@use "widgets/badge-visibility.scss";
-@import "./widgets/add-ons.scss";
+@use "widgets/add-ons.scss";
 
-@import "./widgets/color-picker.scss";
+@use "widgets/color-picker.scss";
-@import "./widgets/icon-picker.scss";
+@use "widgets/icon-picker.scss";
 
-@import "./widgets/chat-tester.scss";
+@use "widgets/chat-tester.scss";
 
-@import "./widgets/check-box.scss";
+@use "widgets/check-box.scss";
 
 .tw-display-inline { display: inline !important }
 .tw-width-auto { width: auto !important }

styles/widgets/menu-container.scss

@@ -1,3 +1,5 @@
+@use "container";
+
 .ffz--menu-container {
 	@extend .ffz--outer-container;
 	@extend .ffz--inner-container;
@@ -5,7 +7,7 @@
 	position: relative;
 
 	&:not(.border):not(.border-b) {
-		margin-bottom: $spacing;
+		margin-bottom: container.$spacing;
 	}
 
 	& > div {
@@ -19,7 +21,7 @@
 
 	& > header {
 		position: absolute;
-		top: 0; left: $spacing - 0.5rem;
+		top: 0; left: container.$spacing - 0.5rem;
 		transform: translateY(-50%);
 		padding: 0 0.5rem;
 

styles/widgets/tab-container.scss

@@ -1,3 +1,5 @@
+@use "container";
+
 .ffz--tab-container {
 	@extend .ffz--outer-container;
 
@@ -33,4 +35,4 @@
 	& > section {
 		@extend .ffz--inner-container;
 	}
-}
+}

webpack.config.js

@@ -140,6 +140,10 @@ const config = {
 		}
 	},
 
+	performance: {
+		hints: false,
+	},
+
 	plugins: [
 		new CycloneDxWebpackPlugin({
 			specVersion: '1.6',
@@ -317,7 +321,6 @@ if ( DEV_SERVER )
 	config.devServer = {
 		client: false,
 		webSocketServer: false,
-		magicHtml: false,
 		liveReload: false,
 		hot: false,
 
@@ -338,12 +341,13 @@ if ( DEV_SERVER )
 			publicPath: '/script/',
 		},
 
-		proxy: {
+		proxy: [
-			'**': {
+			{
+				context: ['**'],
 				target: 'https://cdn2.frankerfacez.com/',
 				changeOrigin: true
-			}
+			},
-		},
+		],
 
 		setupMiddlewares: (middlewares, devServer) => {
 
@@ -380,7 +384,7 @@ if ( DEV_SERVER )
 				next();
 			});
 
-			return middlewares;
+			return middlewares.filter(middleware => middleware.name !== 'cross-origin-header-check');
 		}
 	};