ezhlobo/eslint-plugin-react-pug

Not detect string interpolation - babel-plugin-transform-react-pug

phmngocnghia opened this issue · 3 comments

phmngocnghia commented

*string interpolation
Error : react-pug/no-broken-template
Code that got error: https://paste.ofcode.org/8SRSabwhEnQBwYeTNdEXDG
Transpilier use: https://github.com/pugjs/babel-plugin-transform-react-pug
Code that cause error:
div(className=${portfolioSection.projects > 0 ? '.mb-4' : ''})

ezhlobo commented

@phmngocnghia thanks for reporting this. I was able to reproduce this behavior, will keep you updated.

ezhlobo commented

@phmngocnghia in the meantime you can see the better options of using pug in react: https://github.com/pugjs/babel-plugin-transform-react-pug#define-local-variables-and-use-javascript-in-attributes

Basically your example could be re-written this way:

div(class=portfolioSection.projects > 0 && '.mb-4')

div(class=portfolioSection.projects > 0 ? '.mb-4' : '')
ezhlobo commented

@phmngocnghia I've published new release: 0.3.2. Please, take a look at it and feel free to re-open this issue if it's not fixed.