fix: Switches in the rewrite didn't work with inheritance.

Author: chriseppstein

packages/@css-blocks/core/src/Analyzer/ElementAnalysis.ts

@@ -997,11 +997,12 @@ function mapClasses(
   let resolvedStyles = style.resolveStyles();
   for (let resolvedStyle of resolvedStyles) {
     // TODO: update with a non empty set here
-    let classNames = resolvedStyle.cssClassesWithAliases(configuration, reservedClassNames);
-    classNames.forEach(cls => {
+    let classNames = [resolvedStyle.cssClass(configuration, reservedClassNames)];
+    classNames.push(...resolvedStyle.getStyleAliases());
+    for (let cls of classNames) {
       map.set(cls, resolvedStyle);
       classes.push(cls);
-    });
+    }
   }
   if (classes.length === 1) {
     return attrValues.constant(classes[0]);

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

@@ -241,8 +241,11 @@ function constructSwitch(builders: Builders, stateExpr: Switch<StringAST> & HasG
       }
     }
     else {
-      expr.push(builders.number(1));
-      expr.push(builders.number(unwrap(rewrite.indexOf(obj))));
+      let styles = obj.resolveStyles();
+      expr.push(builders.number(styles.size));
+      for (let s of styles) {
+        expr.push(builders.number(unwrap(rewrite.indexOf(s))));
+      }
     }
   }
   return expr;

packages/@css-blocks/glimmer/test/fixtures/styled-app/src/ui/components/with-dynamic-inherited-states/grandparent.css

@@ -0,0 +1,12 @@
+:scope[style=open] {
+  padding: 2em;
+}
+
+:scope[style=condensed] {
+  padding: 0.5em;
+}
+
+:scope[style=normal] {
+  padding: 1em;
+}
+

packages/@css-blocks/glimmer/test/fixtures/styled-app/src/ui/components/with-dynamic-inherited-states/parent.css

@@ -0,0 +1,13 @@
+@block grandparent from "./grandparent.css";
+
+:scope {
+  extends: grandparent;
+}
+
+:scope[style=open] {
+  margin: 1em;
+}
+
+:scope[style=normal] {
+  margin: 0.5em;
+}

packages/@css-blocks/glimmer/test/fixtures/styled-app/src/ui/components/with-dynamic-inherited-states/stylesheet.css

@@ -0,0 +1,13 @@
+@block parent from "./parent.css";
+
+:scope {
+  extends: parent;
+}
+
+:scope[style=open] {
+  line-height: 2em;
+}
+
+:scope[style=spacious] {
+  line-height: 3em;
+}

packages/@css-blocks/glimmer/test/fixtures/styled-app/src/ui/components/with-dynamic-inherited-states/template.hbs

@@ -0,0 +1,3 @@
+<div block:scope block:style={{@style}}>
+  Inheritance Test
+</div>

packages/@css-blocks/glimmer/test/template-rewrite-test.ts

@@ -82,6 +82,30 @@ describe("Template Rewriting", function() {
     );
   });
 
+  it("rewrites styles from dynamic inherited attributes", async function() {
+    let projectDir = fixture("styled-app");
+    let analyzer = new GlimmerAnalyzer(new BlockFactory({}), {}, moduleConfig);
+    let templatePath = fixture("styled-app/src/ui/components/with-dynamic-inherited-states/template.hbs");
+    let result = await pipeline(projectDir, analyzer, "with-dynamic-inherited-states", templatePath);
+
+    // TODO why is `f` class both static and dynamic?
+    assert.deepEqual(minify(print(result.ast)), minify(`
+    <div class="grandparent parent stylesheet {{-css-blocks-classnames 1 7 4 4 1 @style "open" 3 2 4 5 "condensed" 1 0 "normal" 2 1 3 "spacious" 1 6 "f" 0 "g" 1 "e" 2 "d" 3 "c" 4 "a" 5 "b" 6}}">
+      Inheritance Test
+    </div>
+    `));
+    assert.deepEqual(minify(result.css.toString()), minify(
+      ".a { line-height: 2em; } " + // block[style=open]
+      ".b { line-height: 3em; } " + // block[style=spacious]
+      ".c { margin: 1em; } " + // parent[style=open]
+      ".d { margin: 0.5em; } " + // parent[style=normal]
+      ".e { padding: 2em; } " + // grandparent[style=open]
+      ".f { padding: 0.5em; } " + // grandparent[style=condensed]
+      ".g { padding: 1em; }" // grandparent[style=normal]
+    ),
+    );
+  });
+
   it("rewrites styles from dynamic classes", async function() {
     let projectDir = fixture("styled-app");
     let analyzer = new GlimmerAnalyzer(new BlockFactory({}), {}, moduleConfig);