1

I am trying to add style attributes using pugsj and I cant figure how to add a style like line-height without my linters complaining.

I have this pug template(doesnt work)

 Div(
  class="CoolAid"
  style={line-height:'40px', background-color: 'red'}
 )
    = childrenArray[0]

Note, that eslint still complains when i use"background-color": 'red'.

yarn lint:es
 yarn run v1.6.0
$ eslint ./config ./src
Cannot read property 'split' of undefined
TypeError: Cannot read property 'split' of undefined
at TaggedTemplateExpression (/home/circleci/github/node_modules/eslint-plugin- 
react-pug/lib/rules/no-broken-template.js:33:38)
at listeners.(anonymous function).forEach.listener (/home/circleci/github/node_modules/eslint/lib/util/safe-emitter.js:47:58)
at Array.forEach (<anonymous>)
at Object.emit (/home/circleci/github/node_modules/eslint/lib/util/safe-emitter.js:47:38)
at NodeEventGenerator.applySelector (/home/circleci/github/node_modules/eslint/lib/util/node-event-generator.js:251:26)
at NodeEventGenerator.applySelectors (/home/circleci/github/node_modules/eslint/lib/util/node-event-generator.js:280:22)
at NodeEventGenerator.enterNode (/home/circleci/github/node_modules/eslint/lib/util/node-event-generator.js:294:14)
at CodePathAnalyzer.enterNode (/home/circleci/github/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:608:23)
at Traverser.enter [as _enter] (/home/circleci/github/node_modules/eslint/lib/linter.js:865:28)
at Traverser._traverse (/home/circleci/github/node_modules/eslint/lib/util/traverser.js:132:14)

error Command failed with exit code 1.

[eslint] Pug can't parse this template (react-pug/no-broken-template)

These are the pug/eslint related packages I use

"eslint-plugin-react": "^7.4.0",
"eslint-plugin-react-pug": "^0.3.0",
"babel-plugin-transform-react-pug": "^5.0.0",
"eslint": "^4.19.1",
Fatah
  • 2,184
  • 4
  • 18
  • 39
  • I notice you say that it still complains when you use "background-color" so I don't know if you were saying that you know that you need to use "" or not... – Cody Ｇ Jun 19 '18 at 14:41
  • its complaining in both cases(I've also tried camel case like ctlineHeight). Also if it helps it fails locally when i do `yarn lint:es` as well on circleCI – Fatah Jun 19 '18 at 18:44
  • So this: `{"line-height":'40px', "background-color": 'red'}` still gives you lint errors?, and it works ok when you completely remove the style attribute? – Cody Ｇ Jun 19 '18 at 18:57
  • It has to be `style={"line-height":'40px', "background-color": 'red'}` works and css is applied. Actually the problem is having more than one style inside that object, `{"background-color": 'red'} -> css works &no lint errors. `{backgroundColor: 'red'}` -> works & no lint errors. Docs describe this https://pugjs.org/language/attributes.html – Fatah Jun 20 '18 at 06:50
  • This the linter I am using https://github.com/ezhlobo/eslint-plugin-react-pug – Fatah Jun 20 '18 at 07:00
  • why not use `style="line-height: 40px; background-color: red;"`? – Sean Jun 20 '18 at 15:55

1 Answers1

1

Here's the way to do it:

 .CoolAid(style="{line-height:'40px', background-color: 'red'}")= childrenArray[0]

This will produce the following tag:

<div class="CoolAid" style="{line-height:'40px', background-color: 'red'}">
  {{childrenArray[0]}}
</div>
Graham
  • 7,431
  • 18
  • 59
  • 84