SassC-Rails upgrade - support CSS `min()` and `max()`

Question

SassC-Rails upgrade - support CSS `min()` and `max()`

injms opened this issue 6 years ago · 3 comments

Replacing

gem 'sass-rails', '~> 5.0'

with

gem 'sassc-rails', '>= 2.0.1'

results in errors that (I think) are to do with the conflict between CSS's max() and Sass's max().

SassC Rails uses SassC Ruby, which uses Libsass. Unfortunately, Libsass doesn't currently support CSS min() and max() - issue 2701.

Slightly strange is when SassC Rails is used the app runs fine with no errors, but the tests fail. This might be to do with some gems still relying and installing on Ruby Sass, such as GOV.UK Publishing Components (just updated in v16.7.0) and the deprecated GOV.UK Frontend Toolkit.

The error thrown is:

Error: "calc(0px)" is not a number for `max'

The Sass function also doesn't like having calc() added to it, since calc() will only work in the browser. Sass can't compute percentages, since they rely on knowing the window width - for example: calc(100% - 1em) can only be worked out when you know how big 100% is.

This is triggered by the width container element in GOV.UK Frontend:

@supports (margin: unquote("max(calc(0px))"))

When the library supports CSS min/max, the unquote function ensures that this is output as CSS instead of being processed as a Sass max function.

Solutions:

~~Wait for Libsass support~~ (No longer an option as Libsass is deprecated)
Use Dart Sass which already supports CSS min and max - but I haven't been able to find a Rails-friendly way of doing that
Use Webpacker to use Webpack to compile the CSS. This would mean making sure that all JavaScript and CSS dependencies are JavaScript modules rather than gems. See Ticket 505 on GOV.UK Publishing Components.

Answer 1 · 2019-05-20T15:15:23.000Z

Further learnings...

As far as I can tell, Sass runs twice in this app:

first on the SCSS to turn it into CSS
then again on the CSS to turn it into minified CSS

This means that a workaround for using CSS min() and max() with Libsass - putting quote() around the code to stop Sass from compiling it - doesn't work. It works for the first compilation, but not for the second as the quote function has been removed.

Setting config.assets.css_compressor to nil means that the app will work, but without any form of CSS compression.

Setting the CSS compressor to YUI compress also throws an error.

Answer 2 · 2020-02-27T15:22:31.000Z

@laurentqro may have found a solution to the dual compilation problem in: alphagov/whitehall@1ae8699

That involves turning off the css compressor and setting the sass style to :compressed

Answer 3 · 2024-05-21T13:25:10.000Z

I'm going to close this issue as we now use DartSass for this app and although there are still a few kinks to work out in terms of CSS functions, they're the same for all apps using DartSass across GOV.UK, and the frontend community are working out the solution elsewhere.