Nested template literals inside pug block return syntax error

[bbruneau]

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: `#{}` 

[bbruneau]

Bueller?

[ezhlobo]

@bbruneau I would suggest you close this issue because it's not related to this project. Let's continue in pugjs/babel-plugin-transform-react-pug#20.

[TimothyGu]

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.

[TimothyGu]

Also, this repo is no longer used (the code is now developed at the monorepo https://github.com/pugjs/pug). I will close this.