From 5556782ebeb1ca4d17e2fff434b11651887b9899 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 10 May 2024 14:25:49 +0200
Subject: [PATCH] Forbid deprecated `break-word` in CSS (#30934)

Forbid
[deprecated](https://drafts.csswg.org/css-text-3/#word-break-property)
`break-word` and fix all occurences.

Regarding `overflow-wrap: break-word` vs `overflow-wrap: anywhere`:

Example of difference: https://jsfiddle.net/silverwind/1va6972r/

[Here](https://stackoverflow.com/questions/77651244) it says:

> The differences between normal, break-word and anywhere are only clear
if you are using width: min-content on the element containing the text,
and you also set a max-width. A pretty rare scenario.

I don't think this difference will make any practical impact as we are
not hitting this rare scenario.
---
 stylelint.config.js              | 2 +-
 web_src/css/features/console.css | 3 +--
 web_src/css/helpers.css          | 1 -
 web_src/css/repo.css             | 2 +-
 web_src/css/shared/flex-list.css | 4 ++--
 5 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/stylelint.config.js b/stylelint.config.js
index 9247eb3c33d..6fee2426855 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -150,7 +150,7 @@ export default {
     'declaration-property-unit-allowed-list': null,
     'declaration-property-unit-disallowed-list': {'line-height': ['em']},
     'declaration-property-value-allowed-list': null,
-    'declaration-property-value-disallowed-list': null,
+    'declaration-property-value-disallowed-list': {'word-break': ['break-word']},
     'declaration-property-value-no-unknown': true,
     'font-family-name-quotes': 'always-where-recommended',
     'font-family-no-duplicate-names': true,
diff --git a/web_src/css/features/console.css b/web_src/css/features/console.css
index 99fb25dae57..e2d3327cfa5 100644
--- a/web_src/css/features/console.css
+++ b/web_src/css/features/console.css
@@ -5,8 +5,7 @@
   color: var(--color-console-fg);
   font-family: var(--fonts-monospace);
   border-radius: var(--border-radius);
-  word-break: break-word;
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
 }
 
 .console img { max-width: 100%; }
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index cf2e73572c3..4d12dfaea2f 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -5,7 +5,6 @@ Gitea's private styles use `g-` prefix.
 
 .gt-word-break {
   word-wrap: break-word !important;
-  word-break: break-word; /* compat: Safari */
   overflow-wrap: anywhere;
 }
 
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index f02b2b7578c..7f07e732a3b 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -410,7 +410,7 @@ td .commit-summary {
 }
 
 .repository.file.list .non-diff-file-content .plain-text pre {
-  word-break: break-word;
+  overflow-wrap: anywhere;
   white-space: pre-wrap;
 }
 
diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css
index 6217b453009..0f547792522 100644
--- a/web_src/css/shared/flex-list.css
+++ b/web_src/css/shared/flex-list.css
@@ -59,7 +59,7 @@
   color: var(--color-text);
   font-size: 16px;
   font-weight: var(--font-weight-semibold);
-  word-break: break-word;
+  overflow-wrap: anywhere;
   min-width: 0;
 }
 
@@ -74,7 +74,7 @@
   flex-wrap: wrap;
   gap: .25rem;
   color: var(--color-text-light-2);
-  word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 .flex-item .flex-item-body a {