Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Purging styles for NextUI Image #1229

Open
1 task done
MariaLazarenko opened this issue Mar 11, 2024 · 0 comments
Open
1 task done

[Bug]: Purging styles for NextUI Image #1229

MariaLazarenko opened this issue Mar 11, 2024 · 0 comments
Labels

Comments

@MariaLazarenko
Copy link

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

  • I agree to follow this project's Code of Conduct
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant