Repository: rwjblue/ember-template-lint (js)

Issue:
Disallow inline 'style' attribute in html or hbs
Im most projects, we recommend that using css to style the dom elements. But some ones may prefer to write inline style rules, because it's just quick! I would be wonderful if we have a rule that totally disallow inline style rules.

``` css
<div class="navbar" style="margin-bottom: 10px; border: 0;">
...
</div>
```

And it would be even more wonderful if we can add inline directive comment to disable a rule for some rare reasons. I'm not sure if currently we support that.

``` hbs
{{!-- template-lint bare-strings:false --}}
```


Pull request:
lint inline styles rule and tests
resolves #97  

Patch:
diff --git a/README.md b/README.md
index 0dae5fd..875c2ed 100644
--- a/README.md
+++ b/README.md
@@ -397,6 +397,26 @@ The block form is a little longer but has advantages over the inline form:
 This rule is configured with one boolean value:
 
   * boolean -- `true` for enabled / `false` for disabled
+  
+#### inline-styles
+
+Inline styles are not the best practice because they are hard to maintain and usually make the overall size of the project bigger. This rule forbids the inline styles.
+
+Forbidden:
+
+```hbs
+<div style="width:900px"></div>
+```
+
+Allowed:
+
+```hbs
+<div class="wide-element"></div>
+```
+
+This rule is configured with one boolean value:
+
+  * boolean -- `true` for enabled rule that forbids the inline styles / `false` for disabled rule that allows them
 
 #### style-concatenation
 
diff --git a/lib/rules/index.js b/lib/rules/index.js
index 446c4bf..73f52b1 100644
--- a/lib/rules/index.js
+++ b/lib/rules/index.js
@@ -5,6 +5,7 @@ module.exports = {
   'block-indentation': require('./lint-block-indentation'),
   'html-comments': require('./lint-html-comments'),
   'img-alt-attributes': require('./lint-img-alt-attributes'),
+  'inline-styles': require('./lint-inline-styles'),
   'link-rel-noopener': require('./lint-link-rel-noopener'),
   'triple-curlies': require('./lint-triple-curlies'),
   'self-closing-void-elements': require('./lint-self-closing-void-elements'),
diff --git a/lib/rules/lint-inline-styles.js b/lib/rules/lint-inline-styles.js
new file mode 100644
index 0000000..06afda0
--- /dev/null
+++ b/lib/rules/lint-inline-styles.js
@@ -0,0 +1,41 @@
+'use strict';
+
+var AstNodeInfo = require('../helpers/ast-node-info');
+var buildPlugin = require('./base');
+
+/**
+ Disallow usage of elements with inline styles
+
+ Good:
+
+ ```
+ <div class="class-with-inline-block-rule"></div>
+ ```
+
+ Bad:
+
+ ```
+ <div style="display:inline-block"></div>
+ ```
+ */
+module.exports = function(addonContext) {
+  var Plugin = buildPlugin(addonContext, 'img-alt-attributes');
+
+  Plugin.prototype.visitors = function() {
+    return {
+      ElementNode: function(node) {
+        var style = AstNodeInfo.findAttribute(node, 'style');
+        if (style) {
+          this.log({
+            message: 'elements cannot have inline styles',
+            line: style.loc && style.loc.start.line,
+            column: style.loc && style.loc.start.column,
+            source: this.sourceForNode(style)
+          });
+        }
+      }
+    };
+  };
+
+  return Plugin;
+};


Test patch:
diff --git a/test/unit/rules/lint-inline-styles-test.js b/test/unit/rules/lint-inline-styles-test.js
new file mode 100644
index 0000000..6c72fe2
--- /dev/null
+++ b/test/unit/rules/lint-inline-styles-test.js
@@ -0,0 +1,39 @@
+'use strict';
+
+var generateRuleTests = require('../../helpers/rule-test-harness');
+
+function mapBadStyleExampleToTestRule(inlineStyle) {
+  return {
+    template: '<div ' + inlineStyle + '></div>',
+
+    result: {
+      rule: 'inline-styles',
+      message: 'elements cannot have inline styles',
+      moduleId: 'layout.hbs',
+      source: inlineStyle,
+      line: 1,
+      column: 5
+    }
+  };
+}
+
+generateRuleTests({
+  name: 'inline-styles',
+
+  config: true,
+
+  good: [
+    '<div></div>',
+    '<span></span>',
+    '<ul class="dummy"></ul>'
+  ],
+
+  bad: [
+    'style="width: 100px"',
+    'style={{foo}}',
+    'style="{{foo}} {{bar}}"',
+    'style',
+    'style=""',
+    'style="color:blue;margin-left:30px;"'
+  ].map(mapBadStyleExampleToTestRule)
+});