Bug: Failed to compile CSS/SCSS When curly braces is present on css class as dynamic value for mixin

[makolivaresbbt]

Terms

• [X] I have read the guidelines for Contributing to Roots Projects
• [X] This request is not a duplicate of an existing issue
• [X] I have read the docs and followed them (if applicable)
• [X] I have seached the Roots Discourse for answers and followed them (if applicable)
• [X] This is not a personal support request that should be posted on the Roots Discourse community

Description

Currently, we have a mixin function that generates content based on how the user uses it.

@mixin headings($from: 1, $to: 6) { @for $i from $from through $to { h#{ $i } { @content; } } }

If you notice the h#{ $i }, the curly braces return the error below

Below are the dependencies that we have

"devDependencies": { "@roots/bud": "^6.9.0", "@roots/bud-eslint": "^6.9.0", "@roots/bud-prettier": "^6.9.0", "@roots/bud-sass": "^6.9.0", "@roots/bud-stylelint": "^6.9.0", "@roots/eslint-config": "^6.9.0", "@roots/bud-entrypoints": "6.9.0", "@roots/bud-postcss": "6.9.0", "@roots/sage": "6.9.0" },

Steps To Reproduce

1. Install Sage Theme
2. Install depencies below: "devDependencies": { "@roots/bud": "^6.9.0", "@roots/bud-eslint": "^6.9.0", "@roots/bud-prettier": "^6.9.0", "@roots/bud-sass": "^6.9.0", "@roots/bud-stylelint": "^6.9.0", "@roots/eslint-config": "^6.9.0", "@roots/bud-entrypoints": "6.9.0", "@roots/bud-postcss": "6.9.0", "@roots/sage": "6.9.0" },
3. Add a mixin that contains curly braces on css Class. ex: @mixin headings($from: 1, $to: 6) { @for $i from $from through $to { h#{ $i } { @content; } } }
4. Yarn Build

Expected Behavior

Since this is a SCSS function, this should be working perfectly

Actual Behavior

but the issue render this error

Relevant Log Output

No response

Versions

Sage 10

[retlehs]

Let's use your existing support topic on Roots Discourse for the back-and-forth on this — Sage doesn't include Sass out of the box, so this is either an issue with our docs or upstream in bud