Error on grid component --minimum value

[VirginiaDooley]

design-system/system/partials/_grid.scss

Line 14 in 50f155b

@supports (width: min(var(--minimum), 100%)) {

I'm getting this error:

b'sassc: error: Error: "var(--minumum)" is not a number for min'\n on line 14 of design-system/system/partials/_grid.scss\n>> @supports (width: min(var(--minumum), 100%)) {\n\n --------------------^'`

so I just wanted to check where exactly this is set (and maybe it's not available to me) or what data type should be passed into the style, assuming it needs to be set manually. Thank you!

[symroe]

Confirmed this is a problem that we see in Python's libsass implementation but not Dart scss.

In Dart, the grid is converted to the following CSS:

@supports (width: min(var(--minimum), 100%)) {                                                                                                                                   
  .ds-scope .ds-grid > * + * { 
    margin-top: 0;
  }
  .ds-scope .ds-grid {
    display: grid;
    grid-gap: var(--gridGap, 1.25rem);
    --gridCellMin: 30ch;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--gridCellMin), 100%), 1fr));
  }
}

With Python libsass it tries to interpret --minumum as a sass var (I think) and returns null, resulting in the error Virginia pasted above.

[symroe]

Oh look:

we regularly see users confused as to why plain-CSS min() and max() don’t work and assuming Sass as a whole is at fault, when in fact it’s only LibSass that doesn’t support that feature.

https://sass-lang.com/blog/libsass-is-deprecated

Apparently LibSass is deprecated, meaning python users are left with no native bindings in to scss that is supported. The maintainer of the Python LibSass implementation suggests that this might not last, but it seems that the existing bugs are causing us problems already - this will only get worse as dart-sass and libsass diverge.

Let's have a chat about if we can work around it for the time being, or if we need to move to including npm in all of our project's build steps :/

[Heydon]

Fixed in master. Had to use a proxy Sass function to mock CSS's min().

Now, wherever we use min() it should render fine.