ember/template-style-concatenation

April 20, 2026 · View on GitHub

💼 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.

Rule Details

This rule disallows string concatenation in style attributes.

Examples

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>

Migration

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>

References