fix: Fixing tests.

Author: ramitha

packages/@css-blocks/core/src/TemplateRewriter/RewriteMapping.ts

@@ -24,7 +24,7 @@ export class IndexedClassMapping implements IndexedClassRewrite<Style> {
   private _inputMap: Map<Style, number>;
   constructor(inputs: Style[], staticClasses: string[], map: ClassExpressionMap) {
     this.inputs = inputs;
-    this.staticClasses = staticClasses;
+    this.staticClasses = staticClasses.sort();
     this._inputMap = new Map<Style, number>();
     inputs.forEach((i, n) => this._inputMap.set(i, n));
     this.map = map;

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

@@ -68,7 +68,7 @@ describe("Template Rewriting", function() {
     // TODO why is `f` class both static and dynamic?
     assert.deepEqual(minify(print(result.ast)), minify(`
     <div class="b">
-      <h1 class="e">Hello, <span class="f c {{-css-blocks-classnames 2 3 2 isThick 1 2 4 2 1 textStyle "bold" 1 0 "italic" 1 1 "g" 0 "f" 1 "d" 2}}">World</span>!</h1>
+      <h1 class="e">Hello, <span class="c f {{-css-blocks-classnames 2 3 2 isThick 1 2 4 2 1 textStyle "bold" 1 0 "italic" 1 1 "g" 0 "f" 1 "d" 2}}">World</span>!</h1>
     </div>
     `));
     assert.deepEqual(minify(result.css.toString()), minify(`
@@ -103,8 +103,8 @@ describe("Template Rewriting", function() {
     let templatePath = fixture("styled-app/src/ui/components/with-block-aliases/template.hbs");
     let result = await pipeline(projectDir, analyzer, "with-block-aliases", templatePath);
     assert.deepEqual(minify(print(result.ast)), minify(`
-    <div class="my-scope-alias b stylesheet__world">
-      <h1 class="e my-header-alias">Hello, <span class="f c stylesheet__world stylesheet__world--thick {{-css-blocks-classnames 2 4 2 isThick 1 3 4 2 1 textStyle "bold" 1 0 "italic" 1 1 "g" 0 "f" 1 "my-alias-for-state" 2 "d" 3}}">World</span>!</h1>
+    <div class="b my-scope-alias stylesheet__world">
+      <h1 class="e my-header-alias">Hello, <span class="c f stylesheet__world stylesheet__world--thick {{-css-blocks-classnames 2 4 2 isThick 1 3 4 2 1 textStyle "bold" 1 0 "italic" 1 1 "g" 0 "f" 1 "my-alias-for-state" 2 "d" 3}}">World</span>!</h1>
     </div>
     `));
   });
@@ -116,7 +116,7 @@ describe("Template Rewriting", function() {
     let result = await pipeline(projectDir, analyzer, "page-layout", templatePath);
     assert.deepEqual(minify(print(result.ast)), minify(`
       <div class="a {{-css-blocks-classnames 1 1 2 isLoading 1 0 "b" 0}}">
-        <aside class="g h c d"> </aside>
+        <aside class="c d g h"> </aside>
         <article class="i {{-css-blocks-classnames 1 2 0 isRecommended 1 1 1 0 "e" 0 "f" 1}}"> </article>
       </div>
     `));
@@ -142,9 +142,9 @@ describe("Template Rewriting", function() {
 
     // TODO why is `f` class both static and dynamic?
     assert.deepEqual(minify(print(result.ast)), minify(`
-    <div class="i a">
-      {{link-to "Inline Form" "inline-form" class="j b"}}
-      {{#link-to "block-form" class="j b m"}}Block Form{{/link-to}}
+    <div class="a i">
+      {{link-to "Inline Form" "inline-form" class="b j"}}
+      {{#link-to "block-form" class="b j m"}}Block Form{{/link-to}}
 
       {{link-to "Inline Form" "inline-form-active" class="c" activeClass="d"}}
       {{#link-to "block-form-active" class="c" activeClass="d"}}Block Form{{/link-to}}

packages/@css-blocks/jsx/src/Analyzer/visitors/element.ts

@@ -38,6 +38,7 @@ export class JSXElementAnalyzer {
   private filename: string;
   private classProperties: Flags;
   private isRewriteMode: boolean;
+  reservedClassNames: Set<string>;
 
   constructor(analysis: JSXAnalysis, isRewriteMode = false) {
     this.analysis = analysis;
@@ -47,10 +48,11 @@ export class JSXElementAnalyzer {
       class: true,
       className: true,
     };
+    this.reservedClassNames = analysis.reservedClassNames();
   }
 
   private startElement(location: TemplateSourceLocation, tagName?: string): JSXElementAnalysis {
-    if (this.isRewriteMode) { return new ElementAnalysis<BooleanExpression, StringExpression, TernaryExpression>(location, tagName); }
+    if (this.isRewriteMode) { return new ElementAnalysis<BooleanExpression, StringExpression, TernaryExpression>(location, this.reservedClassNames, tagName); }
     return this.analysis.startElement<BooleanExpression, StringExpression, TernaryExpression>(location, tagName);
   }
 

packages/@css-blocks/jsx/test/transformer/transformer-test.ts

@@ -463,7 +463,7 @@ export class Test {
         assert.deepEqual(minify(res.jsx.code!), minify(`
           import objstr from 'obj-str';
 
-          <div className="foo a"></div>;
+          <div className="a foo"></div>;
         `));
       });
     });