Issue on yarn build with Sage theme when curly braces is present on CSS Classes - roots-sage

Question

We have a problem when we do yarn build on our project. Upon investigating it, we found that the mixins that curly braces create an error.
Below is the mixin that we have:
#mixin headings($from: 1, $to: 6) {
#for $i from $from through $to {
h#{ $i } {
#content;
}
}
}
Currently, here is our package.json
{
"name": "sage",
"private": true,
"browserslist": [
"extends #roots/browserslist-config"
],
"engines": {
"node": ">=16.0.0"
},
"type": "module",
"scripts": {
"dev": "bud dev",
"build": "bud build",
"translate": "yarn translate:pot && yarn translate:update",
"translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"app,resources\"",
"translate:update": "for filename in ./resources/lang/*.po; do msgmerge -U $filename ./resources/lang/sage.pot; done; rm -f ./resources/lang/*.po~",
"translate:compile": "yarn translate:mo && yarn translate:js",
"translate:js": "wp i18n make-json ./resources/lang --pretty-print",
"translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang",
"lint": "yarn lint:js && yarn lint:css",
"lint:js": "eslint resources/scripts",
"lint:css": "stylelint \"resources/**/*.{css,scss,vue}\"",
"test": "yarn lint"
},
"devDependencies": {
"#roots/bud": "^6.8.0",
"#roots/bud-eslint": "^6.8.0",
"#roots/bud-prettier": "^6.8.0",
"#roots/bud-sass": "^6.8.0",
"#roots/bud-stylelint": "^6.8.0",
"#roots/bud-tailwindcss": "6.8.0",
"#roots/eslint-config": "^6.8.0",
"#roots/sage": "6.8.0"
},
"dependencies": {
"alpinejs": "^3.11.1"
}
}
We're not sure what is the missing piece here as we already have all the dependencies we need.
Here is the error we experience