Migrate from sassc to modern CSS compilation - #527
Open
cycomachead wants to merge 1 commit into
Open
Conversation
- Replace deprecated `sassc-rails` (LibSass) with `dartsass-sprockets`. - Update `application.scss` to use modern Sass module syntax (`@use "sass:color"`). - Rename DataTables CSS files to SCSS partials to ensure they are inlined during compilation, fixing a production 404 bug. - Add `config/initializers/dartsass.rb` to silence Bootstrap `@import` deprecation warnings. - Fix SVG data URI encoding by adding `%` to `$escaped-characters` to handle Dart Sass color serialization. - Remove LibSass-specific `unquote()` workarounds for CSS variables. Co-authored-by: Claude Code <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
General Info
Changes
Replaces the deprecated
sassc-rails(LibSass) gem withdartsass-sprockets, resolving the Gemfile TODO. Dart Sass is the only maintained Sass implementation; everything else about the pipeline (Sprockets,stylesheet_link_tag,manifest.js, gem-provided SCSS) is unchanged.Key changes:
Gemfile— swapsassc-railsfordartsass-sprockets ~> 3.2. (sasscitself remains as a transitive dependency offont-awesome-sassandsassc-embedded, but no longer compiles anything.)config/initializers/dartsass.rb(new) — silences Bootstrap 5.3's@importdeprecation warnings (quiet_depsfor gem stylesheets,silence_deprecations: ['import']for our own). Can be removed when Bootstrap 6 ships.application.scss— adds@use "sass:color"and updatesmix()calls tocolor.mix()(the modern Sass module API). Adds%→%25to$escaped-charactersso Dart Sass's fractional color serialization doesn't drop bare%into SVG data URIs..cssto_*.scsspartials and re-imported without the.cssextension. Previously,@import "….css"was passed through as a plain CSS@import url(...)rather than being inlined — meaning both DataTables stylesheets 404'd in production since they were never precompiled. Inlining fixes this. Theunquote("rgb(var(--x))")LibSass workarounds are also removed, since Dart Sass handlesrgb(var(…))natively.Testing
rspec: 584 examples, 0 failuresrspec --tag a11y: 40 examples, 0 failures (all pages × light/dark × role, axe-audited)cucumber: same 5 pre-existing failures, no new failuresapplication.csswith DataTables rules inlined, no stray@importremainingVisual Changes
No styling changes — only test-data noise (timestamps) differs between old and new screenshots.
Documentation
No documentation changes required.
Checklist
Superconductor Ticket Implementation | App Preview | Guided Review