search

streamich / nano-css

Distilled CSS-in-JS for gourmet developers
The Unlicense
427 stars 23 forks source link

Properties with !important are not working properly #259

Closed mori-codes closed 7 months ago

mori-codes commented 1 year ago

Hello! Last day I was working with useCss, and discovered it is unable to accept properties marked as !important. In a quest to find the reason, ended up in this library, and trying to find the root cause of this, ended up on this line, inside VRule.diff()

https://github.com/streamich/nano-css/blob/fff72f35b8b6caab021d6c28f1dd9df2864a9310/addon/vcssom.js#L28

I believe this are setting directly the property, something like setProperty("background-color", "red !important"), but according to MDN Docs, the priority must be set outside, like setProperty("background-color", "red", "important"). This is causing the property to be invalid.

I didn't have time to learn how to use this library properly, so maybe it is an implementation error from useCss, and there is a step they are missing. This is the code giving me problems

hanswursttellersulz commented 10 months ago

Hello, the following Code in vcssom.js will fix the Issue (replace line 27 and 28 with it). How can I help so that the fix is applied as soon as possible for the useCss-hook?

if (newDecl[property] !== oldDecl[property]){ var matched = typeof newDecl[property] === 'string' ? newDecl[property].trim().match(/!important;?/i) : null; if(matched !== null){ style.setProperty(kebab(property), newDecl[property].replace(matched[0],''), 'important'); }else{ style.setProperty(kebab(property), newDecl[property]); } }

drsag-mgr commented 5 months ago

Hi, this bug is not fixed yet. Why did you closed the issue?