Bug: Blank lines contain spaces in inline syntax

[yuheiy]

Info

Tool	Version
Plugin	v1.13.1
Prettier	v2.2.1
Framework	none
Node	v12.20.0
OS	mac

Prettier config

I’m using the default config.

Input

style.
  .a {
  }

  .b {
  }

The 4th line contains no spaces.

Output or Error

style.
  .a {
  }
  
  .b {
  }

The 4th line contains spaces.

Expected Output

style.
  .a {
  }

  .b {
  }

[Shinigami92]

Hi @yuheiy
Sorry for that bug 😅

So I think I know were this is coming from

The red part is the whole indentation of the code from pug and the green part is the indented-managed part from js

So we have to iterate over the formatted lines and check where blank lines occur and the remove the indentation in the red part 🤔
Could be harder than it reads

---

Are you willing to create a PR for that?
Should be something around here:

plugin-pug/src/printer.ts

Lines 1080 to 1186 in 1c7af90

	private ['start-pipeless-text'](token: StartPipelessTextToken): string {
	this.pipelessText = true;
	let result: string = `\n${this.indentString.repeat(this.indentLevel)}`;
	if (this.previousToken?.type === 'dot') {
	const lastTagToken: TagToken | undefined = previousTagToken(this.tokens, this.currentIndex);
	let parser: BuiltInParserName | undefined;
	switch (lastTagToken?.val) {
	case 'script':
	parser = 'babel';
	break;
	case 'style':
	parser = 'css';
	break;
	default:
	break;
	}
	if (parser) {
	let index: number = this.currentIndex + 1;
	let tok: Token | undefined = this.tokens[index];
	let rawText: string = '';
	let usedInterpolatedCode: boolean = false;
	while (tok && tok?.type !== 'end-pipeless-text') {
	switch (tok.type) {
	case 'text':
	rawText += tok.val;
	break;
	case 'newline':
	rawText += '\n';
	break;
	case 'interpolated-code':
	usedInterpolatedCode = true;
	rawText += tok.mustEscape ? '#' : '!';
	rawText += `{${tok.val}}`;
	break;
	default:
	logger.warn(
	'[PugPrinter:start-pipeless-text]:',
	'Unhandled token for pipeless script tag:',
	JSON.stringify(tok)
	);
	break;
	}
	index++;
	tok = this.tokens[index];
	}
	try {
	result = format(rawText, { parser, ...this.codeInterpolationOptions });
	} catch (error: unknown) {
	if (!usedInterpolatedCode) {
	logger.error(error);
	throw error;
	}
	// Continue without formatting the content
	const warningContext: string[] = [
	'[PugPrinter:start-pipeless-text]:',
	'The following expression could not be formatted correctly.',
	'This is likely a syntax error or an issue caused by the missing execution context.',
	'If you think this is a bug, please open a bug issue.'
	];
	warningContext.push(`\ncode: \`${rawText.trim()}\``);
	// TODO: If other token types occur use `if (usedInterpolatedCode)`
	warningContext.push(
	'\nYou used interpolated code in your pipeless script tag, so you may ignore this warning.'
	);
	if (types.isNativeError(error)) {
	warningContext.push(`\nFound ${parser} ${error.name}: ${error.message}.`);
	} else {
	logger.debug('typeof error:', typeof error);
	warningContext.push(`\nUnexpected error for parser ${parser}.`, error as string);
	}
	logger.warn(...warningContext);
	result = rawText;
	}
	result = result.trimRight();
	const indentString: string = this.indentString.repeat(this.indentLevel + 1);
	result = result
	.split('\n')
	.map((line) => indentString + line)
	.join('\n');
	result = `\n${result}`;
	// Preserve newline
	tok = this.tokens[index - 1];
	if (tok?.type === 'text' && tok.val === '') {
	result += `\n${this.indentString.repeat(this.indentLevel)}`;
	}
	this.currentIndex = index - 1;
	}
	}
	return result;
	}

You can extend this test https://github.com/prettier/plugin-pug/tree/main/tests/issues/issue-158 or create a new one

I'm currently into Cyberpunk 2077 😛 so if I should work on this, it could take some days
But I'm happy to review and merge PRs

[Shinigami92]

@yuheiy I'm so sorry for you that I currently also taking holiday from GitHub 😅
I have around 60h playtime in CP2077 and still not finished with it 🥰
Also I have some private meetings here and there as christmas events

So tldr: I think I will come back to GitHub in January

Have a greate time and stay safe 😃

[Shinigami92]

Oh my god, I'm so sorry for you @yuheiy that I let you wait so long
I started working on this and thought "OK that may be hard to find and fix, but let's do it"
... and then ... it was a one-liner 🤦

https://github.com/prettier/plugin-pug/pull/175/files#diff-35264771cf86f41ef7b7d56b764142b299a8bd2a972b2316e4e3e92e13056500R1171

🤣

But I will let make a co-worker a review on this so I don't miss anything, but you can expect a release of 1.13.2 or similar in the next few hours/days

[yuheiy]

Great! Thank you so much!

[Shinigami92]

There it is ❤️ https://www.npmjs.com/package/@prettier/plugin-pug/v/1.13.2