From 06b7b492e630cde1d84496d1cfbdf206e1b9f077 Mon Sep 17 00:00:00 2001
From: Lucio Giannotta <sunyatasattva@yahoo.it>
Date: Wed, 1 May 2024 03:03:16 +0200
Subject: [PATCH] Fix inline metadata class names (#934)

* Fix inline metadata class names

The previous logic would replace uppercase letters with hyphens.

* Allow any valid CSS class name on metadata key, and add namespace
---
 src/components/Item/InlineMetadata.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Item/InlineMetadata.tsx b/src/components/Item/InlineMetadata.tsx
index 9f566235..4fbc696c 100644
--- a/src/components/Item/InlineMetadata.tsx
+++ b/src/components/Item/InlineMetadata.tsx
@@ -39,6 +39,7 @@ export function InlineMetadata({ item, stateManager }: InlineMetadataProps) {
         const isEmojiPriority = isEmoji && m.key === 'priority';
         const isDate = !!val?.ts;
         let label = isEmoji ? lableToIcon(m.key, m.value) : lableToName(m.key);
+        const slug = m.key.replace(/[^a-zA-Z0-9_]/g, '-');
 
         if (!isEmoji) label += ': ';
 
@@ -46,7 +47,7 @@ export function InlineMetadata({ item, stateManager }: InlineMetadataProps) {
           <span
             className={classcat([
               c('item-task-inline-metadata-item'),
-              m.key.replace(/[^a-z0-9]/g, '-'),
+              c(`inline-metadata__${slug}`),
               {
                 'is-task-metadata': isTaskMetadata,
                 'is-emoji': isEmoji,