search

theKashey / used-styles

📝All the critical styles you've used to render a page.
MIT License
137 stars 9 forks source link

CSS truncated incorrectly #46

Closed Tonyhliu closed 1 year ago

Tonyhliu commented 1 year ago

Due to how our components stylesheets target svg classes for lottie player :

i.e. 

.-lottie-player svg path[fill="rgb(255,255,255)"] {
  fill: var(--color-background)
}

The resulting critical styles (from getCriticalStyles) gets truncated incorrectly like so : 

.lottie-lottie-player svg path[fill="rgb(255 { fill: var(--color-background); }

The expected style from the critical styles would be : 

.-lottie-player svg path[fill="rgb(255,255,255)"] {
  fill: var(--color-background)
}
Tonyhliu commented 1 year ago

@theKashey

theKashey commented 1 year ago

Got you. This moment is not actually under the direct control of used-styles as it used post-css to parse CSS and sounds like it's time for a long-delayed migration to postcss 8. That is quite likely to solve the problem.

theKashey commented 1 year ago

Try 2.5.0 - it should solve your problem

Tonyhliu commented 1 year ago

hey @theKashey - thanks for hopping on this so quickly, truly appreciate it. ❤️

One quick Q : did you happen to build the package before publishing? Noticing that I'm still getting the old version of the code, even though the package shows 2.5.0 😅

Update : cloning used-styles and generating a build to use locally solves the issue 🔥 !

theKashey commented 1 year ago

:duh: 2.5.2 should solve the probelm.

I've runned only tests relying on yarn hooks to build stuff before publish, but they are not working (again) for a some reason 😢

Tonyhliu commented 1 year ago

Haha no worries @theKashey - happens to the best of us 😅

2.5.2 is working as expected, can't thank you enough for the quick turnaround time on this! Cheers m8!! 🥂