Error using Next js when generating a type scale

[Jon Quayle]

Hi,

I fully appreciate I might be doing something incorrectly, but the docs are not clear on how this should work once added in your .scss file to be honest - feeling very lost. I have added in the example generate type scale code to get up and running and tweak from there, but I see an error:

SassError: Undefined operation "16 * pow(1.125, 0)".
   ╷
40 │   @return $fontSize * pow($scale, $step);
   │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/utopia-core-scss/src/utopia.scss 40:11   calculateTypeSize()
  node_modules/utopia-core-scss/src/utopia.scss 44:13   calculateTypeStep()
  node_modules/utopia-core-scss/src/utopia.scss 62:27   calculateTypeScale()
  node_modules/utopia-core-scss/src/utopia.scss 249:18  generateTypeScale()
  src/styles/base/_config.scss 230:1                    @use
  src/styles/style.scss 2:1                             root stylesheet

The code I am using:

@use 'node_modules/utopia-core-scss/src/utopia' as utopia;

:root {
  @include utopia.generateTypeScale((
    "minWidth": 320,
    "maxWidth": 1240,
    "minFontSize": 18,
    "maxFontSize": 20,
    "minTypeScale": 1.2,
    "maxTypeScale": 1.25,
    "positiveSteps": 2,
    "negativeSteps": 2,
    /* Optional params */
    "relativeTo": "viewport",
    "prefix": "step-",
  ));
}

Am I doing something wrong?

[Trys Mudford]

Hey @JonQuayle - so sorry you're feeling lost. Looks like there's an issue there with the pow function. Could you let me know which version of Sass you're loading in package.json?

Thanks!

[Jon Quayle]

Hey @trys, I was using Sass version 1.66.1. I have updated to the latest version 1.71.1 and it is working now, thanks. I think what confused me was the wording where the CSS variables are generated - they are generated, but they're not added to the stylesheet, but I am there now, thanks!