feat: Allow styles to be set to className properties for dynamic change to the class attribute.

Author: chriseppstein

packages/jsx-analyzer/package.json

@@ -61,6 +61,7 @@
     "preact": "^8.2.1",
     "prettier": "^1.8.2",
     "shelljs": "^0.7.8",
+    "test-console": "^1.1.0",
     "ts-node": "^3.0.4",
     "tslint": "^5.5.0",
     "watch": "^1.0.2"
@@ -71,14 +72,14 @@
   "dependencies": {
     "@opticss/template-api": "^0.1.0",
     "@opticss/util": "^0.1.0",
-    "opticss": "^0.1.0",
-    "css-blocks": "^0.15.0-rc.0",
     "babel-traverse": "^6.24.1",
     "babel-types": "^6.24.1",
     "babylon": "^6.17.4",
+    "css-blocks": "^0.15.0-rc.0",
     "debug": "^2.6.8",
     "minimatch": "^3.0.4",
     "object.values": "^1.0.4",
+    "opticss": "^0.1.0",
     "typescript": "^2.3.4"
   }
 }

packages/jsx-analyzer/src/analyzer/JSXElementAnalyzer.ts

@@ -19,6 +19,7 @@ import {
   JSXAttribute,
   Identifier,
   SourceLocation,
+  AssignmentExpression,
 } from 'babel-types';
 
 import { MalformedBlockPath, TemplateAnalysisError } from '../utils/Errors';
@@ -59,7 +60,24 @@ export class JSXElementAnalyzer {
     return found;
   }
 
-  analyze(path: NodePath<JSXOpeningElement>): JSXElementAnalysis | undefined {
+  analyzeAssignment(path: NodePath<AssignmentExpression>): JSXElementAnalysis | undefined {
+    let assignment = path.node as AssignmentExpression;
+    if (assignment.operator !== '=') return;
+    let lVal = assignment.left;
+    if (isMemberExpression(lVal)) {
+      let property = lVal.property;
+      if (!lVal.computed && isIdentifier(property) && property.name === 'className') {
+        let element = newJSXElementAnalysis(this.location(path));
+        this.analyzeClassExpression(path.get('right') as NodePath<Expression>, element);
+        if (element.hasStyles()) {
+          return element;
+        }
+      }
+    }
+    return;
+  }
+
+  analyzeJSXElement(path: NodePath<JSXOpeningElement>): JSXElementAnalysis | undefined {
     let el = path.node;
 
     // We don't care about elements with no attributes;
@@ -121,16 +139,13 @@ export class JSXElementAnalyzer {
     return;
   }
 
-  private analyzeClassAttribute(path: NodePath<JSXAttribute>, element: JSXElementAnalysis): void {
-    let value = path.node.value;
-    if (!isJSXExpressionContainer(value)) return; // should this be an error?
-    // If this attribute's value is an expression, evaluate it for block references.
-    // Discover block root identifiers.
-    if (isIdentifier(value.expression)) {
-      let identifier = value.expression;
-      let identBinding = path.scope.getBinding(identifier.name);
+  private analyzeClassExpression(expression: NodePath<Expression>, element: JSXElementAnalysis, suppressErrors = false): void {
+    if (expression.isIdentifier()) {
+      let identifier = expression.node as Identifier;
+      let identBinding = expression.scope.getBinding(identifier.name);
       if (identBinding) {
         if (identBinding.constantViolations.length > 0) {
+          if (suppressErrors) return;
           throw new TemplateAnalysisError(`illegal assignment to a style variable.`, this.nodeLoc(identBinding.constantViolations[0]));
         }
         if (identBinding.kind === 'module') {
@@ -140,7 +155,8 @@ export class JSXElementAnalyzer {
           if (block) {
             element.addStaticClass(block);
           } else {
-            throw new TemplateAnalysisError(`No block named ${name} was found`, this.nodeLoc(value));
+            if (suppressErrors) return;
+            throw new TemplateAnalysisError(`No block named ${name} was found`, this.nodeLoc(expression));
           }
         } else {
           let identPathNode = identBinding.path.node;
@@ -151,34 +167,37 @@ export class JSXElementAnalyzer {
               for (let refPath of identBinding.referencePaths.filter(p => p.parentPath.type !== 'JSXExpressionContainer')) {
                 let parentPath = refPath.parentPath;
                 if (!isConsoleLogStatement(parentPath.node)) {
+                  if (suppressErrors) return;
                   throw new TemplateAnalysisError(`illegal use of a style variable.`, this.nodeLoc(parentPath));
                 }
               }
             }
           } else {
-            throw new TemplateAnalysisError(`variable for class attributes must be initialized with a style expression.`, this.nodeLoc(value));
+            if (suppressErrors) return;
+            throw new TemplateAnalysisError(`variable for class attributes must be initialized with a style expression.`, this.nodeLoc(expression));
           }
           this.addPossibleDynamicStyles(element, initialValueOfIdent, identBinding.path);
         }
       }
-    } else if (isMemberExpression(value.expression)) {
+    } else if (expression.isMemberExpression()) {
       // Discover direct references to an imported block.
       // Ex: `blockName.foo` || `blockName['bar']` || `blockName.bar()`
-      let parts: ExpressionReader = new ExpressionReader(value.expression, this.filename);
+      let parts: ExpressionReader = new ExpressionReader(expression.node, this.filename);
       let expressionResult = parts.getResult(this.blocks);
       let blockOrClass = expressionResult.blockClass || expressionResult.block;
       if (isBlockStateGroupResult(expressionResult) || isBlockStateResult(expressionResult)) {
         throw new Error('internal error, not expected on a member expression');
       } else {
         element.addStaticClass(blockOrClass);
       }
-    } else if (isCallExpression(value.expression)) {
-      let styleFn = isStyleFunction(path, value.expression);
+    } else if (expression.isCallExpression()) {
+      let callExpr = expression.node as CallExpression;
+      let styleFn = isStyleFunction(expression, callExpr);
       if (styleFn.type === 'error') {
         if (styleFn.canIgnore) {
           // It's not a style helper function, assume it's a static reference to a state.
           try {
-            let parts: ExpressionReader = new ExpressionReader(value.expression, this.filename);
+            let parts: ExpressionReader = new ExpressionReader(callExpr, this.filename);
             let expressionResult = parts.getResult(this.blocks);
             let blockOrClass = expressionResult.blockClass || expressionResult.block;
             if (isBlockStateGroupResult(expressionResult)) {
@@ -190,28 +209,38 @@ export class JSXElementAnalyzer {
             }
           } catch (e) {
             if (e instanceof MalformedBlockPath) {
-              if (isIdentifier(value.expression.callee)) {
-                let fnName = value.expression.callee.name;
+              if (isIdentifier(callExpr.callee)) {
+                let fnName = callExpr.callee.name;
                 if (isCommonNameForStyling(fnName)) {
-                  throw new TemplateAnalysisError(`The call to style function '${fnName}' does not resolve to an import statement of a known style helper.`, this.nodeLoc(value.expression));
+                  throw new TemplateAnalysisError(`The call to style function '${fnName}' does not resolve to an import statement of a known style helper.`, this.nodeLoc(expression));
                 } else {
-                  throw new TemplateAnalysisError(`Function called within class attribute value '${fnName}' must be either an 'objstr' call, or a state reference`, this.nodeLoc(value.expression));
+                  throw new TemplateAnalysisError(`Function called within class attribute value '${fnName}' must be either an 'objstr' call, or a state reference`, this.nodeLoc(expression));
                 }
               }
             }
             throw e;
           }
         } else {
+          if (suppressErrors) return;
           throw new TemplateAnalysisError(styleFn.message, styleFn.location);
         }
       } else {
-        styleFn.analyze(this.blocks, element, this.filename, styleFn, value.expression);
+        styleFn.analyze(this.blocks, element, this.filename, styleFn, callExpr);
       }
     } else {
       // TODO handle ternary expressions like style-if in handlebars?
     }
   }
 
+  private analyzeClassAttribute(path: NodePath<JSXAttribute>, element: JSXElementAnalysis): void {
+    let value = path.get('value');
+    if (!value.isJSXExpressionContainer()) return; // should this be an error?
+    // If this attribute's value is an expression, evaluate it for block references.
+    // Discover block root identifiers.
+    let expressionPath = value.get('expression') as NodePath<Expression>;
+    this.analyzeClassExpression(expressionPath, element);
+  }
+
   /**
    * Given a well formed style expression `CallExpression`, add all Block style references
    * to the given analysis object.

packages/jsx-analyzer/src/analyzer/index.ts

@@ -1,5 +1,5 @@
 import { NodePath } from 'babel-traverse';
-import { JSXOpeningElement, } from 'babel-types';
+import { JSXOpeningElement, AssignmentExpression } from 'babel-types';
 
 import Analysis from '../utils/Analysis';
 import { JSXElementAnalyzer } from './JSXElementAnalyzer';
@@ -12,6 +12,10 @@ export default function visitors(analysis: Analysis): object {
   let elementAnalyzer = new JSXElementAnalyzer(analysis.blocks, analysis.template.identifier);
 
   return {
+    AssignmentExpression(path: NodePath<AssignmentExpression>): void {
+      let element = elementAnalyzer.analyzeAssignment(path);
+      if (element) analysis.addElement(element);
+    },
     //  TODO: handle the `h()` function?
 
     /**
@@ -20,7 +24,7 @@ export default function visitors(analysis: Analysis): object {
      * @param path The JSXOpeningElement Babylon path we are processing.
      */
     JSXOpeningElement(path: NodePath<JSXOpeningElement>): void {
-      let element = elementAnalyzer.analyze(path);
+      let element = elementAnalyzer.analyzeJSXElement(path);
       if (element) analysis.addElement(element);
     }
   };

packages/jsx-analyzer/src/styleFunctions/objstrFunction.ts

@@ -118,8 +118,7 @@ export function analyzeObjstr(blocks: ObjectDictionary<Block>, element: JSXEleme
             throw new TemplateAnalysisError('The spread operator is not allowed in CSS Block states.', {filename, ...result.dynamicStateExpression.loc.start});
           } else {
             // if truthy, the only dynamic expr is from the state selector.
-            // TODO: would like to force this to be an error if none provided.
-            element.addDynamicGroup(result.blockClass || result.block, result.stateGroup, result.dynamicStateExpression, false);
+            element.addDynamicGroup(result.blockClass || result.block, result.stateGroup, result.dynamicStateExpression, true);
           }
         } // else ignore
       } else {

packages/jsx-analyzer/src/transformer/babel.ts

@@ -19,6 +19,9 @@ import {
   isJSXExpressionContainer,
   JSXAttribute,
   Node,
+  AssignmentExpression,
+  Identifier,
+  Expression,
 } from 'babel-types';
 
 import isBlockFilename from '../utils/isBlockFilename';
@@ -95,10 +98,36 @@ export default function mkTransform(tranformOpts: { rewriter: Rewriter }): () =>
           }
         },
 
+        AssignmentExpression(path: NodePath<AssignmentExpression>): void {
+          if (!this.shouldProcess) return;
+
+          let elementAnalysis = this.elementAnalyzer.analyzeAssignment(path);
+          if (elementAnalysis) {
+            elementAnalysis.seal();
+            let classMapping = this.mapping.simpleRewriteMapping(elementAnalysis);
+            let className: Expression | undefined = undefined;
+            if (classMapping.dynamicClasses.length > 0) {
+              className = generateClassName(classMapping, elementAnalysis, HELPER_FN_NAME, true);
+            } else {
+              className = stringLiteral(classMapping.staticClasses.join(' '));
+            }
+            let right = path.get('right');
+            if (right.isIdentifier()) {
+              let binding = right.scope.getBinding((<Identifier>right.node).name);
+              if (binding && binding.path.isVariableDeclarator()) {
+                let init = binding.path.get('init');
+                init.replaceWith(className);
+                return;
+              }
+            }
+            right.replaceWith(className);
+          }
+        },
+
         JSXOpeningElement(path: NodePath<JSXOpeningElement>, state: any): void {
           if (!this.shouldProcess) return;
 
-          let elementAnalysis = this.elementAnalyzer.analyze(path);
+          let elementAnalysis = this.elementAnalyzer.analyzeJSXElement(path);
           if (elementAnalysis) {
             elementAnalysis.seal();
             let classMapping = this.mapping.simpleRewriteMapping(elementAnalysis);
@@ -152,8 +181,10 @@ function detectStrayReferenceToImport(
     let binding = importDeclPath.scope.getBinding(specifier.local.name);
     if (binding) {
       for (let ref of binding.referencePaths) {
-        if (!isRemoved(ref)) {
-          console.warn(`WARNING: Stray reference to block import (${specifier.local.name}). Imports are removed during rewrite so this will probably be a runtime error. (${filename}:${ref.node.loc.start.line}:${ref.node.loc.start.column}`);
+        if (ref.type === 'Identifier'
+            && (<Identifier>ref.node).name === specifier.local.name
+            && !isRemoved(ref)) {
+          console.warn(`WARNING: Stray reference to block import (${specifier.local.name}). Imports are removed during rewrite so this will probably be a runtime error. (${filename}:${ref.node.loc.start.line}:${ref.node.loc.start.column})`);
           // throw new TemplateAnalysisError(`Stray reference to block import (${specifier.local.name}). Imports are removed during rewrite.`, {filename, ...ref.node.loc.start});
         }
       }
@@ -162,10 +193,20 @@ function detectStrayReferenceToImport(
 }
 
 function isRemoved(path: NodePath<Node>): boolean {
-  if (path.removed) return true;
-  let p = path.parentPath;
+  let p = path;
   while (p && p.type !== 'Program') {
-    if (p.removed) return true;
+    if (p.removed || p.parentPath.removed) return true;
+    if (p.inList) {
+      let list = p.parentPath.get(p.listKey);
+      if (!Array.isArray(list)) return true;
+      let element = list[p.key];
+      if (!element) return true;
+      if (element.node !== p.node) return true;
+    } else {
+      if (p.parentPath.get(p.parentKey).node !== p.node) {
+        return true;
+      }
+    }
     p = p.parentPath;
   }
   return false;

packages/jsx-analyzer/test/analyzer/external-objstr-class-test.ts

@@ -11,6 +11,53 @@ export class Test {
     mock.restore();
   }
 
+  @test 'Can set className dynamically'() {
+    mock({
+      'bar.block.css': `
+        .root { color: red; }
+        .foo { color: blue; }
+        .foo[state|happy] { color: balloons; }
+      `
+    });
+
+    return parse(`
+      import bar from 'bar.block.css'
+      import objstr from 'obj-str';
+
+      function doesSomething(element) {
+        element.className = objstr({
+          [bar.foo]: true,
+        });
+        let style = objstr({
+          [bar.foo]: true,
+          [bar.foo.happy()]: true
+        });
+        element.className = bar;
+        element.className = style;
+      }
+    `
+    ).then((metaAnalysis: MetaAnalysis) => {
+      let result = metaAnalysis.serialize();
+      let analysis = result.analyses[0];
+      assert.deepEqual(analysis.stylesFound, ['bar.foo', 'bar.foo[state|happy]', 'bar.root']);
+
+      let aAnalysis = analysis.elements.a;
+      assert.deepEqual(aAnalysis.dynamicClasses, []);
+      assert.deepEqual(aAnalysis.dynamicStates, []);
+      assert.deepEqual(aAnalysis.staticStyles, [0]);
+
+      let bAnalysis = analysis.elements.b;
+      assert.deepEqual(bAnalysis.dynamicClasses, []);
+      assert.deepEqual(bAnalysis.dynamicStates, []);
+      assert.deepEqual(bAnalysis.staticStyles, [2]);
+
+      let cAnalysis = analysis.elements.c;
+      assert.deepEqual(cAnalysis.dynamicClasses, []);
+      assert.deepEqual(cAnalysis.dynamicStates, []);
+      assert.deepEqual(cAnalysis.staticStyles, [0, 1]);
+    });
+  }
+
   @test 'Classes on objstr calls are tracked when applied'() {
     mock({
       'bar.block.css': '.root { color: red; } .foo { color: blue; }'