@hypergood/css-core 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypergood/css-core",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -28,6 +28,7 @@
   "devDependencies": {
     "@babel/core": "^7.28.5",
     "@babel/helper-module-imports": "^7.27.1",
+    "@babel/parser": "^7.29.3",
     "@babel/preset-typescript": "^7.28.5",
     "@types/babel__core": "^7.20.5",
     "@types/babel__helper-module-imports": "^7.18.3",

package/src/evaluate.ts

@@ -1,12 +1,15 @@
 export type EvaluationResult = {
   confident: boolean;
   value: any;
+  badNode?: babel.types.Node | null | undefined;
 };
 
-const UNKNOWN: EvaluationResult = {
-  confident: false,
-  value: undefined,
-};
+const UNKNOWN = (badNode?: babel.types.Node | null | undefined) =>
+  ({
+    confident: false,
+    value: undefined,
+    badNode,
+  }) as EvaluationResult;
 const known = (value: any) => ({
   confident: true,
   value,
@@ -16,23 +19,61 @@ export function evaluateBabelExpression(
   node: babel.types.Node | null | undefined,
   knownConstants: Record<string, any>,
 ): EvaluationResult {
-  if (!node) return UNKNOWN;
+  if (!node) return UNKNOWN(node);
   switch (node.type) {
+    case "ArrayExpression":
+      return evaluateArrayExpression(node, knownConstants);
     case "BinaryExpression":
       return evaluateBinaryExpression(node, knownConstants);
     case "Identifier":
       return evaluateIdentifier(node, knownConstants);
-    case "NumericLiteral":
-      return evaluateNumericLiteral(node);
     case "MemberExpression":
       return evaluateMemberExpression(node, knownConstants);
+    case "NullLiteral":
+      return evaluateNullLiteral(node);
+    case "NumericLiteral":
+      return evaluateNumericLiteral(node);
     case "ObjectExpression":
       return evaluateObjectExpression(node, knownConstants);
     case "StringLiteral":
       return evaluateStringLiteral(node);
+    case "TemplateLiteral":
+      return evaluateTemplateLiteral(node, knownConstants);
+    case "UnaryExpression":
+      return evaluateUnaryExpression(node, knownConstants);
     default:
-      return UNKNOWN;
+      return UNKNOWN(node);
+  }
+}
+
+function evaluateArrayExpression(
+  node: babel.types.ArrayExpression,
+  knownConstants: Record<string, any>,
+): EvaluationResult {
+  const elements: any[] = [];
+  for (const item of node.elements) {
+    if (!item) return UNKNOWN(node);
+    if (item.type === "SpreadElement") {
+      const spreadElements = evaluateBabelExpression(
+        item.argument,
+        knownConstants,
+      );
+      if (spreadElements.confident) {
+        elements.push(...spreadElements.value);
+        continue;
+      } else {
+        return UNKNOWN(spreadElements.badNode);
+      }
+    }
+    const result = evaluateBabelExpression(item, knownConstants);
+    if (result.confident) {
+      elements.push(result.value);
+    } else {
+      return UNKNOWN(result.badNode);
+    }
   }
+
+  return known(elements);
 }
 
 function evaluateBinaryExpression(
@@ -42,15 +83,56 @@ function evaluateBinaryExpression(
   const left = evaluateBabelExpression(node.left, knownConstants);
   const right = evaluateBabelExpression(node.right, knownConstants);
 
-  if (!left.confident || !right.confident) return UNKNOWN;
+  if (!left.confident) return UNKNOWN(left.badNode);
+  if (!right.confident) return UNKNOWN(right.badNode);
 
   switch (node.operator) {
-    case "*":
-      return known(left.value * right.value);
     case "+":
       return known(left.value + right.value);
+    case "-":
+      return known(left.value - right.value);
+    case "/":
+      return known(left.value / right.value);
+    case "%":
+      return known(left.value % right.value);
+    case "*":
+      return known(left.value * right.value);
+    case "**":
+      return known(left.value ** right.value);
+    case "&":
+      return known(left.value & right.value);
+    case "|":
+      return known(left.value | right.value);
+    case ">>":
+      return known(left.value >> right.value);
+    case ">>>":
+      return known(left.value >>> right.value);
+    case "<<":
+      return known(left.value << right.value);
+    case "^":
+      return known(left.value ^ right.value);
+    case "==":
+      return known(left.value == right.value);
+    case "===":
+      return known(left.value === right.value);
+    case "!=":
+      return known(left.value != right.value);
+    case "!==":
+      return known(left.value !== right.value);
+    case "in":
+      return known(left.value in right.value);
+    case "instanceof":
+      return known(left.value instanceof right.value);
+    case ">":
+      return known(left.value > right.value);
+    case "<":
+      return known(left.value < right.value);
+    case ">=":
+      return known(left.value >= right.value);
+    case "<=":
+      return known(left.value <= right.value);
     default:
-      return UNKNOWN;
+      return UNKNOWN(node);
   }
 }
 
@@ -61,7 +143,10 @@ function evaluateIdentifier(
   if (node.name in knownConstants) {
     return known(knownConstants[node.name]);
   }
-  return UNKNOWN;
+  if (node.name === "undefined") {
+    return known(undefined);
+  }
+  return UNKNOWN(node);
 }
 
 function evaluateMemberExpression(
@@ -78,15 +163,19 @@ function evaluateMemberExpression(
     if (propertyNode.type === "Identifier") {
       property = known(propertyNode.name);
     } else {
-      return UNKNOWN;
+      return UNKNOWN(node);
     }
   }
 
-  if (!obj.confident || !property.confident) return UNKNOWN;
+  if (!obj.confident || !property.confident) return UNKNOWN(node);
 
   return known(obj.value[property.value]);
 }
 
+function evaluateNullLiteral(node: babel.types.NullLiteral): EvaluationResult {
+  return known(null);
+}
+
 function evaluateNumericLiteral(
   node: babel.types.NumericLiteral,
 ): EvaluationResult {
@@ -102,9 +191,9 @@ function evaluateObjectExpression(
   for (const property of node.properties) {
     switch (property.type) {
       case "ObjectMethod":
-        return UNKNOWN;
+        return UNKNOWN(property);
       case "SpreadElement":
-        return UNKNOWN;
+        return UNKNOWN(property);
       case "ObjectProperty": {
         const keyNode = property.key;
         let key: EvaluationResult;
@@ -116,11 +205,12 @@ function evaluateObjectExpression(
           } else if (keyNode.type === "Identifier") {
             key = known(keyNode.name);
           } else {
-            return UNKNOWN;
+            return UNKNOWN(property);
           }
         }
         const value = evaluateBabelExpression(property.value, knownConstants);
-        if (!key || !key.confident || !value.confident) return UNKNOWN;
+        if (!key || !key.confident || !value.confident)
+          return UNKNOWN(property);
         result[key.value] = value.value;
       }
     }
@@ -134,3 +224,52 @@ function evaluateStringLiteral(
 ): EvaluationResult {
   return known(node.value);
 }
+
+function evaluateTemplateLiteral(
+  node: babel.types.TemplateLiteral,
+  knownConstants: Record<string, any>,
+): EvaluationResult {
+  const quasisAsStrings = node.quasis.map((q) => q.value.cooked ?? q.value.raw);
+  const expressions = node.expressions.map((e) =>
+    evaluateBabelExpression(e, knownConstants),
+  );
+  if (expressions.some((e) => !e.confident)) {
+    return UNKNOWN(node);
+  }
+  const expressionValues = expressions.map((e) => e.value);
+  let result = "";
+  for (let i = 0; i < quasisAsStrings.length; i++) {
+    result += quasisAsStrings[i];
+    if (i < expressionValues.length) {
+      let value = expressionValues[i];
+      result += value;
+    }
+  }
+  return known(result);
+}
+
+function evaluateUnaryExpression(
+  node: babel.types.UnaryExpression,
+  knownConstants: Record<string, any>,
+): EvaluationResult {
+  const argument = evaluateBabelExpression(node.argument, knownConstants);
+
+  if (!argument.confident) return UNKNOWN(argument.badNode);
+
+  switch (node.operator) {
+    case "+":
+      return known(+argument.value);
+    case "-":
+      return known(-argument.value);
+    case "void":
+      return known(void argument.value);
+    case "!":
+      return known(!argument.value);
+    case "~":
+      return known(~argument.value);
+    case "typeof":
+      return known(typeof argument.value);
+    default:
+      return UNKNOWN(node);
+  }
+}

package/src/plugin.ts

@@ -180,7 +180,7 @@ function babelPluginReplaceCssProp({
           }
         },
       },
-      JSXAttribute(path) {
+      JSXAttribute(path, state) {
         if (
           path.node.name &&
           path.node.name.type === "JSXIdentifier" &&
@@ -199,9 +199,18 @@ function babelPluginReplaceCssProp({
               );
               let styleObject = styleObjectResult.value;
               if (!styleObjectResult.confident) {
-                throw new Error(
-                  "COULD NOT EVALUATE CSS: L" + expression.loc?.start.line,
-                );
+                const badNode = styleObjectResult.badNode;
+                if (badNode) {
+                  const { start, end } = badNode;
+                  const rawCode = state.file.code.slice(start, end);
+                  console.error(`COULD NOT EVALUATE CSS: \`${rawCode}\``);
+                  return;
+                } else {
+                  console.error(
+                    "COULD NOT EVALUATE CSS: L" + expression.loc?.start.line,
+                  );
+                  return;
+                }
               }
               const classNames = styleObjectToClassNames(styleObject);
 

package/src/print.ts

@@ -25,15 +25,7 @@ ${styleRules.map((rule) => `    ${rule.property}: ${rule.value};`).join("\n")}
 
   const tree = groupStyleRules(styleRules, []);
   const rulesSection = renderStyleRuleNode(tree, styleRuleToClassName);
-  return (
-    keyframesSection +
-    "\n" +
-    rulesSection +
-    "\n" +
-    "/* " +
-    JSON.stringify(styleRules, null, 2) +
-    " */"
-  );
+  return keyframesSection + "\n" + rulesSection;
 }
 
 function renderStyleRuleNode(

package/tests/evaluate.test.ts

@@ -0,0 +1,73 @@
+import parser from "@babel/parser";
+import { describe, expect, it } from "vitest";
+import { evaluateBabelExpression } from "../src/evaluate.js";
+
+const KNOWN = (value: any) => ({ confident: true, value });
+
+const evaluateString = (str: string) =>
+  evaluateBabelExpression(parser.parseExpression(str), {});
+
+describe("evaluateBabelExpression", () => {
+  it("handles primitive literals", () => {
+    expect(evaluateString("1")).toStrictEqual(KNOWN(1));
+    expect(evaluateString("1.1")).toStrictEqual(KNOWN(1.1));
+    expect(evaluateString("1e2")).toStrictEqual(KNOWN(100));
+    expect(evaluateString('"1"')).toStrictEqual(KNOWN("1"));
+    expect(evaluateString("null")).toStrictEqual(KNOWN(null));
+    expect(evaluateString("undefined")).toStrictEqual(KNOWN(undefined));
+  });
+  it("handles ArrayExpression", () => {
+    expect(evaluateString('[1,"2",3]')).toStrictEqual(KNOWN([1, "2", 3]));
+    expect(evaluateString("[1,...([2,3])]")).toStrictEqual(KNOWN([1, 2, 3]));
+  });
+  it("handles BinaryExpression", () => {
+    expect(evaluateString("1+1")).toStrictEqual(KNOWN(2));
+    expect(evaluateString("1-1")).toStrictEqual(KNOWN(0));
+    expect(evaluateString("4/2")).toStrictEqual(KNOWN(2));
+    expect(evaluateString("4%3")).toStrictEqual(KNOWN(1));
+    expect(evaluateString("2*3")).toStrictEqual(KNOWN(6));
+    expect(evaluateString("2**3")).toStrictEqual(KNOWN(8));
+    expect(evaluateString("2 & 3")).toStrictEqual(KNOWN(2));
+    expect(evaluateString("2 | 3")).toStrictEqual(KNOWN(3));
+    expect(evaluateString("8 >> 2")).toStrictEqual(KNOWN(2));
+    expect(evaluateString("8 >>> 2")).toStrictEqual(KNOWN(2));
+    expect(evaluateString("8 << 2")).toStrictEqual(KNOWN(32));
+    expect(evaluateString("8 ^ 2")).toStrictEqual(KNOWN(10));
+    expect(evaluateString("1 == 1")).toStrictEqual(KNOWN(true));
+    expect(evaluateString("1 === 1")).toStrictEqual(KNOWN(true));
+    expect(evaluateString("1 != 1")).toStrictEqual(KNOWN(false));
+    expect(evaluateString("1 !== 1")).toStrictEqual(KNOWN(false));
+    expect(evaluateString("1 > 0")).toStrictEqual(KNOWN(true));
+    expect(evaluateString("1 < 0")).toStrictEqual(KNOWN(false));
+    expect(evaluateString("1 >= 0")).toStrictEqual(KNOWN(true));
+    expect(evaluateString("1 <= 0")).toStrictEqual(KNOWN(false));
+  });
+  it("handles MemberExpression", () => {
+    expect(evaluateString("({a:1}).a")).toStrictEqual(KNOWN(1));
+    expect(evaluateString('({a:1})["a"]')).toStrictEqual(KNOWN(1));
+  });
+  it("handles ObjectExpression", () => {
+    expect(evaluateString("{a:1}")).toStrictEqual(KNOWN({ a: 1 }));
+    expect(evaluateString('{["a"]:1}')).toStrictEqual(KNOWN({ a: 1 }));
+  });
+  it("handles TemplateLiteral", () => {
+    expect(evaluateString("`Something`")).toStrictEqual(KNOWN("Something"));
+    expect(evaluateString('`Something ${"cool"}`')).toStrictEqual(
+      KNOWN("Something cool"),
+    );
+    expect(evaluateString("`Something ${1}`")).toStrictEqual(
+      KNOWN("Something 1"),
+    );
+    expect(evaluateString("`Something ${1} ${2} ${3}`")).toStrictEqual(
+      KNOWN("Something 1 2 3"),
+    );
+  });
+  it("handles UnaryExpression", () => {
+    expect(evaluateString("+1")).toStrictEqual(KNOWN(1));
+    expect(evaluateString("-1")).toStrictEqual(KNOWN(-1));
+    expect(evaluateString("void 0")).toStrictEqual(KNOWN(undefined));
+    expect(evaluateString("!1")).toStrictEqual(KNOWN(false));
+    expect(evaluateString("~1")).toStrictEqual(KNOWN(-2));
+    expect(evaluateString("typeof 1")).toStrictEqual(KNOWN("number"));
+  });
+});