Evaluate simple expressions that resolve to a constant value

css={{ fontSize: 2 + 2 }}

.cc {
  font-size: 4; // reduced to 4
}

handle:

• multiplication
• addition
• subtraction
• division

on:

• strings
• numbers
• identifiers that resolve to a constant string or number

Use babel path method path.evaluate

[itsdouges]

yeah - finding the bindings works out of the box. we just need some extra code to do the module traversal stuff - i reckon when we start doing the actual work we can refactor this first.

[pgmanutd]

yups, instead of storing declarations, lets find the bindings. Atleast that binding will be limited to a particular scope right.

Doing like this:

const declarationName = path.node.declarations[0].id.name;
state.declarations[declarationName] = path.node;

might end up with same declarationName. Not sure, but there can be a possibility.

Instead, lets traverse upwards and find the binding. Worst case will be that we have to traverse module boundaries, but thats the worst case right. We can work on a fallback if possible in case we are not able to traverse module boundaries. Nice work btw ❤️