Skip to content

Bug with stylify-components #256

@micisse

Description

@micisse

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    🐞 bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions