purgecss
purgecss copied to clipboard
[Bug]: Purging styles for NextUI Image
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