Set up cssbundling-rails to transpile and bundle SCSS

[joncameron]

Description

Setting up cssbundling-rails to transpile and bundle our SCSS. Shakapacker can be set up in advance of this work to serve only JS so we can focus on just the CSS bundling. Our CSS bundling should be separate from JS in our asset pipeline.

Done Looks Like

• migrate Avalon to dartsass-rails gem
• cssbundling-rails added to Avalon
• cssbundling-rails used for CSS transpilation and bundling for Avalon's asset pipeline

[joncameron]

We're on an older version of sprockets/shakapacker, and so the migration may require us to update to a newer version beforehand.

[masaball]

After working at this a bit it looks like I got the order wrong in my initial investigation. It will be easier to convert the JS pipeline first then we can convert the CSS pipeline. We use Sprockets to serve the CSS and Sprockets requires LibSass so trying to convert to Dartsass was causing errors. There are potentially workarounds but getting to a point where we can transition the CSS at the same time as moving away from Sprockets will be preferable. May be able to move forward with this leaving sassc in place and updating to dartsass later.

Something to note that we will need to figure out. We use the font-awesome-rails gem. This gem generates its stylesheet(s) in an old Sprockets compatible way that dartsass-rails cannot parse. There is an open issue in the repo to support dartsass but no telling if/when any work on that will be done. We could potentially try to fork and patch it ourself. Or I saw some talk about installing the NPM release of font-awesome and then importing the stylesheets from that install. That way we still have the convenience methods of the gem, but are getting the stylesheets from another source. But we can discuss and cross that bridge when we get to it.