Unpin sass-embedded

[gravitystorm]

We currently have a pin on sass-embedded:

# Use SCSS for stylesheets
gem "dartsass-sprockets"
# Pin the dependent sass-embedded to avoid deprecation warnings in bootstrap
gem "sass-embedded", "~> 1.64.0"
# Pin uri to avoid errors in dartsass-ruby
gem "uri", "< 1.0.0"

However, this means that we're not getting bug fixes for sass-embedded, or its dependent gems (e.g. google-protobuf). We should figure out what we need to do to release this pin, e.g. if our bootstrap version is new enough to avoid the deprecation warnings, etc.

Fair warning: Digging into the dart/sass/ruby ecosystem isn't for the faint of heart, in my experience.

Refs #6677

[tomhughes]

I tried releasing it recently and it was still a problem 😢

[pablobm]

For context for those who arrive here without much familiarity, these are the sort of warnings that we get if we upgrade sass-embedded beyond the pinned version:

Deprecation Warning [color-functions]: green() is deprecated. Suggestion:

color.channel($color, "green", $space: rgb)

More info: https://sass-lang.com/d/color-functions

    ╷
186 │     "g": green($color),
    │          ^^^^^^^^^^^^^
    ╵
    ../../../../bootstrap-5.3.5/assets/stylesheets/bootstrap/_functions.scss 186:10                                luminance()
    ../../../../bootstrap-5.3.5/assets/stylesheets/bootstrap/_functions.scss 174:8                                 contrast-ratio()
    ../../../../bootstrap-5.3.5/assets/stylesheets/bootstrap/_functions.scss 159:22                                color-contrast()
    ../../../../bootstrap-5.3.5/assets/stylesheets/bootstrap/_variables.scss 846:42                                @import
    ../../../../bootstrap-5.3.5/assets/stylesheets/_bootstrap.scss 8:9                                             @import
    /workspace/openstreetmap-website/app/assets/stylesheets/common.scss 3:9             @use
    /workspace/openstreetmap-website/app/assets/stylesheets/screen-manual-ltr.scss 1:1  root stylesheet

Lots of them, all over the place. Run the system tests to see.

To emphasise, these are warnings. They don't break the app. Also it's possible to silence them, but that's not advisable because they point to deprecations that one will day actually stop working.

[pablobm]

What's the temperature in the room, re: removing the SCSS altogether?

From a cursory search, I think we might not be using that much SCSS in the app ourselves. Not to say that replacing it would be trivial, but might be doable on an incremental basis.

The main issue appears to be the bootstrap gem, which does use it a lot. Do we actually need the gem? Can we include Bootstrap by other, more "traditional" means?

The bootstrap_form gem doesn't use any, from what I can see.

[gravitystorm]

What's the temperature in the room, re: removing the SCSS altogether?

We use it to override some bootstrap sass variables, like colours and lineheight. I know that bootstrap has been moving to using css variables, but that it's not a completed transition (going by the issues list at least).

However, given our basic usage of the sass variables, I suspect that we could move to using their css variables, but I'm not certain on that.

As for other more advanced uses of sass, I'm not sure that we have much any more. Most sass-based calculations have been removed (although I see there's some in common.scss) and I again suspect that we could replace most, if not all, of these either with CSS or with removing some unnecessary custom css.

[gravitystorm]

To emphasise, these are warnings. They don't break the app. Also it's possible to silence them, but that's not advisable because they point to deprecations that one will day actually stop working.

Indeed. Bootstrap have been fixing the deprecations upstream, but there hasn't been a release recently. Here's their roadmap on this subject: https://github.com/orgs/twbs/discussions/41370

I was sort of hoping that we could just wait for new bootstrap versions, and they would take care of the problem for us, by both fixing the warnings and moving to the most modern sass implementations. But an alternative is, as you outline, moving away from us using sass ourselves, given how much more advanced css itself is nowadays.