Added tailwind prefix (comm) to avoid conflicts

Author: luisdalmolin

.gitignore

@@ -4,3 +4,5 @@ node_modules
 .pint.cache
 .repomix/output
 .cursor/rules/local.mdc
+
+**/.claude/settings.local.json

package.json

@@ -1,5 +1,6 @@
 {
   "name": "commentions",
+  "type": "module",
   "scripts": {
     "dev:scripts": "node bin/build.js --dev",
     "build:scripts": "node bin/build.js",

resources/css/commentions.css

@@ -1,4 +1,5 @@
-@import "tailwindcss" source(none);
+@import "tailwindcss" prefix(comm) important;
+
 @source "../views/";
 @source "../../src";
 
@@ -17,11 +18,7 @@
 }
 
 .tiptap .mention {
-    background-color: #e5e7eb;
-    border-radius: 4px;
-    padding: 2px 4px;
-    font-weight: bold;
-    color: #3b82f6;
+    @apply comm:bg-gray-200 comm:rounded comm:px-1 comm:py-0.5 comm:font-bold comm:text-blue-500;
 }
 
 .mention-suggestion {
@@ -40,5 +37,5 @@
 }
 
 .mention-item:hover {
-    background: #f3f4f6;
+    @apply comm:bg-gray-100;
 }

resources/dist/commentions.css

@@ -100,7 +100,7 @@ const renderSuggestionsComponent = (items) => {
                                         class="mention-item"
                                         x-text="item.name"
                                         @click="add(item)"
-                                        :class="{ 'bg-gray-100': $store.filamentCommentsMentionsFiltered.selectedIndex === index }"
+                                        :class="{ 'comm:bg-gray-100': $store.filamentCommentsMentionsFiltered.selectedIndex === index }"
                                     ></div>
                                 </template>
                             `;

resources/dist/commentions.js

@@ -1,13 +1,13 @@
 <div @if ($pollingInterval) wire:poll.{{ $pollingInterval }}s @endif>
     @if ($this->comments->isEmpty())
-        <div class="flex items-center justify-center p-6 text-center rounded-lg border border-dashed border-gray-300 dark:border-gray-700">
-            <div class="flex flex-col items-center gap-y-2">
+        <div class="comm:flex comm:items-center comm:justify-center comm:p-6 comm:text-center comm:rounded-lg comm:border comm:border-dashed comm:border-gray-300 comm:dark:border-gray-700">
+            <div class="comm:flex comm:flex-col comm:items-center comm:gap-y-2">
                 <x-filament::icon
                     icon="heroicon-o-chat-bubble-left-right"
-                    class="w-8 h-8 text-gray-400 dark:text-gray-500"
+                    class="comm:w-8 comm:h-8 comm:text-gray-400 comm:dark:text-gray-500"
                 />
 
-                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">
+                <span class="comm:text-sm comm:font-medium comm:text-gray-500 comm:dark:text-gray-400">
                     No comments yet.
                 </span>
             </div>

resources/js/suggestion.js

@@ -1,41 +1,41 @@
 @use('\Kirschbaum\Commentions\Config')
 
-<div class="flex items-start gap-x-4 border p-4 rounded-lg shadow-sm mb-2" id="filament-comment-{{ $comment->getId() }}">
+<div class="comm:flex comm:items-start comm:gap-x-4 comm:border comm:p-4 comm:rounded-lg comm:shadow-sm comm:mb-2" id="filament-comment-{{ $comment->getId() }}">
     @if ($avatar = $comment->getAuthorAvatar())
         <img
             src="{{ $comment->getAuthorAvatar() }}"
             alt="User Avatar"
-            class="w-10 h-10 rounded-full mt-0.5 object-cover object-center"
+            class="comm:w-10 comm:h-10 comm:rounded-full comm:mt-0.5 comm:object-cover comm:object-center"
         />
     @else
-        <div class="w-10 h-10 rounded-full mt-0.5 "></div>
+        <div class="comm:w-10 comm:h-10 comm:rounded-full comm:mt-0.5 "></div>
     @endif
 
-    <div class="flex-1">
-        <div class="text-sm font-bold text-gray-900 dark:text-gray-100 flex justify-between items-center">
+    <div class="comm:flex-1">
+        <div class="comm:text-sm comm:font-bold comm:text-gray-900 comm:dark:text-gray-100 comm:flex comm:justify-between comm:items-center">
             <div>
                 {{ $comment->getAuthorName() }}
                 <span
-                    class="text-xs text-gray-500 dark:text-gray-300"
+                    class="comm:text-xs comm:text-gray-500 comm:dark:text-gray-300"
                     title="Commented at {{ $comment->getCreatedAt()->format('Y-m-d H:i:s') }}"
                 >{{ $comment->getCreatedAt()->diffForHumans() }}</span>
 
                 @if ($comment->getUpdatedAt()->gt($comment->getCreatedAt()))
                     <span
-                        class="text-xs text-gray-300 ml-1"
+                        class="comm:text-xs comm:text-gray-300 comm:ml-1"
                         title="Edited at {{ $comment->getUpdatedAt()->format('Y-m-d H:i:s') }}"
                     >(edited)</span>
                 @endif
 
                 @if ($comment->getLabel())
-                    <span class="text-xs text-gray-500 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded-md">
+                    <span class="comm:text-xs comm:text-gray-500 comm:dark:text-gray-300 comm:bg-gray-100 comm:dark:bg-gray-800 comm:px-1.5 comm:py-0.5 comm:rounded-md">
                         {{ $comment->getLabel() }}
                     </span>
                 @endif
             </div>
 
             @if ($comment->isComment() && Config::resolveAuthenticatedUser()?->canAny(['update', 'delete'], $comment))
-                <div class="flex gap-x-1">
+                <div class="comm:flex comm:gap-x-1">
                     @if (Config::resolveAuthenticatedUser()?->can('update', $comment))
                         <x-filament::icon-button
                             icon="heroicon-s-pencil-square"
@@ -58,14 +58,14 @@ class="text-xs text-gray-300 ml-1"
         </div>
 
         @if ($editing)
-            <div class="mt-2">
-                <div class="tip-tap-container mb-2" wire:ignore>
+            <div class="comm:mt-2">
+                <div class="tip-tap-container comm:mb-2" wire:ignore>
                     <div x-data="editor(@js($commentBody), @js($mentionables), 'comment')">
                         <div x-ref="element"></div>
                     </div>
                 </div>
 
-                <div class="flex gap-x-2">
+                <div class="comm:flex comm:gap-x-2">
                     <x-filament::button
                         wire:click="updateComment({{ $comment->getId() }})"
                         size="sm"
@@ -83,7 +83,7 @@ class="text-xs text-gray-300 ml-1"
                 </div>
             </div>
         @else
-            <div class="mt-1 space-y-6 text-sm text-gray-800 dark:text-gray-200">{!! $comment->getParsedBody() !!}</div>
+            <div class="comm:mt-1 comm:space-y-6 comm:text-sm comm:text-gray-800 comm:dark:text-gray-200">{!! $comment->getParsedBody() !!}</div>
 
             @if ($comment->isComment())
                 <livewire:commentions::reactions
@@ -104,12 +104,12 @@ class="text-xs text-gray-300 ml-1"
                 Delete Comment
             </x-slot>
 
-            <div class="py-4">
+            <div class="comm:py-4">
                 Are you sure you want to delete this comment? This action cannot be undone.
             </div>
 
             <x-slot name="footer">
-                <div class="flex justify-end gap-x-4">
+                <div class="comm:flex comm:justify-end comm:gap-x-4">
                     <x-filament::button
                         wire:click="$dispatch('close-modal', { id: 'delete-comment-modal-{{ $comment->getId() }}' })"
                         color="gray"

resources/views/comment-list.blade.php

@@ -1,10 +1,10 @@
 @use('\Kirschbaum\Commentions\Config')
 
-<div class="space-y-2" x-data="{ wasFocused: false }">
+<div class="comm:space-y-2" x-data="{ wasFocused: false }">
     @if (Config::resolveAuthenticatedUser()?->can('create', Config::getCommentModel()))
         <form wire:submit.prevent="save" x-cloak>
             {{-- tiptap editor --}}
-            <div class="relative tip-tap-container mb-2" x-on:click="wasFocused = true" wire:ignore>
+            <div class="comm:relative tip-tap-container comm:mb-2" x-on:click="wasFocused = true" wire:ignore>
                 <div
                     x-data="editor(@js($commentBody), @js($this->mentions), 'comments')"
                 >

resources/views/comment.blade.php

@@ -1,15 +1,15 @@
-<div class="relative mt-2 pt-2 border-t border-gray-200 dark:border-gray-700 flex items-center gap-x-1 flex-wrap">
+<div class="comm:relative comm:mt-2 comm:pt-2 comm:border-t comm:border-gray-200 comm:dark:border-gray-700 comm:flex comm:items-center comm:gap-x-1 comm:flex-wrap">
     {{-- Inline buttons for existing reactions --}}
     @foreach ($this->reactionSummary as $reactionData)
         <span wire:key="inline-reaction-button-{{ $reactionData['reaction'] }}-{{ $comment->getId() }}">
             <button
                 x-cloak
                 wire:click="handleReactionToggle('{{ $reactionData['reaction'] }}')"
                 type="button"
-                class="inline-flex items-center justify-center gap-1 rounded-full border px-2 h-8 text-sm font-medium transition focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed
+                class="comm:inline-flex comm:items-center comm:justify-center comm:gap-1 comm:rounded-full comm:border comm:px-2 comm:h-8 comm:text-sm comm:font-medium comm:transition comm:focus:outline-none comm:focus:ring-2 comm:focus:ring-offset-2 comm:disabled:opacity-50 comm:disabled:cursor-not-allowed
                     {{ $reactionData['reacted_by_current_user']
-                        ? 'bg-primary-100 dark:bg-primary-800 border-primary-300 dark:border-primary-600 text-primary-700 dark:text-primary-200 hover:bg-primary-200 dark:hover:bg-primary-600'
-                        : 'bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600' }}"
+                        ? 'comm:bg-gray-50 comm:dark:bg-gray-800 comm:border-gray-300 comm:dark:border-gray-600 comm:text-gray-700 comm:dark:text-gray-200 comm:hover:bg-gray-200 comm:dark:hover:bg-gray-600'
+                        : 'comm:bg-white comm:dark:bg-gray-900 comm:border-gray-300 comm:dark:border-gray-600 comm:text-gray-700 comm:dark:text-gray-200 comm:hover:bg-gray-100 comm:dark:hover:bg-gray-600' }}"
                 title="{{ $reactionData['reaction'] }}"
 
             >
@@ -20,16 +20,16 @@ class="inline-flex items-center justify-center gap-1 rounded-full border px-2 h-
     @endforeach
 
     {{-- Add Reaction Button --}}
-    <div class="relative" x-data="{ open: false }" wire:ignore.self>
+    <div class="comm:relative" x-data="{ open: false }" wire:ignore.self>
         <button
             x-on:click="open = !open"
             type="button"
             @disabled(! auth()->check())
-            class="inline-flex items-center justify-center gap-1 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 w-8 h-8 text-sm font-medium text-gray-700 dark:text-gray-200 transition hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+            class="comm:inline-flex comm:items-center comm:justify-center comm:gap-1 comm:rounded-full comm:border comm:border-gray-300 comm:dark:border-gray-600 comm:bg-white comm:dark:bg-gray-900 comm:w-8 comm:h-8 comm:text-sm comm:font-medium comm:text-gray-700 comm:dark:text-gray-200 comm:transition comm:hover:bg-gray-100 comm:dark:hover:bg-gray-700 comm:focus:outline-none comm:focus:ring-2 comm:focus:ring-offset-2 comm:disabled:opacity-50 comm:disabled:cursor-not-allowed"
             title="Add Reaction"
             wire:key="add-reaction-button-{{ $comment->getId() }}"
         >
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="comm:h-4 comm:w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
         </button>
@@ -39,7 +39,8 @@ class="inline-flex items-center justify-center gap-1 rounded-full border border-
             x-show="open"
             x-cloak
             x-on:click.away="open = false"
-            class="absolute bottom-full mb-2 z-10 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg p-2 flex flex-wrap gap-1 w-max max-w-xs"
+            class="comm:absolute comm:bottom-full comm:mb-2 comm:z-10 comm:bg-white comm:dark:bg-gray-800 comm:border comm:border-gray-300 comm:dark:border-gray-600 comm:rounded-lg comm:shadow-lg comm:p-2 comm:flex-wrap comm:gap-1 comm:w-max comm:max-w-xs"
+            :class="{ 'comm:hidden': ! open, 'comm:flex': open }"
         >
             @foreach ($allowedReactions as $reactionEmoji)
                 @php
@@ -51,10 +52,10 @@ class="absolute bottom-full mb-2 z-10 bg-white dark:bg-gray-800 border border-gr
                     x-on:click="open = false"
                     type="button"
                     @disabled(! auth()->check())
-                    class="inline-flex items-center justify-center gap-1 rounded-full border w-8 h-8 text-sm font-medium transition focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed
+                    class="comm:inline-flex comm:items-center comm:justify-center comm:gap-1 comm:rounded-full comm:w-8 comm:h-8 comm:text-sm comm:font-medium comm:transition comm:focus:outline-none comm:focus:ring-2 comm:focus:ring-offset-2 comm:disabled:opacity-50 comm:disabled:cursor-not-allowed
                            {{ $reactionData['reacted_by_current_user']
-                               ? 'bg-primary-100 dark:bg-primary-800 border-primary-300 dark:border-primary-600 text-primary-700 dark:text-primary-200 hover:bg-primary-200 dark:hover:bg-primary-600'
-                               : 'bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600' }}"
+                               ? 'comm:text-gray-700 comm:dark:text-gray-200 comm:hover:bg-gray-200 comm:dark:hover:bg-gray-600'
+                               : 'comm:text-gray-700 comm:dark:text-gray-200 comm:hover:bg-gray-100 comm:dark:hover:bg-gray-600' }}"
                     title="{{ $reactionEmoji }}"
                     wire:key="popup-reaction-button-{{ $reactionEmoji }}-{{ $comment->getId() }}"
                 >
@@ -69,7 +70,7 @@ class="inline-flex items-center justify-center gap-1 rounded-full border w-8 h-8
         @if (! in_array($reactionEmoji, $allowedReactions) && $data['count'] > 0)
             <span
                 wire:key="reaction-extra-{{ $reactionEmoji }}-{{ $comment->getId() }}"
-                class="inline-flex items-center justify-center gap-1 rounded-full border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 px-2 h-8 text-sm font-medium text-gray-600 dark:text-gray-300"
+                class="comm:inline-flex comm:items-center comm:justify-center comm:gap-1 comm:rounded-full comm:border comm:border-gray-300 comm:dark:border-gray-600 comm:bg-gray-100 comm:dark:bg-gray-800 comm:px-2 comm:h-8 comm:text-sm comm:font-medium comm:text-gray-600 comm:dark:text-gray-300"
                 title="{{ $reactionEmoji }}"
             >
                 <span>{{ $reactionEmoji }}</span>