-
-
Notifications
You must be signed in to change notification settings - Fork 9
Description
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
stylify.mp4
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