fix: Dynamic scope attributes were not being analyzed or rewritten.

Closes #371.
Closes #373.

Author: chriseppstein

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

@@ -41,6 +41,7 @@ import {
   TernaryExpression as TernaryAST,
 } from "./ElementAnalyzer";
 import { CLASSNAMES_HELPER_NAME, CONCAT_HELPER_NAME } from "./helpers";
+import { isMustacheStatement } from "./utils";
 
 const enum SourceExpression {
   ternary,
@@ -140,7 +141,11 @@ function constructSourceArgs(builders: Builders, rewrite: IndexedClassRewrite<an
 function constructTernary(builders: Builders, classes: DynamicClasses<TernaryAST>, rewrite: IndexedClassRewrite<Style>): AST.Expression[] {
   let expr = new Array<AST.Expression>();
   // The boolean expression
-  expr.push(classes.condition!);
+  if (isMustacheStatement(classes.condition!)) {
+    expr.push(moustacheToExpression(builders, classes.condition));
+  } else {
+    expr.push(classes.condition!);
+  }
   // The true styles
   if (isTrueCondition(classes)) {
     let trueClasses = resolveInheritance(classes.whenTrue, rewrite);

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

@@ -14,11 +14,20 @@ import * as debugGenerator from "debug";
 import { GlimmerAnalysis } from "./Analyzer";
 import { getEmberBuiltInStates, isEmberBuiltIn } from "./EmberBuiltins";
 import { ResolvedFile } from "./Template";
-import { cssBlockError } from "./utils";
+import {
+  cssBlockError,
+  isBooleanLiteral,
+  isConcatStatement,
+  isElementNode,
+  isMustacheStatement,
+  isStringLiteral,
+  isSubExpression,
+  isTextNode,
+} from "./utils";
 
 // Expressions may be null when ElementAnalyzer is used in the second pass analysis
 // to re-acquire analysis data for rewrites without storing AST nodes.
-export type TernaryExpression = AST.Expression | null;
+export type TernaryExpression = AST.Expression | AST.MustacheStatement | null;
 export type StringExpression = AST.MustacheStatement | AST.ConcatStatement | null;
 export type BooleanExpression = AST.Expression | AST.MustacheStatement;
 export type TemplateElement  = ElementAnalysis<BooleanExpression, StringExpression, TernaryExpression>;
@@ -309,6 +318,14 @@ export class ElementAnalyzer {
       if (value.value) {
         element.addStaticClass(block.rootClass);
       }
+    } else if (isMustacheStatement(value) || isSubExpression(value)) {
+      // We don't have a way to represent a simple boolean conditional for classes like we do for states.
+      // The rewrite might be slightly simpler if we add that.
+      element.addDynamicClasses({
+        condition: value,
+        whenTrue: [block.rootClass],
+        whenFalse: [],
+      });
     }
   }
 
@@ -393,28 +410,6 @@ export class ElementAnalyzer {
   }
 }
 
-function isStringLiteral(value: AST.Node | undefined): value is AST.StringLiteral {
-  return value !== undefined && value.type === "StringLiteral";
-}
-function isConcatStatement(value: AST.Node | undefined): value is AST.ConcatStatement {
-  return !!value && value.type === "ConcatStatement";
-}
-function isTextNode(value: AST.Node | undefined): value is AST.TextNode {
-  return !!value && value.type === "TextNode";
-}
-function isBooleanLiteral(value: AST.Node | undefined): value is AST.BooleanLiteral {
-  return !!value && value.type === "BooleanLiteral";
-}
-function isMustacheStatement(value: AST.Node | undefined): value is AST.MustacheStatement {
-  return !!value && value.type === "MustacheStatement";
-}
-function isSubExpression(value: AST.Node | undefined): value is AST.SubExpression {
-  return !!value && value.type === "SubExpression";
-}
-function isElementNode(value: AST.Node | undefined): value is AST.ElementNode {
-  return !!value && value.type === "ElementNode";
-}
-
 function isStyleIfHelper(node: AST.MustacheStatement | AST.SubExpression): "style-if" | "style-unless" | undefined {
   if (node.path.type !== "PathExpression") { return undefined; }
   let parts: string[] = (node.path).parts;

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

@@ -35,3 +35,25 @@ export function cssBlockError(message: string, node: AST.Node, template: Templat
     end: node.loc.end,
   });
 }
+
+export function isStringLiteral(value: AST.Node | undefined): value is AST.StringLiteral {
+  return value !== undefined && value.type === "StringLiteral";
+}
+export function isConcatStatement(value: AST.Node | undefined): value is AST.ConcatStatement {
+  return !!value && value.type === "ConcatStatement";
+}
+export function isTextNode(value: AST.Node | undefined): value is AST.TextNode {
+  return !!value && value.type === "TextNode";
+}
+export function isBooleanLiteral(value: AST.Node | undefined): value is AST.BooleanLiteral {
+  return !!value && value.type === "BooleanLiteral";
+}
+export function isMustacheStatement(value: AST.Node | undefined): value is AST.MustacheStatement {
+  return !!value && value.type === "MustacheStatement";
+}
+export function isSubExpression(value: AST.Node | undefined): value is AST.SubExpression {
+  return !!value && value.type === "SubExpression";
+}
+export function isElementNode(value: AST.Node | undefined): value is AST.ElementNode {
+  return !!value && value.type === "ElementNode";
+}

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

@@ -3,4 +3,5 @@
   <div block:class={{style-if isWorld 'world' 'planet'}}>World</div>
   <div block:class={{style-unless isWorld 'world' 'planet'}}>World</div>
   <div block:class={{style-unless isWorld 'world'}}>World</div>
+  <h2 h:scope={{isWorld}}>Dynamic Scope</h2>
 </div>

packages/@css-blocks/glimmer/test/stylesheet-analysis-test.ts

@@ -775,6 +775,13 @@ describe("Stylesheet analysis", function () {
           dynamicAttributes: [],
           sourceLocation: { start: { line: 5, column: 2, "filename": "template:/styled-app/components/with-dynamic-classes" }, end: { line: 5, column: 2, "filename": "template:/styled-app/components/with-dynamic-classes" } },
         },
+        g: {
+          tagName: "h2",
+          staticStyles: [],
+          dynamicClasses: [{ condition: true, whenTrue: [7] }],
+          dynamicAttributes: [],
+          sourceLocation: { start: { line: 6, column: 2, "filename": "template:/styled-app/components/with-dynamic-classes" }, end: { line: 6, column: 2, "filename": "template:/styled-app/components/with-dynamic-classes" } },
+        },
       });
     }).catch((error) => {
       console.error(error);

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

@@ -93,6 +93,7 @@ describe("Template Rewriting", function() {
         <div class={{-css-blocks-classnames 1 2 0 isWorld 1 1 1 0 "d" 0 "b" 1}}>World</div>
         <div class={{-css-blocks-classnames 1 2 0 isWorld 1 0 1 1 "d" 0 "b" 1}}>World</div>
         <div class={{-css-blocks-classnames 1 1 0 isWorld 0 1 0 "b" 0}}>World</div>
+        <h2 class={{-css-blocks-classnames 1 1 0 isWorld 1 0 0 "e" 0}}>Dynamic Scope</h2>
       </div>
     `));
   });