[openstreetmap/openstreetmap-website] r2 is generating invalid CSS (Issue #4087)

[Andy Allan]

I found this while working on another topic. The algorithm used by the [r2 gem](https://github.com/mzsanford/R2rb) is different from that generated by the [upstream nodejs r2](https://github.com/ded/R2) project, and the ruby version doesn't handle `!important` declarations. This leads it to generate invalid CSS.

```ruby
R2.r2("div { border-radius: 2 !important}")
=> "div{border-radius:!important 2;}"
```
This means that currently, some CSS is not working properly on our site. For example, in RTL languages the corners of the location-picking map are not properly rounded:

# LTR (rounded)

![Screenshot from 2023-07-12 16-40-33](https://github.com/openstreetmap/openstreetmap-website/assets/360803/94117132-2be0-4ff4-b2f9-fa877770c846)

# RTL (not rounded due to invalid CSS)

![Screenshot from 2023-07-12 16-40-11](https://github.com/openstreetmap/openstreetmap-website/assets/360803/578cb271-2dff-473c-9476-88e7c57d6dd8)

I know it's a pretty minor thing, but I haven't audited the rest of the generated CSS to see what else might be broken.

See also:

* https://github.com/mzsanford/R2rb/issues/18
* #3433 

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/4087
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/issues/4087 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20230712/c7c639ab/attachment.htm>