Fails on valid SCSS

[ClayShentrup]

See this error from the latest Tagify.

Error: Invalid CSS after "...    $size: math": expected expression (e.g. 1px, bold), was ".div(-$tagMargin, 2"
        on line 267:32 of node_modules/@yaireo/tagify/src/tagify.scss
        from line 23:1 of app/assets/stylesheets/application.scss
>>                     $size: math.div(-$tagMargin, 2);

https://github.com/yairEO/tagify/issues/921#issuecomment-948910022

Here's the offending section:

&::before{
                    $size: math.div(-$tagMargin, 2);
                    $size: -2px;
                    top:$size; right:$size; bottom:$size; left:$size;
                    box-shadow: 0 0 0 $tag-inset-shadow-size $tag-hover inset;
                    box-shadow: 0 0 0 var(--tag-inset-shadow-size, $tag-inset-shadow-size) var(--tag-hover, $tag-hover) inset;
                  //  box-shadow: 0 0 0 0 $tag-remove inset
                }

Whereas the npm sass (formerly dart-sass) package says it's valid.

[ahorek]

yes, it's a valid syntax, but libsass uses an older standard that doesn't support math functions yet https://github.com/sass/libsass

you can apply a workaround

$size: -$tagMargin / 2;

this will work, but on the other hand, I'll produce a deprecation warning on dart-sass.

I think there's nothing we can do here, we have to wait for libsass to support the new syntax, but it's unlikely to happen anytime soon.