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

@@ -39,14 +39,15 @@ 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 += ': ';
 
         return (
           <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,