IntellijAlpine using x-transition to apply CSS classes causes errors to be displayed in IDE

using x-transition to apply CSS classes causes errors to be displayed in IDE

Open geoffbeier opened this issue 1 year ago • 5 comments

When I use x-transition:enter and friends to apply CSS classes, as described by the transition documentation:

            <div x-show="dropdownOpen"
                 class="absolute right-0 z-10 mt-12 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="profile-menu-button" tabindex="-1"
                 x-transition:enter="transition ease-out duration-100"
                 x-transition:enter-start="transform opacity-0 scale-95"
                 x-transition:enter-end="transform opacity-100 scale-100"
                 x-transition:leave="transition ease-in duration-75"
                 x-transition:leave-start="transform opacity-100 scale-100"
                 x-transition:leave-end="transform opacity-0 scale-95"
            >

the IDE gives me error messages saying:

Namespace 'x-transition' is not bound

for each instance of x-transition. These attributes work as expected when I view my site in a browser.

Jul 19 '23 22:07 geoffbeier

Odd. When I paste that into my editor and hover over the x-transition line, I see XML Namespace Prefix "Alpine.js" and don't get any errors. Could it be that some other plugin you have installed is trying to hook into XML prefixes, too, and is causing it to not register?

Aug 15 '23 15:08 inxilpro

That seemed plausible, given that this is a django project and pycharm bundles extensions that inspect and offer completions for django's templates (which use the .html extension also). But I tested in a static HTML file that doesn't use any django templating at all: