Attributes not passed through to mixins

My attributes do not seem to pass through.

For example:

      +accordion("sample")
          +accordion-item-primary("Title1","sample","true")
              |  This is first accordion content
          +accordion-item-default("Title2","sample")
              |  This is second accordion content
          +accordion-item-default("Title3","sample")
              |  This is third accordion content

results in the following markup being generated:

<div class="panel-group" id="accordion#{id}" role="tablist" aria-multiselectable="true">
            <div class="panel panel-#{type}">
              <div class="panel-heading" role="tab" id="heading#{title}">
                <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion#{parent}" href="#collapse#{id}" aria-expanded="true" aria-controls="collapseOne">Title1</a></h4>
              </div>
              <div class="panel-collapse collapse in" id="collapse#{id}" role="tabpanel" aria-labelledby="heading#{title}">
                <div class="panel-body"> This is first accordion content
                </div>
              </div>
            </div>
            <div class="panel panel-#{type}">
              <div class="panel-heading" role="tab" id="heading#{title}">
                <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion#{parent}" href="#collapse#{id}" aria-expanded="true" aria-controls="collapseOne">Title2</a></h4>
              </div>
              <div class="panel-collapse collapse" id="collapse#{id}" role="tabpanel" aria-labelledby="heading#{title}">
                <div class="panel-body"> This is second accordion content
                </div>
              </div>
            </div>
            <div class="panel panel-#{type}">
              <div class="panel-heading" role="tab" id="heading#{title}">
                <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion#{parent}" href="#collapse#{id}" aria-expanded="true" aria-controls="collapseOne">Title3</a></h4>
              </div>
              <div class="panel-collapse collapse" id="collapse#{id}" role="tabpanel" aria-labelledby="heading#{title}">
                <div class="panel-body"> This is third accordion content
                </div>
              </div>
            </div>
          </div>

And this error in the console:

jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #{id}

Any idea why this is happening?

[Lynskylate]

Have you solved the question?When i use carousel Component, It has the same question as you.

<div class="carousel slide" id="carousel-#{id}" data-ride="carousel">
<ol class="carousel-indicators">
<li class="" data-target="#carousel-#{id}" data-slide-to="#{index}"></li>
<li data-target="#carousel-#{id}" data-slide-to="#{index}" class=""></li>
<li data-target="#carousel-#{id}" data-slide-to="#{index}" class=""></li>
<li data-target="#carousel-#{id}" data-slide-to="#{index}" class="active"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item"><img src="#{item.image}">
<div class="carousel-caption">
<h1>Headline #1</h1>
<p>Carousel Caption #1</p>
<p><a class="btn btn-lg btn-primary" href="#{item.button.url}" role="button">Sign up today</a></p>
</div>
</div>
<div class="item">
<img src="#{item.image}">
<div class="carousel-caption">
<h1>Headline #2</h1>
<p>Carousel Caption #2</p>
<p><a class="btn btn-lg btn-primary" href="#{item.button.url}" role="button">Sign up today</a></p></div>
</div>
<div class="item">
<img src="#{item.image}"><div class="carousel-caption"><h1>Headline #3</h1><p>Carousel Caption #3</p><p>
<a class="btn btn-lg btn-primary" href="#{item.button.url}" role="button">Sign up today</a></p></div></div><div class="item active"><img src="#{item.image}"><div class="carousel-caption"><h1>Headline #4</h1><p>Carousel Caption #4</p><p>
<a class="btn btn-lg btn-primary" href="#{item.button.url}" role="button">Sign up today</a></p></div></div></div>
<a class="left carousel-control" href="#carousel-#{id}" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-#{id}" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>

I use express+typescript+pug.

[Lynskylate]

In the latest version,pug syntax have been changed.
I have read the documention
The issuse has the same question
We should change"#carousel-#{id}" to

`#carousel-${id} `

or "#carousel-"+id

[mcbergsma]

I think this same fix needs to be applied to all components - similar issue with radio-toggle and checkbox-toggle in toggle.pug

[rajasegar]

@mcbergsma Would love a PR if possible to fix that.