prefixed styles get duplicated in production and make icons unstylable
CanRau opened this issue · 3 comments
Hey thanks for this amazing plugin, it's really handy to have so many icon from so many different sources so easily available without bloating the bundle 🙌
I just deployed first test versions to staging and noticed that just icons are unstyled.
First it looked like all styles were the exact same and should work but then I realized, that the -webkit-mask: var(--iconify-icon) no-repeat; is repeated, probably by autoprefixer, not sure, but in after all other mask styles invalidating them including mask-size
So maybe within mask mode it'd be possible to remove those prefixed styles and let other tools handle prefixing where necessary, or make it configurable as well, cause I think I can't use background-img mode when I want to change icon colors right?
Uh only tested Firefox so far
Edit: "fixed" it with patch-package for now
Thank you for your feedback! This repo is actually a simple fork of unocss/preset-icons in tailwindcss, thanks for antfu's great work.
I was trying to reproduce the problem you meet, but unfortunately, it seems like webkit-mask is working as expected on my firefox browser. And unocss also has these 2 lines of code
I also created a sandbox for it, am I doing right?
stackblitz: https://stackblitz.com/edit/vitejs-vite-hyquht?file=src/App.tsx
or codesandbox: https://codesandbox.io/s/busy-dijkstra-s8ei7h
For the question: you can not change the icon color when using background-img mode, because it was implemented in a different way.
Mm thank a lot for taking the time, yea looks like my pipeline is doing something 🤔
No problem, it's ok😄