Merge pull request #117 from salsify/fix-splattributes

Fix #116

lib/htmlbars-plugin/index.js

@@ -127,7 +127,7 @@ module.exports = class ClassTransformPlugin {
 
     utils.pushAll(parts, this.localToPath(localClassAttr.value));
     this.divide(parts, this.isGlimmer ? 'text' : 'string');
-    node.attributes.push(this.builders.attr('class', this.builders.concat(parts)));
+    node.attributes.unshift(this.builders.attr('class', this.builders.concat(parts)));
   }
 
   localToPath(node) {

package.json

@@ -41,6 +41,7 @@
     "ember-cli-template-lint": "^1.0.0-beta.1",
     "ember-cli-test-loader": "^2.2.0",
     "ember-cli-uglify": "^2.1.0",
+    "ember-compatibility-helpers": "^1.0.2",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.0",
     "ember-load-initializers": "^1.1.0",

tests/dummy/app/components/component-with-splattributes/styles.css

@@ -0,0 +1 @@
+.local-inner {}

tests/dummy/app/components/component-with-splattributes/template.hbs

@@ -0,0 +1,10 @@
+{{! template-lint-disable }}
+{{! (seems like the alignment rule doesn't work right with splattributes) }}
+
+<div
+  class="global-inner"
+  local-class="local-inner"
+  data-test-element
+  ...attributes
+>
+</div>

tests/integration/splattributes-test.js

@@ -0,0 +1,24 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import setupStyles from '../helpers/render-with-styles';
+import { gte } from 'ember-compatibility-helpers';
+import styles from 'dummy/components/component-with-splattributes/styles';
+
+if (gte('3.4.0')) {
+  module('Integration | Components with splattributes', function(hooks) {
+    setupRenderingTest(hooks);
+
+    test('inner and outer local and global classes are all present', async function(assert) {
+      const hbs = setupStyles({
+        'local-outer': '--local-outer'
+      });
+
+      await render(hbs`<ComponentWithSplattributes local-class="local-outer" class="global-outer" />`);
+      assert.dom('[data-test-element]').hasClass('global-outer');
+      assert.dom('[data-test-element]').hasClass('--local-outer');
+      assert.dom('[data-test-element]').hasClass('global-inner');
+      assert.dom('[data-test-element]').hasClass(styles['local-inner']);
+    });
+  });
+}