Merge pull request #14293 from Serabe/fix/11395

[BUGFIX beta] Remove style warning when the binding is quoted

packages/ember-glimmer/tests/integration/content-test.js

@@ -1281,5 +1281,45 @@ if (!EmberDev.runningProdBuild) {
 
       this.assertNoWarning();
     }
+
+    ['@test no warnings are triggered when a safe string is quoted'](assert) {
+      this.render('<div style="{{userValue}}"></div>', {
+        userValue: new SafeString('width: 42px')
+      });
+
+      this.assertNoWarning();
+    }
+
+    ['@test binding warning is triggered when an unsafe string is quoted'](assert) {
+      this.render('<div style="{{userValue}}"></div>', {
+        userValue: 'width: 42px'
+      });
+
+      this.assertStyleWarning();
+    }
+
+    ['@test binding warning is triggered when a safe string for a complete property is concatenated in place'](assert) {
+      this.render('<div style="color: green; {{userValue}}"></div>', {
+        userValue: new SafeString('width: 42px')
+      });
+
+      this.assertStyleWarning();
+    }
+
+    ['@test binding warning is triggered when a safe string for a value is concatenated in place'](assert) {
+      this.render('<div style="color: green; width: {{userValue}}"></div>', {
+        userValue: new SafeString('42px')
+      });
+
+      this.assertStyleWarning();
+    }
+
+    ['@test binding warning is triggered when a safe string for a property name is concatenated in place'](assert) {
+      this.render('<div style="color: green; {{userProperty}}: 42px"></div>', {
+        userProperty: new SafeString('width')
+      });
+
+      this.assertStyleWarning();
+    }
   });
 }

packages/ember-template-compiler/lib/plugins/index.js

@@ -5,6 +5,7 @@ import TransformInputOnToOnEvent from './transform-input-on-to-onEvent';
 import TransformTopLevelComponents from './transform-top-level-components';
 import TransformInlineLinkTo from './transform-inline-link-to';
 import TransformOldClassBindingSyntax from './transform-old-class-binding-syntax';
+import TransformQuotedBindingsIntoJustBindings from './transform-quoted-bindings-into-just-bindings';
 import DeprecateRenderModel from './deprecate-render-model';
 import AssertReservedNamedArguments from './assert-reserved-named-arguments';
 import TransformActionSyntax from './transform-action-syntax';
@@ -21,6 +22,7 @@ export default Object.freeze([
   TransformTopLevelComponents,
   TransformInlineLinkTo,
   TransformOldClassBindingSyntax,
+  TransformQuotedBindingsIntoJustBindings,
   DeprecateRenderModel,
   AssertReservedNamedArguments,
   TransformActionSyntax,

packages/ember-template-compiler/lib/plugins/transform-quoted-bindings-into-just-bindings.js

@@ -0,0 +1,53 @@
+export default function TransformQuotedBindingsIntoJustBindings() {
+  // set later within HTMLBars to the syntax package
+  this.syntax = null;
+}
+
+/**
+  @private
+  @method transform
+  @param {AST} ast The AST to be transformed.
+*/
+TransformQuotedBindingsIntoJustBindings.prototype.transform = function TransformQuotedBindingsIntoJustBindings_transform(ast) {
+  let walker = new this.syntax.Walker();
+
+  walker.visit(ast, node => {
+    if (!validate(node)) { return; }
+
+    let styleAttr = getStyleAttr(node);
+
+    if (!validStyleAttr(styleAttr)) { return; }
+
+    styleAttr.value = styleAttr.value.parts[0];
+  });
+
+  return ast;
+};
+
+function validate(node) {
+  return node.type === 'ElementNode';
+}
+
+function validStyleAttr(attr) {
+  if (!attr) { return false; }
+
+  let value = attr.value;
+
+  if (!value ||
+      value.type !== 'ConcatStatement' ||
+      value.parts.length !== 1) { return false; }
+
+  let onlyPart = value.parts[0];
+
+  return onlyPart.type === 'MustacheStatement';
+}
+
+function getStyleAttr(node) {
+  let attributes = node.attributes;
+
+  for (let i = 0; i < attributes.length; i++) {
+    if (attributes[i].name === 'style') {
+      return attributes[i];
+    }
+  }
+}