Additional testing and support for ConcatStatements

lib/htmlbars-plugin/index.js

@@ -89,25 +89,15 @@ ClassTransformPlugin.prototype.transformElementNode = function(node) {
 };
 
 ClassTransformPlugin.prototype.localToPath = function(node) {
-  if (!~['StringLiteral', 'TextNode', 'SubExpression', 'MustacheStatement'].indexOf(node.type)) {
-    throw new TypeError('ember-css-modules - invalid type, ' + node.type + ', passed to local-class attribute.');
-  }
-
   if (~['SubExpression', 'MustacheStatement'].indexOf(node.type)) {
     return this.dynamicLocalPath(node);
+  } else if (node.type === 'ConcatStatement') {
+    return this.concatLocalPath(node);
+  } else if (~['TextNode', 'StringLiteral'].indexOf(node.type)) {
+    return this.staticLocalPath(node);
+  } else {
+    throw new TypeError('ember-css-modules - invalid type, ' + node.type + ', passed to local-class attribute.');
   }
-
-  var locals = typeof node.chars === 'string' ? node.chars : node.value;
-  var builder = typeof node.chars === 'string' ? 'mustache' : 'sexpr';
-  var classes = locals.split(' ');
-
-  return classes.filter(function(local) {
-    return local.trim().length > 0;
-  }).map(function(local) {
-    var unboundPath = this.builders.path('unbound');
-    var stylePath = this.builders.path('styles.' + local.trim());
-    return this.builders[builder](unboundPath, [stylePath]);
-  }, this);
 };
 
 ClassTransformPlugin.prototype.dynamicLocalPath = function(node) {
@@ -128,7 +118,35 @@ ClassTransformPlugin.prototype.dynamicLocalPath = function(node) {
   var lookupModuleStyles = this.builders[builder](lookupModuleStylesPath, [unbound, node]);
 
   return [lookupModuleStyles];
-}
+};
+
+ClassTransformPlugin.prototype.concatLocalPath = function(node) {
+  var concatPath = this.builders.path('concat');
+  var concatParts = node.parts.map(function(part) {
+    if (part.type === 'MustacheStatement') {
+      return this.builders.sexpr(part.path, part.params, part.hash);
+    } else {
+      return part;
+    }
+  }, this);
+
+  var concatStatement = this.builders.mustache(concatPath, concatParts);
+  return this.dynamicLocalPath(concatStatement);
+};
+
+ClassTransformPlugin.prototype.staticLocalPath = function(node) {
+  var locals = typeof node.chars === 'string' ? node.chars : node.value;
+  var builder = typeof node.chars === 'string' ? 'mustache' : 'sexpr';
+  var classes = locals.split(' ');
+
+  return classes.filter(function(local) {
+    return local.trim().length > 0;
+  }).map(function(local) {
+    var unboundPath = this.builders.path('unbound');
+    var stylePath = this.builders.path('styles.' + local.trim());
+    return this.builders[builder](unboundPath, [stylePath]);
+  }, this);
+};
 
 ClassTransformPlugin.prototype.divide = function(parts) {
   for (var i=0;i<parts.length;i++) {

tests-node/htmlbars-plugin-test.js

@@ -38,47 +38,40 @@ testTransformation('appending to an unquoted class attribute with multiple class
   elementOutput: 'class="x {{unbound styles.foo}} {{unbound styles.bar}}"'
 });
 
-testTransformationElement('creating a class attribute with dynamic value on element', {
-  input: 'local-class={{if true foo}}',
+testTransformation('creating a class attribute with dynamic local-class value', {
+  statementInput: 'local-class=(if true foo)',
+  statementOutput: 'class=(concat (lookup-module-styles (unbound styles) (if true foo)))',
+  elementInput: 'local-class={{if true foo}}',
   elementOutput: 'class="{{lookup-module-styles (unbound styles) (if true foo)}}"'
 });
 
-testTransformationStatement('creating a class attribute with dynamic value on statement', {
-  input: 'local-class=(if true foo)',
-  statementOutput: 'class=(concat (lookup-module-styles (unbound styles) (if true foo)))',
+testTransformation('creating a class attribute with mixed local-class value', {
+  statementInput: 'local-class=(concat "foo " (if true bar))',
+  statementOutput: 'class=(concat (lookup-module-styles (unbound styles) (concat "foo " (if true bar))))',
+  elementInput: 'local-class="foo {{if true bar}}"',
+  elementOutput: 'class="{{lookup-module-styles (unbound styles) (concat "foo " (if true bar))}}"'
 });
 
-testTransformationElement('appending a class attribute with dynamic value on element', {
-  input: 'class="x" local-class={{if true foo}}',
+testTransformation('appending a class attribute with dynamic local-class value', {
+  statementInput: 'class="x" local-class=(if true foo)',
+  statementOutput: 'class=(concat "x" " " (lookup-module-styles (unbound styles) (if true foo)))',
+  elementInput: 'class="x" local-class={{if true foo}}',
   elementOutput: 'class="x {{lookup-module-styles (unbound styles) (if true foo)}}"'
 });
 
-testTransformationStatement('appending a class attribute with dynamic value on statement', {
-  input: 'class="x" local-class=(if true foo)',
-  statementOutput: 'class=(concat "x" " " (lookup-module-styles (unbound styles) (if true foo)))'
+testTransformation('appending a class attribute with mixed local-class value', {
+  statementInput: 'class="qux" local-class=(concat "foo " (if true bar))',
+  statementOutput: 'class=(concat "qux" " " (lookup-module-styles (unbound styles) (concat "foo " (if true bar))))',
+  elementInput: 'class="qux" local-class="foo {{if true bar}}"',
+  elementOutput: 'class="qux {{lookup-module-styles (unbound styles) (concat "foo " (if true bar))}}"'
 });
 
 function testTransformation(title, options) {
   test('ClassTransformPlugin: ' + title, function(assert) {
     assert.plan(3);
-    assertTransforms('<div [ATTRS]></div>', 'ElementNode', options.input, options.elementOutput, assert);
-    assertTransforms('{{x-div [ATTRS]}}', 'MustacheStatement', options.input, options.statementOutput, assert);
-    assertTransforms('{{#x-div [ATTRS]}}content{{/x-div}}', 'BlockStatement', options.input, options.statementOutput, assert);
-  });
-}
-
-function testTransformationElement(title, options) {
-  test('ClassTransformPlugin: ' + title, function(assert) {
-    assert.plan(1);
-    assertTransforms('<div [ATTRS]></div>', 'ElementNode', options.input, options.elementOutput, assert);
-  });
-}
-
-function testTransformationStatement(title, options) {
-  test('ClassTransformPlugin: ' + title, function(assert) {
-    assert.plan(2);
-    assertTransforms('{{x-div [ATTRS]}}', 'MustacheStatement', options.input, options.statementOutput, assert);
-    assertTransforms('{{#x-div [ATTRS]}}content{{/x-div}}', 'BlockStatement', options.input, options.statementOutput, assert);
+    assertTransforms('<div [ATTRS]></div>', 'ElementNode', options.elementInput || options.input, options.elementOutput, assert);
+    assertTransforms('{{x-div [ATTRS]}}', 'MustacheStatement', options.statementInput || options.input, options.statementOutput, assert);
+    assertTransforms('{{#x-div [ATTRS]}}content{{/x-div}}', 'BlockStatement', options.statementInput || options.input, options.statementOutput, assert);
   });
 }
 

tests/acceptance/styles-lookup-test.js

@@ -13,6 +13,8 @@ var componentRoutes = [
   'addon-component',
   'pod-route/nested-pod-component',
   'pod-route/nested-pod-template-only-component',
+  'component-with-dynamic-local-class',
+  'component-with-global-class-and-dynamic-local-class',
   'component-with-explicit-styles-reference',
   'component-with-global-class-composition',
   'component-with-container-class',

tests/dummy/app/components/testing/component-with-dynamic-local-class/styles.css

@@ -0,0 +1,3 @@
+.class-one.class-two {
+  font-family: 'component-with-dynamic-local-class';
+}

tests/dummy/app/components/testing/component-with-dynamic-local-class/template.hbs

@@ -0,0 +1 @@
+<div local-class={{concat 'class-one' ' ' 'class-two'}} data-test-element>component with dynamic local class</div>

tests/dummy/app/components/testing/component-with-global-class-and-dynamic-local-class/styles.css

@@ -0,0 +1,3 @@
+.class-one.class-two:global(.some-global-class) {
+  font-family: 'component-with-global-class-and-dynamic-local-class';
+}

tests/dummy/app/components/testing/component-with-global-class-and-dynamic-local-class/template.hbs

@@ -0,0 +1 @@
+<div class="some-global-class" local-class={{concat 'class-one' ' ' 'class-two'}} data-test-element>component with dynamic local class</div>

tests/integration/components/changing-dynamic-class-test.js

@@ -0,0 +1,24 @@
+import { test, moduleForComponent } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('changing-dynamic-class', 'Integration | Changing local classes', {
+  integration: true
+});
+
+test('helpers work correctly', function(assert) {
+  this.set('extraClass', 'bar');
+  this.set('styles', {
+    foo: '--foo',
+    bar: '--bar',
+    baz: '--baz'
+  });
+
+  this.render(hbs`<div data-test-element class="global" local-class="foo {{extraClass}}"></div>`);
+  assert.equal(this.$('[data-test-element]').attr('class'), 'global --foo --bar');
+
+  Ember.run(() => this.set('extraClass', 'baz'));
+  assert.equal(this.$('[data-test-element]').attr('class'), 'global --foo --baz');
+
+  Ember.run(() => this.set('extraClass', 'qux'));
+  assert.equal(this.$('[data-test-element]').attr('class'), 'global --foo');
+});