<p dir="auto"><a href="https://github.com/sass/sassc-rails"><code class="notranslate">sassc-rails</code></a> and the underlying C-library <a href="https://github.com/sass/libsass">libsass</a>, are deprecated. <code class="notranslate">libsass</code> has problems when compiling newer versions of Bootstrap (5.2+), where it cannot re-parse its own output, and that causes problems during our asset precompilation. After extensive investigations I cannot find a workaround to keep using sassc-rails with newer versions of Bootstrap.</p>
<p dir="auto">This PR switches our sass stylesheet compiler to <a href="https://github.com/tablecheck/dartsass-sprockets"><code class="notranslate">dartsass-sprockets</code></a>, which is designed to be a drop-in replacement for <code class="notranslate">sassc-rails</code>, and which uses the currently maintained <a href="https://sass-lang.com/dart-sass/" rel="nofollow">dart implementation of sass</a>.</p>
<p dir="auto">Unfortunately the bootstrap gem had, <a href="https://github.com/twbs/bootstrap-rubygem/commit/fde1edff90d9219bbef48ecc6a65f13835269bcd">until recently</a>, a hard-coded dependency on <code class="notranslate">sassc-rails</code>, and therefore conflicted with <code class="notranslate">dartsass-sprockets</code> (the two cannot be used at the same time). Although this has been resolved in bootstrap-rubygems main branch, the fix has not been backported to the 5.1 and 5.2 branches. To work around this, I have backported the fix myself, and this PR uses the bootstrap 5.1 backported version.</p>
<p dir="auto">I have also prepared two other branches, which I will open draft PRs for, namely:</p>
<ul dir="auto">
<li>Upgrading to bootstrap 5.2, with the appropriate backport</li>
<li>Upgrading to bootstrap 5.3, using bootstrap-rubygem main branch (backport no longer required)</li>
</ul>
<p dir="auto">I'm offering these as a series of incremental upgrades, with all the associated backporting hassle, just in case there are any problems with deployment that CI hasn't picked up, as well as to make them easier to review.</p>
<p dir="auto">A note on <code class="notranslate">sass-embedded</code> pinning - in recent years dartsass has added a number of deprecation warnings relating to changes in the sass language. Bootstrap quickly receives fixes to deal with them, but these fixes are generally not backported to earlier releases. To avoid copious noise from these deprecations, it's best to use a version of dartsass that is contemporary with each bootstrap release. Each PR in this series does so. When we update to 5.3+ this will be less of an issue.</p>
<hr>
<h4>You can view, comment on, or merge this pull request online at:</h4>
<p> <a href='https://github.com/openstreetmap/openstreetmap-website/pull/4260'>https://github.com/openstreetmap/openstreetmap-website/pull/4260</a></p>
<h4>Commit Summary</h4>
<ul>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4260/commits/6b6c4689155f61b8113ef6d54a58044bf159ed20" class="commit-link">6b6c468</a> Install git in Docker to allow git repos in Gemfile</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4260/commits/41f13ac73a740b16bce708b23db8b2cdb6d24d1f" class="commit-link">41f13ac</a> Switch from sassc-rails to dartsass-sprockets</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4260/commits/c975bae5074e4211a86458856030f0d17eaef917" class="commit-link">c975bae</a> Workaround for dartsass vs bootstrap 5.1 bug</li>
</ul>
<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4260/files">4 files</a>)</p>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4260/files#diff-dd2c0eb6ea5cfc6c4bd4eac30934e2d5746747af48fef6da689e85b752f39557">Dockerfile</a>
(1)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4260/files#diff-d09ea66f8227784ff4393d88a19836f321c915ae10031d16c93d67e6283ab55f">Gemfile</a>
(6)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4260/files#diff-89cade48462044ee1b672dc5f4c3ec250fbd29effcd8932096a23c1283c6731f">Gemfile.lock</a>
(40)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4260/files#diff-d2e82deee467e04b34fde66bc330f96ed2020aefc541445c1d576a56612ee71b">app/assets/stylesheets/parameters.scss</a>
(10)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/4260.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/4260.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/4260.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/4260.diff</a></li>
</ul>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/4260">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLKNIIVSDSFIV277KOTX4PWOHANCNFSM6AAAAAA5JBCSSY">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLJ5GUYHA2DQ37MO75DX4PWOHA5CNFSM6AAAAAA5JBCSS2WGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHHEJOTXU.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/4260</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/4260",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/4260",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>