CSS `min()` and `max()` throw errors for Libsass

Libsass is throwing an error when processing GOV.UK Frontend, as Libsass doesn’t support CSS min() and max() which is used in the width container component.

Specifically, Libsass doesn’t like calc() being used in max() as Libsass tries to process it as a Sass function and can’t because calc() is CSS function for use in the browser. I’ve investigated it in an issue for finder frontend if you’d like more information.

Dart Sass and (ironically) Ruby Sass does support CSS min/max - the things that’s stopping these being used is that there doesn’t seem to be any Rails friendly way of using Dart Sass (without refactoring vast swathes of code so Webpacker can be used) and Ruby Sass is deprecated.

Because there doesn’t seem to be much movement in getting Libsass to have support for CSS min/max, would it be possible to place the notch support behind a flag so it can be turned off? I think the default should be to keep it on, but to have the ability to exclude it with a flag when needed.

[injms]

For future reference to anyone who stumbles across this, a solution was found in SassC Rails issue 93.

BUT this turns off CSS compression, so you’ll need to run it through either another CSS compressor in the Rails assets pipeline, or compress it separately.

Relevant bit:

So by adding this to my config/environments/test.rb the problems went away:

# Set a css_compressor so sassc-rails does not overwrite the compressor when running the tests
config.assets.css_compressor = nil

EDIT:

And here’s how to add compression using the Sass gem. Add this to the config file as well:

config.sass.style = :compressed

[colinrotherham]

@injms Ah that’s great.

So it sounds like the new Sass min/max feature will cleverly use the native CSS methods, or fall back to the standard Sass ones: https://sass-lang.com/documentation/syntax/special-functions#min-and-max

So one day we can then use native CSS min()/max() in Sass without unquote() 🎉

@nickcolley Sadly it would break the @supports test. To work with Safari on iOS 11+ the units (px) need to be specified otherwise I presume max() evaluates to nothing and doesn’t run.

So this would work for Safari:

margin: unquote("max(0px)")

But, we added calc() into the @supports test because it’s used in the “display cutout” media query itself, so it’s the responsible thing to test for it before we attempt to use it.