Bug with stylify-components

micisse commented 1 year ago

Describe the bug

I explored "stylify" today in my free time and I detected a weird bug but I don't really know the origin. It seems to be related to --webkit, for example "u-background-clip:text u-webkit-background-clip:text u-webkit-text-fill-color:transparent". Since it's complex to explain and especially to find, I was able to reproduce the problem (see video). In summary, when I use "stylify-components ... /stylify-components" directly in 2 different files (e.g: Navbar / Footer) with exactly the same styles with the only difference being the "background":

Navbar: u-background:linear-gradient(to_right,blue,blue_50%,white_50%) Footer: u-background:linear-gradient(to_right,white,white_50%,green_50%)

I get an unexpected result. But when I reproduce this with CSS Modules or CSS-in-JS (see video), everything works normally. This problem seems to come from the optimization and/or splitting of the output selectors. I wasted some time on this particular problem.

Enlarge the video to see it better

https://github.com/stylify/packages/assets/56940294/779886fa-a110-45c7-b957-ab733fe18583

Reproduction

https://stackblitz.com/edit/remix-run-remix-irxlvx?file=app/navbar/Navbar.tsx

Logs

No response

System Info

Node.js v16.14.2 / @stylify/bundler

Machy8 commented 1 year ago

Hi @micisse, thanks for the submission. I will look into it during this week.

Machy8 commented 1 year ago

Ok, so this took me a while and it is actually caused by the other of background-clip:text.

If it is used before the background is calculated, it will not work.
When it is defined after background have been calculated, it works ok.
This calculation/behavior cannot be overriden by setting the background in style attribute even though it has higher specificity. It's probably caused by the calculation order from top to bottom/assets order...

I know about the importance of order in CSS but I had idea, that such issue can happen with background clip... First I thought it's caused by missing CSS, but evidentially not. I have fixed that locally and will test it. If it works, I will publish it during this week. If it won't, I will have to find some other way around.

I will let you know the result.

Machy8 commented 1 year ago

Hi @micisse , this should be fixed in 0.6.1. I have tested it in the stackblitz you send and it seems to work. Try to update the version.

Could you please try it and let me know?

micisse commented 1 year ago

Hi @Machy8, I've tested it and it's fine for now... I'll go back up if I run into any more problems. I hope version 1 will be more stable.

stylify / packages