purgecss icon indicating copy to clipboard operation
purgecss copied to clipboard

[Bug]: Purging styles for NextUI Image

Open MariaLazarenko opened this issue 11 months ago • 1 comments

Describe the bug

NextUi's Image has selectors which are purged from css I tried different workarounds but it still doesn't worj so Images are not displaying at all

<img src="my-img.webp" class="relative z-10 opacity-0 shadow-black/5 data-[loaded=true]:opacity-100 shadow-none transition-transform-opacity motion-reduce:transition-none !duration-300 rounded-large" alt="My image" style="cursor:pointer" data-loaded="true"> here the issue with the data-[loaded=true]:opacity-100 selector

In css it looks like this .data-\[loaded\=true\]\:opacity-100[data-loaded=true],.data-\[moving\]\:opacity-100[data-moving]{opacity:1}

I tried different options but nothing works

      safelist: {
        css: '[data-loaded=true]',
        standard: [/h-/, "img", ":opacity-100", /[data-loaded=true]$/],
        greedy: [":opacity-100", "data-loaded"],
        dynamicAttributes: ["data-loaded"]
      }

To Reproduce

install Next UI use Image component

Expected Behavior

do not purge mentioned attribute selector

Environment

Google Chrome

Add any other context about the problem here

context

Code of Conduct

  • [X] I agree to follow this project's Code of Conduct

MariaLazarenko avatar Mar 11 '24 16:03 MariaLazarenko