mzsanford/R2rb

Invalid CSS generated when using !important rules

Closed this issue · 2 comments

The following CSS is incorrectly converted, since the !important rule needs to stay at the end:

R2.r2("div { border-radius: 2 !important}")
=> "div{border-radius:!important 2;}"

The upstream nodejs version of r2 doesn't have this same issue. It has some code to explicitly handle !important, but I don't profess to understand how that works!

$ echo 'div { border-radius: 2 !important;}' | yarn run r2
div{border-radius:2 !important;}

Fixed in main (2ea49e0) and publishing version 0.2.8 with the change now. The use of !important is problematic with this sort of automatic transformation since the purpose of this code is to change the value that someone deemed !important. Having said that generating invalid CSS is worse so I fixed it.

Great, thank you @mzsanford !