Nested template literals inside pug block return syntax error in eslint

bbruneau commented 7 years ago

I'm using babel-plugin-transform-react-pug in a React project where I'm passing dynamic class names. I use nested template literals like so:

return pug`
  div(className=${`${blockClass}__element`})
    | Whatever content  
`;

This works fine. But JSLint throws an error that seems to come from pug-lexer:

Syntax Error: Unexpected token
Error: Pug:1:16
  > 1| div(className=${`${blockClass}__element`})
----------------------^
    2|       | Whatever content

Syntax Error: Unexpected token
    at makeError (/home/deploy/homestars-www/node_modules/pug-error/index.js:32:13)
    at Lexer.error (/home/deploy/homestars-www/node_modules/pug-lexer/index.js:58:15)
    at Lexer.assertExpression (/home/deploy/homestars-www/node_modules/pug-lexer/index.js:86:12)
    at Lexer.attrs (/home/deploy/homestars-www/node_modules/pug-lexer/index.js:1089:18)
    at Lexer.callLexerFunction (/home/deploy/homestars-www/node_modules/pug-lexer/index.js:1319:23)
    at Lexer.advance (/home/deploy/homestars-www/node_modules/pug-lexer/index.js:1356:15)
    at Lexer.callLexerFunction (/home/deploy/homestars-www/node_modules/pug-lexer/index.js:1319:23)
    at Lexer.getTokens (/home/deploy/homestars-www/node_modules/pug-lexer/index.js:1375:12)
    at lex (/home/deploy/homestars-www/node_modules/pug-lexer/index.js:12:42)
    at findVariablesInTemplate (/home/deploy/homestars-www/node_modules/pug-uses-variables/lib/findVariablesInTemplate.js:31:20)
If I remove the nested literal, this error doesn't occur.

Is this just because of the difference in formatting between babel-plugin-transform-react-pug and pugjs?

viz,

babel-plugin-transform-react-pug: `${}`
pugjs: `#{}`

Incidentally, I've cross-posted this with pug-lexer: https://github.com/pugjs/pug-lexer/issues/81

ezhlobo commented 7 years ago

@bbruneau it is not a syntax of pugjs so it's not related to pugjs (and pug-lexer).

It's related to these two issues in eslint-plugin-react-pug:

Will do my best to fix it! Thank you for reporting this.

bbruneau commented 7 years ago

Ah, thanks a million.

ezhlobo commented 7 years ago

@bbruneau hey, please set version of eslint-plugin-react-pug to 0.0.5.

TimothyGu commented 7 years ago

Either one of

 return pug`
-  div(className=${`${blockClass}__element`})
+  div(className=`${blockClass}__element`)
+  div(className=`${`${blockClass}__element`}`)
     | Whatever content  
 `;

should work.

The attribute value is a JS expression, so no extra ${} needed; but you'll need backticks either way.

pugjs / babel-plugin-transform-react-pug

Nested template literals inside pug block return syntax error in eslint #20