search

pugjs / pug

Pug – robust, elegant, feature rich template engine for Node.js
https://pugjs.org
21.62k stars 1.96k forks source link

Inlcude doesnt behave as expected #2263

Open NoNameProvided opened 8 years ago

NoNameProvided commented 8 years ago

include doesn`t respect idents properly. To reproduce use the following:

/includes/something.jade

.row.center-xs.around-xs
  .col-xs-11.col-sm-10

/somethingelse.jade

.m-topMenu
  include ../../includes/something.jade 
    .row
      .col-xs-3
        | Content

This will compile to the following html markup: 

<div class="m-topMenu">
  <div class="row center-xs around-xs">
    <div class="col-xs-11 col-sm-10"></div>
    <div class="row"> <!-- Notice that .row and .col-xs-11 on the same level but in the jade template they are nested --> 
      <div class="col-xs-3">
        Content
      </div>
    </div>
  </div>
</div>

The expected markup would be:

<div class="m-topMenu">
  <div class="row center-xs around-xs">
    <div class="col-xs-11 col-sm-10"></div>
      <div class="row">
        <div class="col-xs-3">
          Content
        </div>
      </div>
  </div>
</div>
ryardley commented 8 years ago

Indents in jade represent nesting and not whitespace and to my eyes this works as expected. In my opinion this should be closed but I am not a member of the core team.

TimothyGu commented 8 years ago

Add a block as a child of .col-xs-11.col-sm-10 in something.jade should fix it.

ForbesLindesay commented 8 years ago

You need to do:

.row.center-xs.around-xs
  .col-xs-11.col-sm-10
    yield

I believe the reason this currently works is that pug acts as if every included template ends in an implicit yield, which is not indented. i.e. it's rendered as if you had written:

.row.center-xs.around-xs
  .col-xs-11.col-sm-10
yield

This is obviously super confusing behaviour and will definitely be changed/fixed as part of the review of blocks, extends and includes in 3.0.0

NoNameProvided commented 8 years ago

Add a block as a child of .col-xs-11.col-sm-10 in something.jade should fix it.

Nope. As I remember it doesn't. I had to add a wrapper like this:

.m-topMenu
  include ../../includes/something.jade 
  .wrapper
    .row
      .col-xs-3
        | Content

This is obviously super confusing behaviour and will definitely be changed/fixed as part of the review of blocks, extends and includes in 3.0.0

:+1: