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

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