SASS compile error

[simurai]

It might happen that the build is failing with the following error:

#22 33.26 SassC::SyntaxError: Error: "var(--Layout-row-gap)" is not a number for `max'
#22 33.26         on line 78:23 of node_modules/@primer/css/layout/page-layout.scss, in function `max`
#22 33.26         from line 78:23 of node_modules/@primer/css/layout/page-layout.scss, in mixin `@content`
#22 33.26         from line 16:9 of node_modules/@primer/css/support/mixins/layout.scss, in mixin `breakpoint`
#22 33.26         from line 58:12 of node_modules/@primer/css/layout/page-layout.scss
#22 33.26         from line 7:9 of node_modules/@primer/css/layout/index.scss
#22 33.26         from line 20:9 of node_modules/@primer/css/core/index.scss
#22 33.26         from line 17:9 of node_modules/@primer/css/index.scss
#22 33.26         from line 2:9 of app/assets/stylesheets/application.css.scss
#22 33.26 >>       padding-bottom: max(var(--Layout-row-gap), var(--Layout-inner-spacing-
#22 33.26    ----------------------^
#22 33.26 /app/node_modules/@primer/css/layout/page-layout.scss:78

[simurai]

This is probably similar to the Jekyll error.

Some of the SCSS files started to use features like max() that are only supported by dart sass, but not by LibSass (sassc) to compile the CSS. Some options you might could try:

1. Precompiled

Use the already compiled CSS. You could also add it to your repo and not load it from the unpkg.com CDN.

2. Separate imports

Only import the styles that are needed. Instead of adding all of Primer CSS, you could only add the components that are needed. That should also cut down on file size. Something like:

- @import '@primer/css/index.scss';
+ @import '@primer/css/support/index.scss';
+ @import '@primer/css/base/index.scss';
+ @import '@primer/css/buttons/index.scss';
+ etc.

And make sure to avoid importing the @primer/css/layout/index.scss that contains max(). Depending on the project, this could be a bit tedious to manage.

3. Keep using an older version

The max() feature was added in #1737. So if that's the only case, LibSass might be supported until 19.1.0 instead of the latest:

npm install @primer/css@19.1.0 --save

Of course, you couldn't use any newer versions, but maybe still ok for a while.

4. Switch to dart sass

If feasible for your project, switching to dart sass should fix the compiler error.