From 1a277ad0b87541c80bf4762735a06c561eb17f30 Mon Sep 17 00:00:00 2001
From: Cameron Radmore <radmorecameron@gmail.com>
Date: Sat, 4 Jul 2026 17:05:27 +0200
Subject: [PATCH] chore: have stylelint lint CSS in tmpl files to enforce
 RTL-friendly logical properties (#13216)

This will allow us to enforce RTL-friendly logical CSS properties in the go template files.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/13216
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
---
 Makefile                         |  2 +-
 stylelint.config.js              | 11 +++++++++++
 templates/demo/fetch-action.tmpl |  2 +-
 templates/demo/list.tmpl         |  2 +-
 templates/mail/release.tmpl      |  2 +-
 templates/repo/admin_flags.tmpl  |  2 +-
 templates/status/500.tmpl        |  2 +-
 7 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/Makefile b/Makefile
index 2843588b93..f9fabf4bce 100644
--- a/Makefile
+++ b/Makefile
@@ -153,7 +153,7 @@ TAR_EXCLUDES := .git data indexers queues log node_modules $(EXECUTABLE) $(FOMAN
 GO_DIRS := build cmd models modules routers services tests
 WEB_DIRS := web_src/js web_src/css
 
-STYLELINT_FILES := web_src/css web_src/js/components/*.vue
+STYLELINT_FILES := web_src/css web_src/js/components/*.vue templates/**/*.tmpl
 SPELLCHECK_FILES := $(GO_DIRS) $(WEB_DIRS) docs/content templates options/locale/locale_en-US.ini .github $(wildcard *.go *.js *.ts *.vue *.md *.yml *.yaml)
 
 GO_SOURCES := $(wildcard *.go)
diff --git a/stylelint.config.js b/stylelint.config.js
index b7cc162669..0235ba658e 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -36,6 +36,17 @@ export default {
       files: ['**/*.vue'],
       customSyntax: 'postcss-html',
     },
+    {
+      files: '**/*.tmpl',
+      ignoreFiles: [
+        'templates/shared/quota_overview.tmpl', // // the mix of go in the style attribute confuses the css parser
+      ],
+      customSyntax: 'postcss-html',
+      rules: {
+        '@stylistic/indentation': null,
+        'scale-unlimited/declaration-strict-value': null,
+      },
+    },
   ],
   rules: {
     '@stylistic/at-rule-name-case': null,
diff --git a/templates/demo/fetch-action.tmpl b/templates/demo/fetch-action.tmpl
index d31044320a..955ffbbde4 100644
--- a/templates/demo/fetch-action.tmpl
+++ b/templates/demo/fetch-action.tmpl
@@ -34,7 +34,7 @@
 </div>
 <style>
 	.ui.message.flash-message {
-		text-align: left;
+		text-align: start;
 	}
 	.form-fetch-action {
 		margin-bottom: 1em;
diff --git a/templates/demo/list.tmpl b/templates/demo/list.tmpl
index 80f9648ee8..a57f184780 100644
--- a/templates/demo/list.tmpl
+++ b/templates/demo/list.tmpl
@@ -26,7 +26,7 @@
 
 <style>
 ul {
-	line-height: 2em;
+	line-height: 2rem;
 }
 </style>
 
diff --git a/templates/mail/release.tmpl b/templates/mail/release.tmpl
index ef74485410..4bde6ce192 100644
--- a/templates/mail/release.tmpl
+++ b/templates/mail/release.tmpl
@@ -4,7 +4,7 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
 	<style>
-		blockquote { padding-left: 1em; margin: 1em 0; border-left: 1px solid grey; color: #777}
+		blockquote { padding-inline-start: 1em; margin: 1em 0; border-inline-start: 1px solid grey; color: #777}
 		.footer { font-size:small; color:#666;}
 	</style>
 
diff --git a/templates/repo/admin_flags.tmpl b/templates/repo/admin_flags.tmpl
index 2a65c9c687..ea7f02e0e9 100644
--- a/templates/repo/admin_flags.tmpl
+++ b/templates/repo/admin_flags.tmpl
@@ -1,5 +1,5 @@
 {{if .Repository.IsFlagged $.Context}}
-	<div class="ui info message" style="text-align: left">
+	<div class="ui info message" style="text-align: start">
 		<strong>{{ctx.Locale.Tr "repo.admin.enabled_flags"}}</strong>
 		{{range .Repository.ListFlags $.Context}}
 			<span class="ui label">{{.Name}}</span>
diff --git a/templates/status/500.tmpl b/templates/status/500.tmpl
index 4e7e64d9c7..6ad36385e2 100644
--- a/templates/status/500.tmpl
+++ b/templates/status/500.tmpl
@@ -26,7 +26,7 @@
 
 		<div role="main" class="page-content status-page-500">
 			<div class="ui container" >
-				<style> .ui.message.flash-message { text-align: left; } </style>
+				<style> .ui.message.flash-message { text-align: start; } </style>
 				{{template "base/alert" .}}
 			</div>
 			<div class="ui container center">