💼 This rule is enabled in the 📋 template-lint-migration config.
Disallows string concatenation in inline styles.
String concatenation in style attributes can be error-prone and hard to maintain. Use the {{html-safe}} helper or a computed property instead.
This rule disallows string concatenation in style attributes.
Examples of incorrect code for this rule:
<template>
<div style="color: {{this.color}};">Content</div>
</template><template>
<div style={{concat "width: " this.width "px;"}}>Content</div>
</template>Examples of correct code for this rule:
<template>
<div style="color: red;">Content</div>
</template><template>
<div style={{this.computedStyle}}>Content</div>
</template><template>
<div style={{html-safe this.styleString}}>Content</div>
</template>In your component:
import { htmlSafe } from '@ember/template';
export default class MyComponent extends Component {
get computedStyle() {
return htmlSafe(`width: ${this.width}px; color: ${this.color};`);
}
}Then in template:
<template>
<div style={{this.computedStyle}}>Content</div>
</template>