plugin-pug: Bug: fails with nested translations

Info

Tool	Version
Plugin	v1.19.1
Prettier	v2.4.1
Framework	angular
Node	v14.18.1
OS	linux

Prettier config

printWidth: 120
tabWidth: 2
useTabs: false
semi: true
singleQuote: true
trailingComma: 'es5'
bracketSpacing: true
arrowParens: 'avoid'

overrides:
  - files: '*.pug'
    options:
      singleQuote: false
      pugAttributeSeparator: 'always'
      pugClosingBracketPosition: 'new-line'
      pugCommentPreserveSpaces: 'trim-all'
      pugEmptyAttributes: 'none'
      pugClassNotation: 'literal'
      pugIdNotation: 'literal'
      pugExplicitDiv: false
      pugSortAttributes: 'as-is'
      pugSortAttributesBeginning:
        - '^#'
        - '^\*ngIf$'
        - '^[?ngSwitch]?$'
        - '^\*ngSwitchCase$'
        - '^\*ngSwitchDefault$'
      pugSortAttributesEnd: []
      pugFramework: 'angular'

Input

    some-component(
      title="{{ '{type}-text' | translate: { type: someType | translate } }}",
    )

Output or Error

Error: SyntaxError: Missing expected } at the end of the expression [{{'{type}-text' | translate: { type: someType | translate }}}] in angular-estree-parser
[error]     at a (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/parser-angular.js:66:19709)
[error]     at t.parseNgInterpolation (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/parser-angular.js:66:20876)
[error]     at r (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/parser-angular.js:66:31840)
[error]     at Object.t.parseInterpolation (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/parser-angular.js:66:32243)
[error]     at /home/valeri/workspaceA4/notices-resources/node_modules/prettier/parser-angular.js:66:32886
[error]     at Object.parse (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/parser-angular.js:66:32551)
[error]     at Object.parse$a [as parse] (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:12513:19)
[error]     at coreFormat (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:14044:16)
[error]     at formatWithCursor$1 (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:14284:14)
[error]     at /home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:59304:12
[error]     at PugPrinter.build (/home/valeri/workspaceA4/notices-resources/node_modules/@prettier/plugin-pug/dist/printer.js:127:23)
[error]     at Object.print (/home/valeri/workspaceA4/notices-resources/node_modules/@prettier/plugin-pug/dist/index.js:69:40)
[error]     at callPluginPrintFunction (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:13787:21)
[error]     at mainPrintInternal (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:13725:17)
[error]     at mainPrint (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:13707:14)
[error]     at printAstToDoc (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:13694:13)
[error]     at coreFormat (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:14055:15)
[error]     at formatWithCursor$1 (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:14284:14)
[error]     at Object.formatWithCursor (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:59304:12)
[error]     at format$1 (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/bin-prettier.js:16953:21)

Expected Output

should be no error, pug is correct

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 15 (13 by maintainers)

Most upvoted comments

No, not really 😄 This will do for now

At least the rest of the file would now format correctly

Shinigami92 on Jan 19, 2022

I don’t know anything about this syntax… but seems valid in core plugin.

Prettier 2.5.1 Playground link

--parser angular

Input:

<some-component
      title="{{ '{type}-text' |        translate: { type: someType | translate } }}"
    ></some-component>

Output:

<some-component
  title="{{ '{type}-text' | translate: { type: someType | translate } }}"
></some-component>

I’m not near my laptop, maybe you used the wrong parser? I’d suggest to check how it works in the core parser.

fisker on Jan 19, 2022

sorry didint have time, using //- prettier-ignore for now

valera33 on Jan 18, 2022

ok, probably we will wait for new TS version then 😃 for now I am using //- prettier-ignore for this line

valera33 on Jan 12, 2022