Extract rule: template-style-concatenation

README.md

@@ -244,6 +244,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-obsolete-elements](docs/rules/template-no-obsolete-elements.md)                                 | disallow obsolete HTML elements                                              |    |    |    |
 | [template-no-outlet-outside-routes](docs/rules/template-no-outlet-outside-routes.md)                         | disallow {{outlet}} outside of route templates                               |    |    |    |
 | [template-no-page-title-component](docs/rules/template-no-page-title-component.md)                           | disallow usage of ember-page-title component                                 |    |    |    |
+| [template-style-concatenation](docs/rules/template-style-concatenation.md)                                   | disallow string concatenation in inline styles                               |    |    |    |
 
 ### Components
 

docs/rules/template-style-concatenation.md

@@ -0,0 +1,78 @@
+# ember/template-style-concatenation
+
+<!-- end auto-generated rule header -->
+
+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:
+
+```gjs
+<template>
+  <div style="color: {{this.color}};">Content</div>
+</template>
+```
+
+```gjs
+<template>
+  <div style={{concat "width: " this.width "px;"}}>Content</div>
+</template>
+```
+
+Examples of **correct** code for this rule:
+
+```gjs
+<template>
+  <div style="color: red;">Content</div>
+</template>
+```
+
+```gjs
+<template>
+  <div style={{this.computedStyle}}>Content</div>
+</template>
+```
+
+```gjs
+<template>
+  <div style={{html-safe this.styleString}}>Content</div>
+</template>
+```
+
+## Migration
+
+In your component:
+
+```js
+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:
+
+```gjs
+<template>
+  <div style={{this.computedStyle}}>Content</div>
+</template>
+```
+
+## Related Rules
+
+- [no-inline-styles](template-no-inline-styles.md)
+
+## References
+
+- [eslint-plugin-ember template-style-concatenation](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/template-style-concatenation.md)
+- [Ember.js Guides - htmlSafe](https://guides.emberjs.com/release/templates/writing-helpers/#toc_marking-strings-as-html-safe)

lib/rules/template-style-concatenation.js

@@ -0,0 +1,55 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow string concatenation in inline styles',
+      category: 'Best Practices',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-style-concatenation.md',
+      templateMode: 'both',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      unexpected:
+        'Avoid string concatenation in style attributes. Use a computed property with htmlSafe instead.',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/style-concatenation.js',
+      docs: 'docs/rule/style-concatenation.md',
+      tests: 'test/unit/rules/style-concatenation-test.js',
+    },
+  },
+
+  create(context) {
+    return {
+      GlimmerElementNode(node) {
+        const styleAttr = node.attributes?.find((a) => a.name === 'style');
+
+        if (!styleAttr || !styleAttr.value) {
+          return;
+        }
+
+        // Check if style attribute uses concatenation
+        if (styleAttr.value.type === 'GlimmerConcatStatement') {
+          context.report({
+            node: styleAttr,
+            messageId: 'unexpected',
+          });
+        }
+
+        // Check for mustache containing concat helper
+        if (styleAttr.value.type === 'GlimmerMustacheStatement') {
+          const path = styleAttr.value.path;
+          if (path && path.type === 'GlimmerPathExpression' && path.original === 'concat') {
+            context.report({
+              node: styleAttr,
+              messageId: 'unexpected',
+            });
+          }
+        }
+      },
+    };
+  },
+};

tests/lib/rules/template-style-concatenation.js

@@ -0,0 +1,167 @@
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/template-style-concatenation');
+const RuleTester = require('eslint').RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('template-style-concatenation', rule, {
+  valid: [
+    `<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>`,
+
+    '<template><img></template>',
+    '<template><img style={{myStyle}}></template>',
+    '<template><img style={{background-image url}}></template>',
+    '<template><img style="background-image: url(/foo.png)"}}></template>',
+    '<template><img style={{html-safe (concat "background-image: url(" url ")")}}></template>',
+    '<template><img style={{html-safe (concat knownSafeStyle1 ";" knownSafeStyle2)}}></template>',
+  ],
+
+  invalid: [
+    {
+      code: `<template>
+        <div style="color: {{this.color}};">Content</div>
+      </template>`,
+      output: null,
+      errors: [
+        {
+          message:
+            'Avoid string concatenation in style attributes. Use a computed property with htmlSafe instead.',
+          type: 'GlimmerAttrNode',
+        },
+      ],
+    },
+    {
+      code: `<template>
+        <div style={{concat "width: " this.width "px;"}}>Content</div>
+      </template>`,
+      output: null,
+      errors: [
+        {
+          message:
+            'Avoid string concatenation in style attributes. Use a computed property with htmlSafe instead.',
+          type: 'GlimmerAttrNode',
+        },
+      ],
+    },
+
+    {
+      code: '<template><img style="{{myStyle}}"></template>',
+      output: null,
+      errors: [
+        {
+          message:
+            'Avoid string concatenation in style attributes. Use a computed property with htmlSafe instead.',
+        },
+      ],
+    },
+    {
+      code: '<template><img style="background-image: {{url}}"></template>',
+      output: null,
+      errors: [
+        {
+          message:
+            'Avoid string concatenation in style attributes. Use a computed property with htmlSafe instead.',
+        },
+      ],
+    },
+    {
+      code: '<template><img style="{{background-image url}}"></template>',
+      output: null,
+      errors: [
+        {
+          message:
+            'Avoid string concatenation in style attributes. Use a computed property with htmlSafe instead.',
+        },
+      ],
+    },
+    {
+      code: '<template><img style={{concat knownSafeStyle1 ";" knownSafeStyle2}}></template>',
+      output: null,
+      errors: [
+        {
+          message:
+            'Avoid string concatenation in style attributes. Use a computed property with htmlSafe instead.',
+        },
+      ],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+  },
+});
+
+hbsRuleTester.run('template-style-concatenation', rule, {
+  valid: [
+    '<img>',
+    '<img style={{myStyle}}>',
+    '<img style={{background-image url}}>',
+    '<img style="background-image: url(/foo.png)"}}>',
+    '<img style={{html-safe (concat "background-image: url(" url ")")}}>',
+    '<img style={{html-safe (concat knownSafeStyle1 ";" knownSafeStyle2)}}>',
+  ],
+  invalid: [
+    {
+      code: '<img style="{{myStyle}}">',
+      output: null,
+      errors: [
+        {
+          message:
+            'Avoid string concatenation in style attributes. Use a computed property with htmlSafe instead.',
+        },
+      ],
+    },
+    {
+      code: '<img style="background-image: {{url}}">',
+      output: null,
+      errors: [
+        {
+          message:
+            'Avoid string concatenation in style attributes. Use a computed property with htmlSafe instead.',
+        },
+      ],
+    },
+    {
+      code: '<img style="{{background-image url}}">',
+      output: null,
+      errors: [
+        {
+          message:
+            'Avoid string concatenation in style attributes. Use a computed property with htmlSafe instead.',
+        },
+      ],
+    },
+    {
+      code: '<img style={{concat knownSafeStyle1 ";" knownSafeStyle2}}>',
+      output: null,
+      errors: [
+        {
+          message:
+            'Avoid string concatenation in style attributes. Use a computed property with htmlSafe instead.',
+        },
+      ],
+    },
+  ],
+});