Wrong cssConflict warning

[benjaminpayoux]

Hello 👋🏼,
Thanks for this great plugin!

I encountered this case where the plugin display a warning regarding a cssConflict lint, which I think should not be here :)

Nothing serious, though ;)

[bradlc]

Hey @benjaminpayoux. Really weird, what happens if you close that file and reopen it?

[benjaminpayoux]

Close / reopen the file or vscode produces the same issue.

[benjaminpayoux]

Here are the extensions installed in my vscode :

I don't know if it could be in conflict with one of them.
I will try on a fresh install too.

[bradlc]

🤔 Would you be able to share the whole file that this is happening in?

[benjaminpayoux]

Sure :) the weird thing is that there is the same classes at line 23 but the plugin does not throw the warning 🧐

Here is the file :

<template>
    <div
        class="absolute z-50 w-full h-full inset-0 bg-white flex flex-col overflow-hidden rounded-lg px-4 py-3"
        style="box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.2);
        "
    >
        <div>
            <h3 class="text-center font-semibold">Accompagnateurs</h3>
            <div @click="showGroupForm = false" class="absolute top-0 right-0 m-4 cursor-pointer">
                <ic-close
                    @click="$emit('close-additional-guests-modal')"
                    class="w-3 h-3 fill-current text-gray-dark hover:text-gray-light"
                />
            </div>
        </div>

        <div class="mt-2">
            <ul class="flex flex-row flex-shrink-0 flex-no-wrap w-full text-sm xl:text-base">
                <li
                    v-if="event.user_can_add_additional_guest_adults"
                    :class="{
                        'border-b-2 border-green': additionalGuestsFilter === additionalGuestsFilters.ADULT && event.user_can_add_additional_guest_children,
                        'border-b border-black border-opacity-10': additionalGuestsFilter !== additionalGuestsFilters.ADULT,
                    }"
                    class="flex flex-1 flex-shrink-0 cursor-pointer justify-center"
                    @click="filterGuests(additionalGuestsFilters.ADULT)"
                >
                    <span
                        :class="{
                            'border-b-2 border-green': 
                                event.user_can_add_additional_guest_adults 
                                && !event.user_can_add_additional_guest_children
                        }"
                        class="px-4 py-1"
                    >Adulte(s)</span>
                </li>
                <li
                    v-if="event.user_can_add_additional_guest_children"
                    :class="{
                        'border-b-2 border-green': additionalGuestsFilter === additionalGuestsFilters.CHILD && event.user_can_add_additional_guest_adults,
                        'border-b border-black border-opacity-10': additionalGuestsFilter !== additionalGuestsFilters.CHILD,
                    }"
                    class="flex flex-1 flex-shrink-0 cursor-pointer justify-center"
                    @click="filterGuests(additionalGuestsFilters.CHILD)"
                >
                    <span
                        :class="{
                            'border-b-2 border-green': 
                                !event.user_can_add_additional_guest_adults 
                                && event.user_can_add_additional_guest_children
                        }"
                        class="px-4 py-1"
                    >Enfant(s)</span>
                </li>
            </ul>
        </div>
        <div class="relative flex-1 overflow-y-auto" ref="snackbarContainer">
            <div class="h-full">
                <div
                    class="flex items-center cursor-pointer py-3 border-b border-black border-opacity-10"
                    @click="addAdditionalGuest"
                >
                    <ic-add-big-plus
                        class="w-10 xl:w-12 h-10 xl:h-12 mr-3 fill-current text-gray-light"
                    ></ic-add-big-plus>
                    <span class="text-sm">{{buttonText}}</span>
                </div>
                <div id="additional-guest-list" class="flex flex-row w-full">
                    <div class="flex-col w-full">
                        <!-- ADULTS -->
                        <div v-if="additionalGuestsFilter === additionalGuestsFilters.ADULT">
                            <div
                                v-for="(additionalGuest, index) in additionalGuestsAdultList"
                                :key="index"
                                class="py-2 flex flex-row items-center w-full"
                            >
                                <div
                                    class="flex items-center justify-center relative w-10 xl:w-12 h-10 xl:h-12 rounded-full bg-gray-light border-2 border-white"
                                >
                                    <img
                                        class="absolute w-full h-full object-cover rounded-full"
                                        v-if="additionalGuest.avatar"
                                        v-auth-image="guest.avatar + '&width=48'"
                                    />
                                    <span>{{ additionalGuest.acronym() }}</span>
                                </div>
                                <div class="flex flex-row flex-grow items-center ml-3">
                                    <div class="flex-grow text-sm">{{additionalGuest.name}}</div>

                                    <ic-dots-vertical
                                        class="cursor-pointer w-4 h-4 fill-current text-gray-light"
                                    />
                                </div>
                            </div>
                        </div>
                        <!-- CHILDREN -->
                        <div v-if="additionalGuestsFilter === additionalGuestsFilters.CHILD">
                            <div
                                v-for="(additionalGuest, index) in additionalGuestsChildList"
                                :key="index"
                            >
                                <div class="pt-3 flex items-center w-full">
                                    <div class="flex flex-col w-1/2">
                                        <label class="text-2xs text-gray-light">PRÉNOM</label>
                                        <input class="text-sm mr-2" v-model="additionalGuest.name" />
                                    </div>
                                    <div class="w-1/2 flex flex-row justify-between items-center">
                                        <div class="flex flex-col w-2/3">
                                            <span class="text-2xs text-gray-light">ÂGE</span>
                                            <span class="text-sm">3 ans</span>
                                        </div>
                                        <ic-trash
                                            @click="deleteAdditionalGuest(index)"
                                            class="w-4 h-4 fill-current text-gray-light mr-4 cursor-pointer"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button class="btn w-full max-w-md mt-2" @click="saveAdditionalGuests">Valider</button>
        <LoadingComponent v-if="isLoading" class="bg-black bg-opacity-70" />
    </div>
</template>

<script lang="ts" src="./AdditionalGuestsComponent.ts" />

[bradlc]

Brilliant, thanks @benjaminpayoux! I can reproduce the issue so I'll take a proper look at it this afternoon

[jsbrain]

Faced the same "issue":

simple reordering fixes it:

Happy debugging 😁

[bradlc]

This was fixed in v0.4.2 👍

[OnkelTem]

It doesn't look to be fixed or it's a similar issue.

This:

return (
    <table tw="table-auto w-full">
      <tbody>
        {rows.map((row, index) => (
          <tr key={index}>
            <th tw="text-left py-1 pl-2 font-normal border border-gray-200">{row[0]}</th>
            {row[1].map((item, index) => (
              <td
                tw="text-right py-1 pl-2 pr-1 border border-gray-200 font-bold"
                key={index}
              >
                {item}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )

makes a few warnings like:

'border' applies the same CSS properties as 'border'.(cssConflict)
'py-1' applies the same CSS properties as 'py-1'.(cssConflict)
'pl-2' applies the same CSS properties as 'pl-2'.(cssConflict)

[wiredearp]

I'm also getting this big time with my highly customized preset, for example with the following two declarations that are quite obviously not related except they are both @layer components.

.body-02 {
 font-weight: 400;
 font-size: clamp(0.875rem, 0.163265306122449vw + 0.8367346938775511rem, 1rem);
 line-height: 1.5;
}

and (compiled into the same file before presented to Tailwind)

.theme-dark {
  --color-action-secondary-default: var(--color-core-blue-500);
  --color-action-secondary-hovered: var(--color-core-blue-400);
  --color-action-secondary-pressed: var(--color-core-blue-600);
  /* only variables in this selector */
}

I will return with a simplified test case since I find this conflict detection to be quite the selling point, for now I just wanted to keep this issue alive.

[OnkelTem]

So how to get rid of this annoying thing? How to disable it completely?

[katekostina]

I've also encountered this, it happens almost in every file, had to disable all the cssConflict warnings.