Implement evaluateExpression

packages/pigment-css-utils/package.json

@@ -31,10 +31,10 @@
     "typescript": "tsc --noEmit -p ."
   },
   "dependencies": {
-    "@babel/types": "^7.26.0",
-    "@babel/parser": "^7.26.2",
+    "@babel/types": "^7.26.3",
+    "@babel/parser": "^7.26.3",
     "@emotion/unitless": "0.10.0",
-    "@emotion/serialize": "^1.3.2",
+    "@emotion/serialize": "^1.3.3",
     "@pigment-css/theme": "workspace:*",
     "@wyw-in-js/processor-utils": "^0.5.5",
     "@wyw-in-js/shared": "^0.5.5",

packages/pigment-css-utils/src/base-processor.ts

@@ -4,11 +4,4 @@ import { BaseProcessor as WywBaseProcessor } from '@wyw-in-js/processor-utils';
  * This is going to be expanded when the react package comes into picture.
  * Right now, it only has the bare mimimum.
  */
-export default abstract class BaseProcessor extends WywBaseProcessor {
-  abstract getBaseClass(): string | undefined;
-
-  get asSelector(): string {
-    const baseClass = this.getBaseClass();
-    return `.${baseClass ?? this.className}`;
-  }
-}
+export default abstract class BaseProcessor extends WywBaseProcessor {}

packages/pigment-css-utils/src/utils/evaluateExpresions.ts

@@ -0,0 +1,11 @@
+/**
+ * Slightly unsafe but way faster way to evaluate JS code than using babel transforms.
+ *
+ * @param expressionString The JS code expression to evaluate
+ */
+export function evaluateClassNameArg<T>(expressionString: string): T {
+  // Create sandbox context
+  const context = Object.create(null);
+  const safeEval = new Function('context', `with(context) { return ${expressionString}; }`);
+  return safeEval(context);
+}

packages/pigment-css-utils/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './processStyle';
 export * from './valueToLiteral';
 export * from './parseExpressions';
+export * from './evaluateExpresions';

packages/pigment-css-utils/src/utils/processStyle.ts

@@ -26,12 +26,17 @@ export type ProcessStyleReturn<T> = {
   variables: Record<string, [Function, 1 | 0]>;
 };
 
+export type ClassNameOptions =
+  | {
+      variantName: string;
+      variantValue: string;
+    }
+  | {
+      isCv: true;
+    };
+
 export type ProcessStyleObjectsOptions = ProcessStyleOptions & {
-  getClassName: (
-    variantName: string | undefined,
-    variantValue: string | undefined,
-    isCv?: boolean,
-  ) => string;
+  getClassName: (opts?: ClassNameOptions) => string;
 };
 
 export type StyleObjectReturn = {
@@ -138,7 +143,7 @@ function getCss(
   if (typeof style === 'string') {
     result.base.push({
       cssText: serializeStyles([style]).styles,
-      className: cssesc(getClassName(undefined, undefined)),
+      className: cssesc(getClassName()),
       variables: {},
       serializables: {},
     });
@@ -152,7 +157,7 @@ function getCss(
   const { result: baseObj, variables } = processStyle(style, { getVariableName });
   const cssText = serializeStyles([baseObj as any]).styles;
   result.base.push({
-    className: getClassName(undefined, undefined),
+    className: getClassName(),
     cssText,
     variables,
     serializables: {},
@@ -163,7 +168,10 @@ function getCss(
       const variantData = variants[variantName];
       Object.keys(variantData).forEach((variantValue) => {
         const cssObjOrStr = variantData[variantValue];
-        const className = getClassName(variantName, variantValue);
+        const className = getClassName({
+          variantName,
+          variantValue,
+        });
         const serializables = {
           [variantName]: variantValue,
         };
@@ -190,7 +198,7 @@ function getCss(
   }
   if (compoundVariants && compoundVariants.length > 0) {
     compoundVariants.forEach(({ css, ...rest }, cvIndex) => {
-      const className = `${getClassName(undefined, undefined, true)}-cv${cvIndex ? `-${cvIndex}` : ''}`;
+      const className = `${getClassName({ isCv: true })}-cv${cvIndex ? `-${cvIndex}` : ''}`;
       const serializables = rest;
       if (typeof css === 'string') {
         result.compoundVariants.push({
@@ -231,12 +239,9 @@ export function processStyleObjects(
   styles.reduce((acc, style, index) => {
     const res = getCss(style, {
       ...options,
-      getClassName: (
-        variantName: string | undefined,
-        variantValue: string | undefined,
-        isCv?: boolean,
-      ) => {
-        const base = options.getClassName(variantName, variantValue);
+      getClassName: (opts?: ClassNameOptions) => {
+        const isCv = opts && 'isCv' in opts && opts.isCv;
+        const base = options.getClassName(opts);
         if (index > 0) {
           return `${base}${isCv ? '-cv' : ''}-${index}`;
         }