Whitespace indent with dot syntax

[kylekatarnls]

Pug Version: 2.0.0-rc.4 (tested on pugjs.org)

Input Pug

script.
  if (usingPug)
    console.log('you are awesome')
  if (usingPug)xx
    console.log('you are awesome')

Expected HTML

<script>
  if (usingPug)
    console.log('you are awesome')
  if (usingPug)xx
    console.log('you are awesome')
</script>

Actual HTML

<script>
  if (usingPug)
    console.log('you are awesome')
  if (usingPug) xx
  console.log('you are awesome')
</script>

Additional Comments

I'm surprised that pugjs proceed the text content (add a space before xx and remove the indent before the next console.log). Is it expected behavior?

I was expected the . would keep as is the content.

[droooney]

It looks like your js in the Actual HTML is exactly the same as the one in the pug code.

[kylekatarnls]

Sorry, actual and expected was swapped.

So, expected: keep the text as it.

Actual: remove an indent before second console.log, add a space before xx

[droooney]

Ok, I see. Strange indeed.

[ForbesLindesay]

Thanks for reporting this. It seems like a pretty serious bug. It will need more investigation though.

[SerayaEryn]

I took a look at this issue.

This problem isn't caused by pug itself. It is caused by module used to beautify the html rendered by pug on pugjs.org.

I used the following test to verify that pug does not cause the wrong indent:

'use strict';

var assert = require('assert');
var pug = require('../');

describe('#2909', function(){
  it('whitespace indent with dot syntax ', function () {
    var str = [
      'script.',
      '  if (usingPug)',
      '    console.log(\'you are awesome\')',
      '  if (usingPug)xx',
      '    console.log(\'you are awesome\')'
    ].join('\n');
    var res = pug.render(str);
    var expected = [
      '',
      '<script>',
      '  if (usingPug)',
      '    console.log(\'you are awesome\')',
      '  if (usingPug)xx',
      '    console.log(\'you are awesome\')',
      '</script>'
    ].join('\n');

    var actual = pug.render(str, {pretty: true});
    expect(actual).toBe(expected);
  });
});

The following test reproduces the problem as it happens on pugjs.org:

'use strict';

var assert = require('assert');
var pug = require('../');
var beautifyHtml = require('js-beautify').html_beautify;

describe('#2909', function(){
  it('whitespace indent with dot syntax ', function () {
    var str = [
      'script.',
      '  if (usingPug)',
      '    console.log(\'you are awesome\')',
      '  if (usingPug)xx',
      '    console.log(\'you are awesome\')'
    ].join('\n');
    var res = pug.render(str);
    var expected = [
      '<script>',
      '  if (usingPug)',
      '    console.log(\'you are awesome\')',
      '  if (usingPug)xx',
      '    console.log(\'you are awesome\')',
      '</script>'
    ].join('\n');

    var actual = pug.render(str);
    actual = beautifyHtml(actual);
    expect(actual).toBe(expected);
  });
});

[ForbesLindesay]

Ah, in that case this just requires an update to the website. I'll get to that eventually (I'd like to add code to let you render un-beautified)