Error when extracting variables with values containing calc function

[donar06]

Context
When using sass-extract on NodeJS, at least together with package sass, it fails on renderSync function call if variables string contains values with calc function.

Example:

const sass = require('sass');
const sassExtract = require('sass-extract');
sassExtract.renderSync({ data: '$var1: calc(100% - 70px - .625rem);' }, { implementation: sass });

Dependencies:

"sass-extract": "^3.0.0",
"sass": "^1.70.0"

Expected result
It should handle calc function correctly and extract it as regular string value

Actual result

Error: Unsupported sass constructor 'SassCalculation0'
  ╷
4 │     $___SV_INJECT_ZGF0YQ_IG_var1_0: ___SV_INJECT_ZGF0YQ_IG_var1_0($var1); 
  │                                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  stdin 4:37  root stylesheet
    at getConstructorName (/home/d/Projects/test2/node_modules/sass-extract/lib/util.js:120:13)
    at createStructuredValue (/home/d/Projects/test2/node_modules/sass-extract/lib/struct.js:68:40)
    at Object.injectedFunction (/home/d/Projects/test2/node_modules/sass-extract/lib/inject.js:24:51)
    at LegacyJavaScriptObject.apply$2 (/home/d/Projects/test2/node_modules/sass/sass.dart.js:30528:23)
    at Object.apply$2$x (/home/d/Projects/test2/node_modules/sass/sass.dart.js:1008:43)
    at _parseFunctions___closure1.call$0 (/home/d/Projects/test2/node_modules/sass/sass.dart.js:102040:16)
    at Object.wrapJSExceptions (/home/d/Projects/test2/node_modules/sass/sass.dart.js:8407:25)
    at _parseFunctions__closure0.call$1 (/home/d/Projects/test2/node_modules/sass/sass.dart.js:102032:30)
    at _EvaluateVisitor__runBuiltInCallable_closure6.call$0 (/home/d/Projects/test2/node_modules/sass/sass.dart.js:97901:35)
    at _EvaluateVisitor1._evaluate0$_addExceptionSpan$1$3$addStackFrame (/home/d/Projects/test2/node_modules/sass/sass.dart.js:96354:23)
    at _EvaluateVisitor1._evaluate0$_addExceptionSpan$2 (/home/d/Projects/test2/node_modules/sass/sass.dart.js:96368:19)
    at _EvaluateVisitor1._evaluate0$_runBuiltInCallable$3 (/home/d/Projects/test2/node_modules/sass/sass.dart.js:95809:24)
    at _EvaluateVisitor1._evaluate0$_runFunctionCallable$3 (/home/d/Projects/test2/node_modules/sass/sass.dart.js:95732:55)
    at _EvaluateVisitor_visitFunctionExpression_closure7.call$0 (/home/d/Projects/test2/node_modules/sass/sass.dart.js:97755:25)
    at _EvaluateVisitor1._evaluate0$_addErrorSpan$1$2 (/home/d/Projects/test2/node_modules/sass/sass.dart.js:96398:23)
    at _EvaluateVisitor1._evaluate0$_addErrorSpan$2 (/home/d/Projects/test2/node_modules/sass/sass.dart.js:96416:19) {

[juliangsp]

The same is happening to me when moved to package sass (Dart Sass), it wasn't happening on node-sass

[juliangsp]

It seems it could be caused by some mixture of units given as parameter to calc(), e.g. the following break as indicated on the issue:

data = '$var1: calc(100% - 70px - .625rem);'; // breaks
data = '$var1: calc(70px - .625rem);'; // breaks
data = '$var1: calc(70px - 0.625rem);'; // breaks
data = '$var1: calc(100vh - 10rem);'; // breaks
data = '$var1: calc(100% - 70px);'; // breaks
data = '$var1: calc(50vh + 8px);'; // breaks
data = '$var1: calc(100vw - 10vh);'; // breaks
data = '$var1: calc(100vw - 1px);'; // breaks

where as these do not break:

data = '$var1: calc(70px + 1px);'; // works
data = '$var1: calc(70rem - .625rem);'; // works
data = '$var1: calc(100vh - 10vh);'; // works
data = '$var1: calc(100rem - 10rem);'; // works
data = '$var1: calc(100% - 10%);'; // works

From the above, it breaks when there's a mixture of units that include rem, %, vh, and vw.

[juliangsp]

From @donar06 code example if I do it the old way without the calc() function I get incompatible units:

Error: 100% and 70px have incompatible units.
  ╷
1 │ $var1: 100% - 70px - .625rem;
  │        ^^^^^^^^^^^
 ╵
  stdin 1:8  root stylesheet

I guess that answers the issue, maybe handling the error in a different way instead of throwing the exception without catching it would be an enhancement.

[juliangsp]

@donar06, if you haven't gotten around that issue try string interpolation around the cal() function:

'$var1: #{calc(100% - 70px - .625rem)};'