fix: Fix bugs introduced by per-block namespaces.

packages/@css-blocks/broccoli/test/Analyze.ts

@@ -28,7 +28,7 @@ describe("Broccoli Analyze Plugin Test", function () {
           ui: {
             components: {
               [entryComponentName]: {
-                "template.hbs": `<div><h1 class="foo">Welcome to Glimmer!</h1></div>`,
+                "template.hbs": `<div><h1 block:class="foo">Welcome to Glimmer!</h1></div>`,
                 "stylesheet.css": `:scope { color: red; } .foo { color: green; }`,
               },
             },

packages/@css-blocks/ember-cli/tests/dummy/app/templates/application.hbs

@@ -1,36 +1,36 @@
 <main>
-  <h2 class="title">CSS Blocks + Ember Integration Tests</h2>
+  <h2 block:class="title">CSS Blocks + Ember Integration Tests</h2>
 
-  <nav class="test-nav">
+  <nav block:class="test-nav">
     <ul>
       <li>
-        {{#link-to "global-styles" class="test-nav-item"}}Global Styles{{/link-to}}
+        {{#link-to "global-styles" block:class="test-nav-item"}}Global Styles{{/link-to}}
       </li>
       <li>
-        {{#link-to "ember-builtins" class="test-nav-item"}}Ember Builtins{{/link-to}}
+        {{#link-to "ember-builtins" block:class="test-nav-item"}}Ember Builtins{{/link-to}}
       </li>
       <li>
-        {{#link-to "route-block" class="test-nav-item"}}Route Block{{/link-to}}
+        {{#link-to "route-block" block:class="test-nav-item"}}Route Block{{/link-to}}
       </li>
       <li>
-        {{#link-to "app-component" class="test-nav-item"}}App Component Block{{/link-to}}
+        {{#link-to "app-component" block:class="test-nav-item"}}App Component Block{{/link-to}}
       </li>
       <li>
-        {{#link-to "addon-component" class="test-nav-item"}}Addon Component Block{{/link-to}}
+        {{#link-to "addon-component" block:class="test-nav-item"}}Addon Component Block{{/link-to}}
       </li>
       <li>
-        {{#link-to "in-repo-engine" class="test-nav-item"}}In Repo Engine{{/link-to}}
+        {{#link-to "in-repo-engine" block:class="test-nav-item"}}In Repo Engine{{/link-to}}
       </li>
       <li>
-        {{#link-to "in-repo-lazy-engine" class="test-nav-item"}}In Repo Lazy Engine{{/link-to}}
+        {{#link-to "in-repo-lazy-engine" block:class="test-nav-item"}}In Repo Lazy Engine{{/link-to}}
       </li>
       <li>
-        {{#link-to "compositions" class="test-nav-item"}}Compositions{{/link-to}}
+        {{#link-to "compositions" block:class="test-nav-item"}}Compositions{{/link-to}}
       </li>
     </ul>
   </nav>
 
-  <div id="test-container" class="test-container">
+  <div id="test-container" block:class="test-container">
     {{outlet}}
   </div>
 </main>

packages/@css-blocks/ember-cli/tests/dummy/app/templates/components/app-component.hbs

@@ -1,6 +1,6 @@
-<div state:enabled={{enabled}} id="scope">
+<div block:enabled={{enabled}} id="scope">
   App Component Scope Styles State: {{enabled}}
-  <div class="sub-class" id="sub-class" state:enabled={{enabled}}>
+  <div block:class="sub-class" id="sub-class" block:enabled={{enabled}}>
     App Component Sub-class Styles State: {{enabled}}
   </div>
   <button {{action "toggleEnabled"}} id="toggle-enabled">Toggle Enabled States</button>

packages/@css-blocks/ember-cli/tests/dummy/app/templates/compositions.hbs

@@ -1,33 +1,33 @@
 <section>
-  <p id="red-static" class="red">I'm red from a static class composition and bold from an inherited composition.</p>
-  <p id="green-static" class="green">I'm green from a static class composition.</p>
+  <p id="red-static" block:class="red">I'm red from a static class composition and bold from an inherited composition.</p>
+  <p id="green-static" block:class="green">I'm green from a static class composition.</p>
 
-  <p id="red-green-dynamic" class={{style-if enabled "green" "red"}}>I'm {{if enabled "green" "red"}} from a dynamic class composition.</p>
+  <p id="red-green-dynamic" block:class={{style-if enabled "green" "red"}}>I'm {{if enabled "green" "red"}} from a dynamic class composition.</p>
 
-  <p id="pink-static" class="pink">I'm pink from a static attribute composition and italic from the composition's parent class.</p>
-  <p id="purple-static" class="purple">I'm purple from a static attribute composition and italic from the composition's parent class.</p>
+  <p id="pink-static" block:class="pink">I'm pink from a static attribute composition and italic from the composition's parent class.</p>
+  <p id="purple-static" block:class="purple">I'm purple from a static attribute composition and italic from the composition's parent class.</p>
 
-  <p id="pink-purple-dynamic" class={{style-if enabled "pink" "purple"}}>I'm {{if enabled "pink" "purple"}} from a dynamic attribute composition and italic from the composition's parent class.</p>
+  <p id="pink-purple-dynamic" block:class={{style-if enabled "pink" "purple"}}>I'm {{if enabled "pink" "purple"}} from a dynamic attribute composition and italic from the composition's parent class.</p>
 
-  <p id="blue-static" class="blue">I'm not blue from an attribute composition with boolean attribute condition.</p>
-  <p id="blue-active" class="blue" state:active>I'm blue from an attribute composition with boolean attribute condition.</p>
-  <p id="blue-dynamic" class="blue" state:active={{enabled}} >I'm toggled blue from an state composition with boolean attribute condition.</p>
+  <p id="blue-static" block:class="blue">I'm not blue from an attribute composition with boolean attribute condition.</p>
+  <p id="blue-active" block:class="blue" block:active>I'm blue from an attribute composition with boolean attribute condition.</p>
+  <p id="blue-dynamic" block:class="blue" block:active={{enabled}} >I'm toggled blue from an state composition with boolean attribute condition.</p>
 
-  <p id="orange-static" class="orange">I'm not orange from a class composition with boolean attribute condition.</p>
-  <p id="orange-active" class="orange" state:active>I'm orange from a class composition with boolean attribute condition.</p>
-  <p id="orange-dynamic" class="orange" state:active={{enabled}} >I'm toggled orange from a class with boolean attribute condition.</p>
+  <p id="orange-static" block:class="orange">I'm not orange from a class composition with boolean attribute condition.</p>
+  <p id="orange-active" block:class="orange" block:active>I'm orange from a class composition with boolean attribute condition.</p>
+  <p id="orange-dynamic" block:class="orange" block:active={{enabled}} >I'm toggled orange from a class with boolean attribute condition.</p>
 
-  <p id="yellow-static" class="yellow" state:color="none">I'm not yellow from a class composition with a switch class condition.</p>
-  <p id="yellow-active" class="yellow" state:color="yellow">I'm yellow from a class composition with a switch class condition.</p>
-  <p id="yellow-dynamic" class="yellow" state:color={{color}}>I'm toggled {{color}} from a class composition with a switch class condition.</p>
+  <p id="yellow-static" block:class="yellow" block:color="none">I'm not yellow from a class composition with a switch class condition.</p>
+  <p id="yellow-active" block:class="yellow" block:color="yellow">I'm yellow from a class composition with a switch class condition.</p>
+  <p id="yellow-dynamic" block:class="yellow" block:color={{color}}>I'm toggled {{color}} from a class composition with a switch class condition.</p>
 
-  <p id="brown-static" class="brown" state:color="none">I'm not brown from an attribute composition with a switch attribute condition.</p>
-  <p id="brown-active" class="brown" state:color="yellow">I'm brown from an attribute composition with a switch attribute condition.</p>
-  <p id="brown-dynamic" class="brown" state:color={{color}}>I'm toggled brown from an state composition with a switch attribute condition.</p>
+  <p id="brown-static" block:class="brown" block:color="none">I'm not brown from an attribute composition with a switch attribute condition.</p>
+  <p id="brown-active" block:class="brown" block:color="yellow">I'm brown from an attribute composition with a switch attribute condition.</p>
+  <p id="brown-dynamic" block:class="brown" block:color={{color}}>I'm toggled brown from an state composition with a switch attribute condition.</p>
 
-  <p id="yellow-brown-dynamic" class={{style-if enabled "yellow" "brown"}} state:color={{color}}>I'm toggled {{if enabled "yellow" "brown"}} or unset from a dynamic {{if enabled "attribute" "class"}} composition.</p>
+  <p id="yellow-brown-dynamic" block:class={{style-if enabled "yellow" "brown"}} block:color={{color}}>I'm toggled {{if enabled "yellow" "brown"}} or unset from a dynamic {{if enabled "attribute" "class"}} composition.</p>
 
-  <p id="green-bold" class="green-bold">I'm green and bold from multiple class compositions.</p>
+  <p id="green-bold" block:class="green-bold">I'm green and bold from multiple class compositions.</p>
 
   <button {{action "toggleEnabled"}} id="toggle-enabled">Toggle Enabled States</button>
   <button {{action "toggleColor"}} id="toggle-color">Toggle Color States</button>

packages/@css-blocks/ember-cli/tests/dummy/app/templates/ember-builtins.hbs

@@ -1,4 +1,4 @@
 <div>
-  {{#link-to "index" class="link-to-helper" id="link-to-helper"}}Inactive Link To Helper{{/link-to}}
-  {{#link-to "ember-builtins" class="link-to-helper" id="link-to-helper-active"}}Active Link To Helper{{/link-to}}
+  {{#link-to "index" block:class="link-to-helper" id="link-to-helper"}}Inactive Link To Helper{{/link-to}}
+  {{#link-to "ember-builtins" block:class="link-to-helper" id="link-to-helper-active"}}Active Link To Helper{{/link-to}}
 </div>

packages/@css-blocks/ember-cli/tests/dummy/app/templates/route-block.hbs

@@ -1,6 +1,6 @@
-<div state:enabled={{enabled}} id="scope">
+<div block:enabled={{enabled}} id="scope">
   Route Scope Styles State: {{enabled}}
-  <div class="sub-class" id="sub-class" state:enabled={{enabled}}>
+  <div block:class="sub-class" id="sub-class" block:enabled={{enabled}}>
     Route Sub-class Styles State: {{enabled}}
   </div>
   <button {{action "toggleEnabled"}} id="toggle-enabled">Toggle Enabled States</button>

packages/@css-blocks/ember-cli/tests/dummy/lib/in-repo-addon/addon/templates/components/addon-component.hbs

@@ -1,6 +1,6 @@
-<div state:enabled={{enabled}} id="addon-component-scope">
+<div block:enabled={{enabled}} id="addon-component-scope">
   Addon Component Scope Styles State: {{enabled}}
-  <div class="sub-class" id="addon-component-sub-class" state:enabled={{enabled}}>
+  <div block:class="sub-class" id="addon-component-sub-class" block:enabled={{enabled}}>
     Addon Component Sub-class Styles State: {{enabled}}
   </div>
   <button {{action "toggleEnabled"}} id="toggle-enabled">Toggle Enabled States</button>

packages/@css-blocks/glimmer/src/ElementAnalyzer.ts

@@ -130,6 +130,9 @@ export class ElementAnalyzer {
     }
     else {
       for (let pair of node.hash.pairs) {
+        if (pair.key === "class") {
+          throw cssBlockError(`The class attribute is forbidden. Did you mean block:class?`, node, this.template);
+        }
         let [namespace, attrName] = this.isAttributeAnalyzed(pair.key);
         if (namespace && attrName) {
           if (attrName === "class") {
@@ -167,15 +170,20 @@ export class ElementAnalyzer {
       const attrToState = getEmberBuiltInStates(node.path.original);
       for (let attrName of Object.keys(attrToState)) {
         const stateName = attrToState[attrName];
-        element = this.newElement(node, forRewrite);
+        let element: ElementAnalysis<BooleanExpression, StringExpression, TernaryExpression> | undefined;
         for (let style of klasses) {
           let attr = style.resolveAttribute(stateName);
           if (!attr || !attr.presenceRule) { continue; }
+          if (!element) {
+            element = this.newElement(node, forRewrite);
+          }
           attrRewrites[attrName] = element; // Only save this element on output if a state is found.
           if (!forRewrite) { element.addStaticClass(style); } // In rewrite mode we only want the states.
           element.addStaticAttr(style, attr.presenceRule);
         }
-        this.finishElement(element, forRewrite);
+        if (element) {
+          this.finishElement(element, forRewrite);
+        }
       }
     }