style(css): update stylelint to v17

Manual changes:
- removed `indentation` rule (stylelint/stylelint#6504, stylelint/stylelint#6979)
- deprecated property `clip` no autofixed (stylelint/stylelint#8699)
- removed deprecated `word-break: break-word` (stylelint/stylelint#8223)
- removed CommonJS API (stylelint/stylelint#8859)

Automatic changes:
- `import-notation` now uses `"url"` (stylelint/stylelint-config-standard#266)
- use `inset` instead of `top` `right` `bottom` `left`  (stylelint/stylelint#6699)
- use `overflow-wrap` instead of `word-wrap` (stylelint/stylelint#8682)
- added `media-feature-range-notation` (stylelint/stylelint-config-standard#284)

Configuration now in ESM format (https://stylelint.io/migration-guide/to-17).

client/css/style.css

@@ -1,6 +1,6 @@
-@import "../../node_modules/normalize.css/normalize.css";
-@import "fontawesome.css";
-@import "../../node_modules/primer-tooltips/build/build.css";
+@import url("../../node_modules/normalize.css/normalize.css");
+@import url("fontawesome.css");
+@import url("../../node_modules/primer-tooltips/build/build.css");
 
 :root {
 	/* Main text color */
@@ -77,7 +77,8 @@ img {
 	margin: -1px;
 	padding: 0;
 	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
+	clip-path: inset(50%);
+	white-space: nowrap;
 	border: 0;
 }
 
@@ -171,7 +172,7 @@ pre {
 	line-height: 1.4286;
 	color: #333;
 	word-break: break-all;
-	word-wrap: break-word;
+	overflow-wrap: break-word;
 	background-color: #f5f5f5;
 	border-radius: 4px;
 }
@@ -394,7 +395,7 @@ p {
 
 .channel-list-item[data-type="special"]::before { content: "\f03a"; /* http://fontawesome.io/icon/list/ */ }
 
-.channel-list-item.has-draft:not(.active):not([data-type="lobby"])::before {
+.channel-list-item.has-draft:not(.active, [data-type="lobby"])::before {
 	content: "\f304"; /* https://fontawesome.com/icons/pen?style=solid */
 }
 
@@ -760,10 +761,7 @@ background on hover (unless active) */
 	content: " ";
 	display: block;
 	position: absolute;
-	left: 10px;
-	top: 0;
-	bottom: 0;
-	right: 10px;
+	inset: 0 10px;
 }
 
 .ui-sortable-dragging-touch-cue:not(.ui-sortable-ghost)::after {
@@ -1040,10 +1038,7 @@ textarea.input {
 #chat .chat-view {
 	/* flexbox does not seem to scroll without doing this */
 	position: absolute;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	top: 0;
+	inset: 0;
 }
 
 .window h1 {
@@ -1316,8 +1311,7 @@ textarea.input {
 }
 
 #chat .msg {
-	word-wrap: break-word;
-	word-break: break-word; /* Webkit-specific */
+	overflow-wrap: break-word;
 	display: flex;
 	align-items: flex-start;
 	position: relative;
@@ -2597,7 +2591,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	font-size: 12px;
 }
 
-@media (min-width: 480px) {
+@media (width >= 480px) {
 	/* Fade out for long usernames */
 	#chat .from {
 		padding-left: 10px;
@@ -2605,7 +2599,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	}
 }
 
-@media (max-width: 768px) {
+@media (width <= 768px) {
 	/**
 	  * TODO Replace this with `@media (hover: hover)` when Firefox supports it
 	  * See:
@@ -2651,10 +2645,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 
 	#sidebar-overlay {
 		position: fixed;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
+		inset: 0;
 		background: var(--overlay-bg-color);
 		opacity: 0;
 		visibility: hidden;
@@ -2714,7 +2705,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	}
 }
 
-@media (max-width: 479px) {
+@media (width <= 479px) {
 	.container {
 		max-width: 100%;
 		margin: 0;
@@ -2828,10 +2819,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 #upload-overlay,
 #image-viewer {
 	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
+	inset: 0;
 	background: var(--overlay-bg-color);
 	visibility: hidden;
 	opacity: 0;

client/themes/default.css

@@ -15,7 +15,7 @@
 	box-shadow: 0 0 25px rgb(0 0 0 / 50%);
 }
 
-@media (max-width: 768px) {
+@media (width <= 768px) {
 	#loading .window {
 		margin: 0;
 	}

client/themes/morning.css

@@ -1,4 +1,4 @@
-@import "default.css";
+@import url("default.css");
 
 :root {
 	--body-color: #f3f3f3;

package.json

@@ -147,8 +147,8 @@
     "sinon": "^21.0.1",
     "socket.io-client": "^4.8.3",
     "sortablejs": "^1.15.6",
-    "stylelint": "^14.16.1",
-    "stylelint-config-standard": "^25.0.0",
+    "stylelint": "^17.1.0",
+    "stylelint-config-standard": "^40.0.0",
     "ts-loader": "^9.5.4",
     "ts-node": "^10.9.2",
     "ts-sinon": "^2.0.2",

stylelint.config.mjs

@@ -1,7 +1,7 @@
-module.exports = {
+/** @type {import("stylelint").Config} */
+export default {
 	extends: "stylelint-config-standard",
 	rules: {
-		indentation: "tab",
 		"font-family-no-missing-generic-family-keyword": null,
 		"no-descending-specificity": null,
 		"at-rule-no-vendor-prefix": true,