Migrate from SassC to Dart Sass

ncbo / bioportal_web_ui

A Rails application for biological ontologies

http://bioportal.bioontology.org/

Other

21 stars 2 forks source link

Migrate from SassC to Dart Sass #313

Open jvendetti opened 3 months ago

jvendetti commented 3 months ago

This pull request migrates from SassC to Dart Sass, and was motivated by two main factors: 1) SassC is deprecated, and 2) a recent attempt to integrate styles from the tom-select plug-in failed (see #312). The comments in Migration from sassc-rails workarounds issue were particularly useful.

Changes include:

Replace the sassc-rails gem with dartsass-rails
Migrate style files to the default Sass input file: app/assets/stylesheets/application.scss
Change from @import to the @use rule in the default input file
Separate out the jquery-ui styles and process with Sprockets. The jquery-ui-rails gem depends on Sprockets require directives, which aren't supported in dartsass-rails.
Fix "There's already a module with namespace" errors by adding as clauses
Replace image-url asset helpers with url, as dartsass-rails doesn't support asset helpers

jvendetti commented 3 months ago

After pursuing this approach, I'm not convinced that integrating this code is advisable. We've already committed to jsbundling-rails, making cssbundling-rails the logical choice for asset management.

In addition, migrating to dartsass-rails doesn't entirely solve issues related to processing style files from 3rd-party libraries. I re-tested adding tom-select after the migration and their Bootstrap-specific styles still result in errors. For example, adding this line at the bottom of the default input file:

@use 'tom-select/dist/scss/tom-select.bootstrap5'

Results in a build failure:

Error: Undefined variable.

$state-valid: map-get($form-validation-states,'valid') !default;

This variable does in fact exist in the gem:

$ bootstrap-5.2.3 grep -R "\$form-validation-states"
./assets/stylesheets/bootstrap/_variables.scss:$form-validation-states: (

... and I believe the build failure is attributable to an ordering issue, similar to what's described here: https://github.com/rails/dartsass-rails/issues/43#issuecomment-1801653170.

syphax-bouazzouni commented 3 months ago

Hello,

Just for note, maybe not related; but we still use Bootstrap 4.3 in Agroportal and maybe that is why make tom-select work, and maybe will we have those same issues when migrating to Bootstrap 5.

In the matter of migrating to Dart Sass, I also tried to do it some time ago but did not work, cssbundling-rails agree that it would be the final goal, but will take some time, as we still use JQuery / JQuery UI and other stuff using the traditional assets pipeline.