diff --git a/packages/@stylexjs/babel-plugin/__tests__/evaluation-import-test.js b/packages/@stylexjs/babel-plugin/__tests__/evaluation-import-test.js
index dc0fecb89..77c26aeec 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/evaluation-import-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/evaluation-import-test.js
@@ -476,4 +476,264 @@ describe('Evaluation of imported values works based on configuration', () => {
       `);
     });
   });
+
+  describe('Arithmetic on imported tokens compiles to calc()', () => {
+    const varName = (key) =>
+      `var(--${options.classNamePrefix}${hash(
+        `otherFile.stylex.js//MyTheme.${key}`,
+      )})`;
+
+    const transformStyle = (value) =>
+      transform(`
+        import stylex from 'stylex';
+        import { MyTheme } from 'otherFile.stylex';
+        const styles = stylex.create({
+          box: {
+            zIndex: ${value},
+          }
+        });
+        stylex(styles.box);
+      `).code;
+
+    test('token + token', () => {
+      expect(transformStyle('MyTheme.a + MyTheme.b')).toContain(
+        `calc(${varName('a')} + ${varName('b')})`,
+      );
+    });
+
+    test('token + number and number + token', () => {
+      expect(transformStyle('MyTheme.a + 4')).toContain(
+        `calc(${varName('a')} + 4)`,
+      );
+      expect(transformStyle('4 + MyTheme.a')).toContain(
+        `calc(4 + ${varName('a')})`,
+      );
+    });
+
+    test('token - number, token * number, token / number', () => {
+      expect(transformStyle('MyTheme.a - 1')).toContain(
+        `calc(${varName('a')} - 1)`,
+      );
+      expect(transformStyle('MyTheme.a * 2')).toContain(
+        `calc(${varName('a')} * 2)`,
+      );
+      expect(transformStyle('MyTheme.a / 2')).toContain(
+        `calc(${varName('a')} / 2)`,
+      );
+    });
+
+    test('unary minus on a token', () => {
+      expect(transformStyle('-MyTheme.a')).toContain(
+        `calc(-1 * ${varName('a')})`,
+      );
+    });
+
+    test('nested arithmetic flattens to parens', () => {
+      expect(transformStyle('MyTheme.a + MyTheme.b * MyTheme.c')).toContain(
+        `calc(${varName('a')} + (${varName('b')} * ${varName('c')}))`,
+      );
+      expect(transformStyle('(MyTheme.a + MyTheme.b) * 2')).toContain(
+        `calc((${varName('a')} + ${varName('b')}) * 2)`,
+      );
+      expect(
+        transformStyle('(MyTheme.a + (MyTheme.b - MyTheme.c)) / 2'),
+      ).toContain(
+        `calc((${varName('a')} + (${varName('b')} - ${varName('c')})) / 2)`,
+      );
+    });
+
+    test('token + jammed string throws instead of emitting broken CSS', () => {
+      // A unit-string operand is excluded from calc() addition on purpose:
+      // `token + '4px'` vs `token + ' 4px'` (list shorthand) must not
+      // silently mean different things. And since the concatenation
+      // 'var(--x)10px' is invalid CSS, it fails instead.
+      expect(() => transformStyle("MyTheme.a + '10px'")).toThrow(
+        /would\s+produce invalid CSS/,
+      );
+      expect(() => transformStyle("MyTheme.a + 'px'")).toThrow(
+        /would\s+produce invalid CSS/,
+      );
+      expect(() => transformStyle("'10px' + MyTheme.a")).toThrow(
+        /would\s+produce invalid CSS/,
+      );
+    });
+
+    test('token + separated string stays list concatenation', () => {
+      const code = transformStyle("MyTheme.a + ' 4px'");
+      expect(code).not.toContain('calc');
+      expect(code).toContain(`${varName('a')} 4px`);
+    });
+
+    test('string concatenation with non-numeric strings is preserved', () => {
+      const code = transform(`
+        import stylex from 'stylex';
+        import { MyTheme } from 'otherFile.stylex';
+        const styles = stylex.create({
+          box: {
+            fontFamily: 'Arial, ' + MyTheme.font,
+          }
+        });
+        stylex(styles.box);
+      `).code;
+      // The whitespace normalizer removes the space after the comma.
+      expect(code).toContain(`Arial,${varName('font')}`);
+      expect(code).not.toContain('calc');
+    });
+
+    test('function-like string concatenation around a token is preserved', () => {
+      const code = transform(`
+        import stylex from 'stylex';
+        import { MyTheme } from 'otherFile.stylex';
+        const styles = stylex.create({
+          box: {
+            transform: 'translateX(' + MyTheme.a + ')',
+          }
+        });
+        stylex(styles.box);
+      `).code;
+      expect(code).toContain(`translateX(${varName('a')})`);
+      expect(code).not.toContain('calc');
+    });
+
+    test('template literal interpolation uses the same concat rules', () => {
+      expect(() =>
+        transform(`
+        import stylex from 'stylex';
+        import { MyTheme } from 'otherFile.stylex';
+        const styles = stylex.create({
+          box: {
+            width: \`\${MyTheme.a}px\`,
+          }
+        });
+        stylex(styles.box);
+      `),
+      ).toThrow(/would\s+produce invalid CSS/);
+
+      const code = transform(`
+        import stylex from 'stylex';
+        import { MyTheme } from 'otherFile.stylex';
+        const styles = stylex.create({
+          box: {
+            margin: \`\${MyTheme.a} 4px\`,
+          }
+        });
+        stylex(styles.box);
+      `).code;
+      expect(code).toContain(`${varName('a')} 4px`);
+      expect(code).not.toContain('calc');
+    });
+
+    test('unsupported operators throw a compile error', () => {
+      const unsupported = [
+        'MyTheme.a % 2',
+        'MyTheme.a ** 2',
+        'MyTheme.a & 1',
+        '~MyTheme.a',
+        '!MyTheme.a',
+        '+MyTheme.a',
+      ];
+      for (const value of unsupported) {
+        expect(() => transformStyle(value)).toThrow(
+          /cannot be applied to a StyleX variable or constant/,
+        );
+      }
+    });
+
+    test('comparisons on tokens throw a compile error', () => {
+      expect(() => transformStyle('MyTheme.a > MyTheme.b ? 1 : 2')).toThrow(
+        /cannot be compared with ">" at compile time/,
+      );
+      expect(() => transformStyle("MyTheme.a === 'red' ? 1 : 2")).toThrow(
+        /cannot be compared with "===" at compile time/,
+      );
+    });
+
+    test('null and undefined guards on tokens still compile', () => {
+      expect(transformStyle('MyTheme.a != null ? 5 : 7')).toContain(
+        'z-index:5',
+      );
+      expect(transformStyle('MyTheme.a === undefined ? 5 : 7')).toContain(
+        'z-index:7',
+      );
+      expect(transformStyle('MyTheme.a ?? 7')).toContain(
+        `z-index:${varName('a')}`,
+      );
+    });
+
+    test('arithmetic in a computed style key throws a compile error', () => {
+      expect(() =>
+        transform(`
+        import stylex from 'stylex';
+        import { MyTheme } from 'otherFile.stylex';
+        const styles = stylex.create({
+          box: {
+            [MyTheme.a + MyTheme.b]: 'red',
+          }
+        });
+        stylex(styles.box);
+      `),
+      ).toThrow(/cannot be used as a style property key/);
+    });
+
+    test('token misuse inside a dynamic style throws instead of degrading', () => {
+      expect(() =>
+        transform(`
+        import stylex from 'stylex';
+        import { MyTheme } from 'otherFile.stylex';
+        const styles = stylex.create({
+          box: (opacity) => ({
+            opacity,
+            zIndex: MyTheme.a === 'big' ? 1 : 2,
+          }),
+        });
+        stylex.props(styles.box(0.5));
+      `),
+      ).toThrow(/cannot be compared with "===" at compile time/);
+    });
+
+    test('unicode custom property keys work with arithmetic', () => {
+      const { metadata } = transform(`
+        import stylex from 'stylex';
+        import { MyTheme } from 'otherFile.stylex';
+        const styles = stylex.create({
+          box: {
+            zIndex: MyTheme['--größe'] * 2,
+          }
+        });
+        stylex(styles.box);
+      `);
+      expect(metadata.stylex[0][1].ltr).toContain('calc(var(--größe) * 2)');
+    });
+
+    test('arithmetic with a non-numeric operand throws a compile error', () => {
+      expect(() => transformStyle("MyTheme.a - 'foo'")).toThrow(
+        /requires the other operand/,
+      );
+      expect(() => transformStyle("MyTheme.a * 'auto'")).toThrow(
+        /requires the other operand/,
+      );
+    });
+
+    test('Number() wrapped token arithmetic in a local constant compiles to calc()', () => {
+      const code = transform(`
+        import stylex from 'stylex';
+        import { MyTheme } from 'otherFile.stylex';
+        const PRESENTER_Z_INDEX = Number(MyTheme.dialog) + 1;
+        const styles = stylex.create({
+          box: {
+            zIndex: PRESENTER_Z_INDEX,
+          }
+        });
+        stylex(styles.box);
+      `).code;
+
+      expect(code).toContain(`calc(${varName('dialog')} + 1)`);
+    });
+
+    test('global numeric functions on tokens throw instead of coercing to NaN', () => {
+      expect(() => transformStyle('Math.round(MyTheme.a) + 1')).toThrow(
+        /"Math.round" function cannot be applied/,
+      );
+    });
+  });
 });
diff --git a/packages/@stylexjs/babel-plugin/__tests__/transform-process-test.js b/packages/@stylexjs/babel-plugin/__tests__/transform-process-test.js
index 58c30ac1f..3d989d163 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/transform-process-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/transform-process-test.js
@@ -1230,4 +1230,116 @@ describe('@stylexjs/babel-plugin', () => {
       `);
     });
   });
+
+  describe('[transform] arithmetic on imported defineConsts (#1597)', () => {
+    function transformCrossFile(mainSource) {
+      const pluginOpts = {
+        unstable_moduleResolution: { type: 'haste' },
+      };
+
+      const tokens = transformSync(
+        `
+        import * as stylex from '@stylexjs/stylex';
+        export const consts = stylex.defineConsts({
+          A: 26,
+          B: 14,
+          D: 6,
+          gutter: '16px',
+        });
+        export const vars = stylex.defineVars({
+          gap: '8px',
+        });
+        `,
+        {
+          filename: '/src/app/constants.stylex.js',
+          parserOpts: { flow: 'all' },
+          babelrc: false,
+          plugins: [[stylexPlugin, pluginOpts]],
+        },
+      );
+
+      const main = transformSync(mainSource, {
+        filename: '/src/app/main.js',
+        parserOpts: { flow: 'all' },
+        babelrc: false,
+        plugins: [[stylexPlugin, pluginOpts]],
+      });
+
+      return [
+        ...(tokens.metadata.stylex || []),
+        ...(main.metadata.stylex || []),
+      ];
+    }
+
+    test('numeric const arithmetic resolves to calc() with literal values', () => {
+      const metadata = transformCrossFile(`
+        import * as stylex from '@stylexjs/stylex';
+        import { consts } from 'constants.stylex';
+        export const styles = stylex.create({
+          box: {
+            zIndex: consts.A + consts.B - consts.D,
+            opacity: consts.A / 4,
+          },
+        });
+      `);
+
+      const css = stylexPlugin.processStylexRules(metadata, {
+        useLayers: false,
+      });
+      expect(css).toContain('z-index:calc((26 + 14) - 6)');
+      expect(css).toContain('opacity:calc(26 / 4)');
+    });
+
+    test('unit const arithmetic stays as calc() with substituted values', () => {
+      const metadata = transformCrossFile(`
+        import * as stylex from '@stylexjs/stylex';
+        import { consts } from 'constants.stylex';
+        export const styles = stylex.create({
+          box: {
+            paddingTop: consts.gutter * 2,
+          },
+        });
+      `);
+
+      const css = stylexPlugin.processStylexRules(metadata, {
+        useLayers: false,
+      });
+      expect(css).toContain('padding-top:calc(16px * 2)');
+    });
+
+    test('mixed const and defineVars arithmetic keeps the var() in calc()', () => {
+      const metadata = transformCrossFile(`
+        import * as stylex from '@stylexjs/stylex';
+        import { consts, vars } from 'constants.stylex';
+        export const styles = stylex.create({
+          box: {
+            marginTop: consts.A * vars.gap,
+          },
+        });
+      `);
+
+      const css = stylexPlugin.processStylexRules(metadata, {
+        useLayers: false,
+      });
+      expect(css).toMatch(/margin-top:calc\(26 \* var\(--[a-z0-9]+\)\)/);
+    });
+
+    test('Number() wrapped const arithmetic in a local constant resolves to calc()', () => {
+      const metadata = transformCrossFile(`
+        import * as stylex from '@stylexjs/stylex';
+        import { consts } from 'constants.stylex';
+        const PRESENTER_Z_INDEX = Number(consts.A) + 1;
+        export const styles = stylex.create({
+          box: {
+            zIndex: PRESENTER_Z_INDEX,
+          },
+        });
+      `);
+
+      const css = stylexPlugin.processStylexRules(metadata, {
+        useLayers: false,
+      });
+      expect(css).toContain('z-index:calc(26 + 1)');
+    });
+  });
 });
diff --git a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineVars-test.js b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineVars-test.js
index 758c011c0..f953098f0 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineVars-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/transform-stylex-defineVars-test.js
@@ -597,6 +597,20 @@ describe('@stylexjs/babel-plugin', () => {
       `);
     });
 
+    test('arithmetic on same-group references compiles to calc()', () => {
+      const { metadata } = transform(`
+        import * as stylex from '@stylexjs/stylex';
+        export const layout = stylex.defineVars({
+          gap: '8px',
+          doubleGap: () => layout.gap * 2,
+        });
+      `);
+
+      expect(metadata.stylex[0][1].ltr).toContain(
+        '--x1gpkec6:calc(var(--x1kbodq4) * 2)',
+      );
+    });
+
     test('same-group references can point to later keys', () => {
       const { code, metadata } = transform(`
         import * as stylex from '@stylexjs/stylex';
diff --git a/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-create-test.js b/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-create-test.js
index 9748d0d56..75393f47a 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-create-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-create-test.js
@@ -112,7 +112,7 @@ describe('@stylexjs/babel-plugin', () => {
             }
           });
         `);
-        }).toThrow(messages.nonStaticValue('create'));
+        }).toThrow('Referenced constant is not defined.');
       });
 
       /* Style rules */
diff --git a/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-createTheme-test.js b/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-createTheme-test.js
index ca02c5f93..c2ded2759 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-createTheme-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-createTheme-test.js
@@ -66,7 +66,7 @@ describe('@stylexjs/babel-plugin', () => {
           import stylex from 'stylex';
           const variables = stylex.createTheme(genStyles(), {});
         `);
-      }).toThrow(messages.nonStaticValue('createTheme'));
+      }).toThrow('Referenced constant is not defined.');
 
       expect(() => {
         transform(`
@@ -82,7 +82,7 @@ describe('@stylexjs/babel-plugin', () => {
           import stylex from 'stylex';
           const variables = stylex.createTheme({__varGroupHash__: 'x568ih9'}, genStyles());
         `);
-      }).toThrow(messages.nonStaticValue('createTheme'));
+      }).toThrow('Referenced constant is not defined.');
 
       expect(() => {
         transform(`
@@ -102,7 +102,7 @@ describe('@stylexjs/babel-plugin', () => {
             {__varGroupHash__: 'x568ih9', labelColor: 'var(--labelColorHash)'},
             {[labelColor]: 'red',});
         `);
-      }).toThrow(messages.nonStaticValue('createTheme'));
+      }).toThrow('Referenced constant is not defined.');
     });
 
     /* Values */
@@ -139,7 +139,7 @@ describe('@stylexjs/babel-plugin', () => {
             {labelColor: labelColor,}
           );
         `);
-      }).toThrow(messages.nonStaticValue('createTheme'));
+      }).toThrow('Referenced constant is not defined.');
 
       expect(() => {
         transform(`
@@ -149,7 +149,7 @@ describe('@stylexjs/babel-plugin', () => {
             {labelColor: labelColor(),}
           );
         `);
-      }).toThrow(messages.nonStaticValue('createTheme'));
+      }).toThrow('Referenced constant is not defined.');
     });
   });
 });
diff --git a/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-defineConsts-test.js b/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-defineConsts-test.js
index 72204f3c7..0cf7ba886 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-defineConsts-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-defineConsts-test.js
@@ -98,7 +98,7 @@ describe('@stylexjs/babel-plugin', () => {
           import * as stylex from '@stylexjs/stylex';
           export const constants = stylex.defineConsts(genStyles());
         `);
-      }).toThrow(messages.nonStaticValue('defineConsts'));
+      }).toThrow('Referenced constant is not defined.');
     });
 
     test('valid argument: object', () => {
@@ -181,7 +181,7 @@ describe('@stylexjs/babel-plugin', () => {
             [labelColor]: 'red',
           });
         `);
-      }).toThrow(messages.nonStaticValue('defineConsts'));
+      }).toThrow('Referenced constant is not defined.');
     });
 
     /* Values */
@@ -194,7 +194,7 @@ describe('@stylexjs/babel-plugin', () => {
             labelColor: labelColor,
           });
         `);
-      }).toThrow(messages.nonStaticValue('defineConsts'));
+      }).toThrow('Referenced constant is not defined.');
 
       expect(() => {
         transform(`
@@ -203,7 +203,7 @@ describe('@stylexjs/babel-plugin', () => {
             labelColor: labelColor(),
           });
         `);
-      }).toThrow(messages.nonStaticValue('defineConsts'));
+      }).toThrow('Referenced constant is not defined.');
     });
 
     test('valid value: number', () => {
diff --git a/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-defineVars-test.js b/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-defineVars-test.js
index 9a33aeb9e..4157d7260 100644
--- a/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-defineVars-test.js
+++ b/packages/@stylexjs/babel-plugin/__tests__/validation-stylex-defineVars-test.js
@@ -91,7 +91,7 @@ describe('@stylexjs/babel-plugin', () => {
           import * as stylex from '@stylexjs/stylex';
           export const vars = stylex.defineVars(genStyles());
         `);
-      }).toThrow(messages.nonStaticValue('defineVars'));
+      }).toThrow('Referenced constant is not defined.');
     });
 
     test('valid argument: object', () => {
@@ -163,7 +163,7 @@ describe('@stylexjs/babel-plugin', () => {
             [labelColor]: 'red',
           });
         `);
-      }).toThrow(messages.nonStaticValue('defineVars'));
+      }).toThrow('Referenced constant is not defined.');
     });
 
     /* Values */
@@ -176,7 +176,7 @@ describe('@stylexjs/babel-plugin', () => {
             labelColor: labelColor,
           });
         `);
-      }).toThrow(messages.nonStaticValue('defineVars'));
+      }).toThrow('Referenced constant is not defined.');
 
       expect(() => {
         transform(`
@@ -185,7 +185,7 @@ describe('@stylexjs/babel-plugin', () => {
             labelColor: labelColor(),
           });
         `);
-      }).toThrow(messages.nonStaticValue('defineVars'));
+      }).toThrow('Referenced constant is not defined.');
     });
 
     test('valid value: number', () => {
@@ -257,7 +257,7 @@ describe('@stylexjs/babel-plugin', () => {
             textMuted: () => getColor(colors.text),
           });
         `);
-      }).toThrow(messages.nonStaticValue('defineVars'));
+      }).toThrow('Referenced constant is not defined.');
     });
 
     test('valid function value: returns stylex.types', () => {
diff --git a/packages/@stylexjs/babel-plugin/src/shared/utils/transform-value.js b/packages/@stylexjs/babel-plugin/src/shared/utils/transform-value.js
index d9340b265..2c50443ed 100644
--- a/packages/@stylexjs/babel-plugin/src/shared/utils/transform-value.js
+++ b/packages/@stylexjs/babel-plugin/src/shared/utils/transform-value.js
@@ -14,6 +14,11 @@ import normalizeValue from './normalize-value';
 /**
  * Convert a CSS value in JS to the final CSS string value
  */
+// Numbers are rendered into CSS with at most 4 decimal places.
+export function roundForCss(value: number): number {
+  return Math.round(value * 10000) / 10000;
+}
+
 export default function transformValue(
   key: string,
   rawValue: string | number,
@@ -21,7 +26,7 @@ export default function transformValue(
 ): string {
   const value =
     typeof rawValue === 'number'
-      ? String(Math.round(rawValue * 10000) / 10000) + getNumberSuffix(key)
+      ? String(roundForCss(rawValue)) + getNumberSuffix(key)
       : rawValue;
 
   if (
diff --git a/packages/@stylexjs/babel-plugin/src/utils/__tests__/css-calc-test.js b/packages/@stylexjs/babel-plugin/src/utils/__tests__/css-calc-test.js
new file mode 100644
index 000000000..2fcbf6c43
--- /dev/null
+++ b/packages/@stylexjs/babel-plugin/src/utils/__tests__/css-calc-test.js
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import {
+  isCssVarOrCalc,
+  isCalcTerm,
+  buildBinaryCalc,
+  buildUnaryMinusCalc,
+} from '../css-calc';
+
+describe('isCssVarOrCalc', () => {
+  test('matches full-string var() references', () => {
+    expect(isCssVarOrCalc('var(--x568ih9)')).toBe(true);
+    expect(isCssVarOrCalc('var(--foreground-x568ih9)')).toBe(true);
+  });
+
+  test('matches balanced calc() expressions', () => {
+    expect(isCssVarOrCalc('calc(var(--a) + var(--b))')).toBe(true);
+    expect(isCssVarOrCalc('calc((1 + 2) * 3)')).toBe(true);
+  });
+
+  test('rejects partial or compound strings', () => {
+    expect(isCssVarOrCalc('var(--a) var(--b)')).toBe(false);
+    expect(isCssVarOrCalc('calc(1) + calc(2)')).toBe(false);
+    expect(isCssVarOrCalc('solid var(--a)')).toBe(false);
+    expect(isCssVarOrCalc('10px')).toBe(false);
+    expect(isCssVarOrCalc(10)).toBe(false);
+    expect(isCssVarOrCalc(null)).toBe(false);
+  });
+});
+
+describe('isCalcTerm', () => {
+  test('accepts finite numbers', () => {
+    expect(isCalcTerm(10)).toBe(true);
+    expect(isCalcTerm(-0.5)).toBe(true);
+    expect(isCalcTerm(NaN)).toBe(false);
+    expect(isCalcTerm(Infinity)).toBe(false);
+  });
+
+  test('accepts var()/calc() strings', () => {
+    expect(isCalcTerm('var(--x568ih9)')).toBe(true);
+    expect(isCalcTerm('calc(var(--a) + 1)')).toBe(true);
+  });
+
+  test('accepts numeric strings with CSS units', () => {
+    expect(isCalcTerm('10px')).toBe(true);
+    expect(isCalcTerm('1.5rem')).toBe(true);
+    expect(isCalcTerm('50%')).toBe(true);
+    expect(isCalcTerm('-2em')).toBe(true);
+    expect(isCalcTerm('10')).toBe(true);
+  });
+
+  test('rejects non-numeric strings', () => {
+    expect(isCalcTerm('solid ')).toBe(false);
+    expect(isCalcTerm('auto')).toBe(false);
+    expect(isCalcTerm('px')).toBe(false);
+    expect(isCalcTerm('10px 20px')).toBe(false);
+  });
+});
+
+describe('buildBinaryCalc', () => {
+  test('builds calc() from var operands', () => {
+    expect(buildBinaryCalc('var(--a)', '+', 'var(--b)')).toBe(
+      'calc(var(--a) + var(--b))',
+    );
+  });
+
+  test('builds calc() from mixed operands', () => {
+    expect(buildBinaryCalc('var(--a)', '*', 2)).toBe('calc(var(--a) * 2)');
+    expect(buildBinaryCalc(4, '-', 'var(--a)')).toBe('calc(4 - var(--a))');
+    expect(buildBinaryCalc('var(--a)', '+', '10px')).toBe(
+      'calc(var(--a) + 10px)',
+    );
+  });
+
+  test('rounds numeric operands to 4 decimals', () => {
+    expect(buildBinaryCalc(1 / 3, '*', 'var(--a)')).toBe(
+      'calc(0.3333 * var(--a))',
+    );
+  });
+
+  test('strips nested calc() operands down to parens', () => {
+    expect(buildBinaryCalc('calc(var(--a) + var(--b))', '*', 2)).toBe(
+      'calc((var(--a) + var(--b)) * 2)',
+    );
+  });
+});
+
+describe('buildUnaryMinusCalc', () => {
+  test('negates a var reference', () => {
+    expect(buildUnaryMinusCalc('var(--a)')).toBe('calc(-1 * var(--a))');
+  });
+
+  test('negates a calc expression', () => {
+    expect(buildUnaryMinusCalc('calc(var(--a) + 1)')).toBe(
+      'calc(-1 * (var(--a) + 1))',
+    );
+  });
+});
diff --git a/packages/@stylexjs/babel-plugin/src/utils/css-calc.js b/packages/@stylexjs/babel-plugin/src/utils/css-calc.js
new file mode 100644
index 000000000..2a77f0201
--- /dev/null
+++ b/packages/@stylexjs/babel-plugin/src/utils/css-calc.js
@@ -0,0 +1,296 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import parser from 'postcss-value-parser';
+import { roundForCss } from '../shared/utils/transform-value';
+import * as errMsgs from './evaluation-errors';
+
+// Custom property names may contain any character except ')' — including
+// unicode identifiers, which `defineVars`/`defineConsts` pass through
+// verbatim for keys that start with '--'.
+const CSS_VAR_PATTERN = /^var\(--[^)]+\)$/;
+
+const CSS_UNITS: Set<string> = new Set([
+  // <length>
+  'px',
+  'em',
+  'rem',
+  'ex',
+  'ch',
+  'cap',
+  'ic',
+  'lh',
+  'rlh',
+  'vw',
+  'vh',
+  'vmin',
+  'vmax',
+  'vb',
+  'vi',
+  'svw',
+  'svh',
+  'lvw',
+  'lvh',
+  'dvw',
+  'dvh',
+  'cm',
+  'mm',
+  'q',
+  'in',
+  'pt',
+  'pc',
+  // <angle>
+  'deg',
+  'grad',
+  'rad',
+  'turn',
+  // <time>
+  's',
+  'ms',
+  // <frequency>
+  'hz',
+  'khz',
+  // <resolution>
+  'dpi',
+  'dpcm',
+  'dppx',
+  'x',
+  // grid
+  'fr',
+  // <percentage>
+  '%',
+]);
+
+function isBalancedCalc(value: string): boolean {
+  if (!value.startsWith('calc(') || !value.endsWith(')')) {
+    return false;
+  }
+  let depth = 0;
+  for (let i = 4; i < value.length; i++) {
+    const char = value[i];
+    if (char === '(') {
+      depth++;
+    } else if (char === ')') {
+      depth--;
+      // The opening paren of `calc(` must close at the very last character,
+      // so strings like `calc(1) + calc(2)` are not a single calc term.
+      if (depth === 0) {
+        return i === value.length - 1;
+      }
+    }
+  }
+  return false;
+}
+
+export function isCssVarOrCalc(value: mixed): implies value is string {
+  return (
+    typeof value === 'string' &&
+    (CSS_VAR_PATTERN.test(value) || isBalancedCalc(value))
+  );
+}
+
+// A finite number or a var()/calc() reference. The only operand kinds
+// allowed for '+', where a unit string would be ambiguous with the
+// space-separated list concatenation that `+` also expresses.
+export function isStrictCalcTerm(
+  value: mixed,
+): implies value is number | string {
+  if (typeof value === 'number') {
+    return Number.isFinite(value);
+  }
+  return isCssVarOrCalc(value);
+}
+
+// A strict calc term, or a numeric string with a known CSS unit ('10px',
+// '1.5rem', '50%'). Used for '-', '*', and '/', which have no
+// string-concatenation reading to preserve.
+export function isCalcTerm(value: mixed): implies value is number | string {
+  if (isStrictCalcTerm(value)) {
+    return true;
+  }
+  if (typeof value !== 'string') {
+    return false;
+  }
+  const parsed = parser.unit(value);
+  if (parsed === false || parsed.number === '') {
+    return false;
+  }
+  const unit = parsed.unit.toLowerCase();
+  return unit === '' || CSS_UNITS.has(unit);
+}
+
+function calcOperandToString(value: number | string): string {
+  if (typeof value === 'number') {
+    return String(roundForCss(value));
+  }
+  if (isBalancedCalc(value)) {
+    // Strip nested `calc(...)` down to plain parens to keep the output flat.
+    return `(${value.slice(5, -1)})`;
+  }
+  return value;
+}
+
+export function buildBinaryCalc(
+  left: number | string,
+  operator: string,
+  right: number | string,
+): string {
+  return `calc(${calcOperandToString(left)} ${operator} ${calcOperandToString(right)})`;
+}
+
+export function buildUnaryMinusCalc(arg: number | string): string {
+  return `calc(-1 * ${calcOperandToString(arg)})`;
+}
+
+export type CssTokenEvaluationResult =
+  | { type: 'unhandled' }
+  | { type: 'value', value: mixed }
+  | { type: 'deopt', reason: string };
+
+function value(value: mixed): CssTokenEvaluationResult {
+  return { type: 'value', value };
+}
+
+function deopt(reason: string): CssTokenEvaluationResult {
+  return { type: 'deopt', reason };
+}
+
+const unhandled: CssTokenEvaluationResult = { type: 'unhandled' };
+
+function isSeparatedCssTokenConcat(left: mixed, right: mixed): boolean {
+  const leftIsRef = isCssVarOrCalc(left);
+  const rightIsRef = isCssVarOrCalc(right);
+  if (!leftIsRef && !rightIsRef) {
+    return true;
+  }
+
+  const other = leftIsRef ? right : left;
+  if (typeof other !== 'string') {
+    return false;
+  }
+  if (other === '') {
+    return true;
+  }
+  return leftIsRef ? /^[\s,)]/.test(other) : /[\s,(]$/.test(other);
+}
+
+export function evaluateCssTokenConcat(
+  left: mixed,
+  right: mixed,
+): CssTokenEvaluationResult {
+  if (!isSeparatedCssTokenConcat(left, right)) {
+    return deopt(errMsgs.INVALID_CSS_VAR_CONCAT);
+  }
+  return value(String(left) + String(right));
+}
+
+export function evaluateCssTokenUnary(
+  operator: string,
+  arg: mixed,
+): CssTokenEvaluationResult {
+  if (!isCssVarOrCalc(arg)) {
+    return unhandled;
+  }
+
+  switch (operator) {
+    case '-':
+      return value(buildUnaryMinusCalc(arg));
+    case '!':
+    case '+':
+    case '~':
+      return deopt(errMsgs.UNSUPPORTED_CSS_VAR_OPERATOR(operator));
+    default:
+      return unhandled;
+  }
+}
+
+export function evaluateCssTokenBinary(
+  operator: string,
+  left: mixed,
+  right: mixed,
+): CssTokenEvaluationResult {
+  if (!isCssVarOrCalc(left) && !isCssVarOrCalc(right)) {
+    return unhandled;
+  }
+
+  switch (operator) {
+    case '+':
+      // Only numbers and var()/calc() refs become calc() addition. A unit
+      // string operand is excluded because `+` on strings also expresses list
+      // concatenation, and `token + '4px'` vs `token + ' 4px'` must not
+      // silently mean different things.
+      if (isStrictCalcTerm(left) && isStrictCalcTerm(right)) {
+        return value(buildBinaryCalc(left, operator, right));
+      }
+      return evaluateCssTokenConcat(left, right);
+    case '-':
+    case '*':
+    case '/':
+      if (isCalcTerm(left) && isCalcTerm(right)) {
+        return value(buildBinaryCalc(left, operator, right));
+      }
+      return deopt(errMsgs.INVALID_CALC_OPERAND(operator));
+    case '==':
+      if (left == null || right == null) {
+        return value(left == right); // eslint-disable-line eqeqeq
+      }
+      return deopt(errMsgs.UNSUPPORTED_CSS_VAR_COMPARISON(operator));
+    case '!=':
+      if (left == null || right == null) {
+        return value(left != right); // eslint-disable-line eqeqeq
+      }
+      return deopt(errMsgs.UNSUPPORTED_CSS_VAR_COMPARISON(operator));
+    case '===':
+      if (left == null || right == null) {
+        return value(left === right);
+      }
+      return deopt(errMsgs.UNSUPPORTED_CSS_VAR_COMPARISON(operator));
+    case '!==':
+      if (left == null || right == null) {
+        return value(left !== right);
+      }
+      return deopt(errMsgs.UNSUPPORTED_CSS_VAR_COMPARISON(operator));
+    case '<':
+    case '>':
+    case '<=':
+    case '>=':
+      return deopt(errMsgs.UNSUPPORTED_CSS_VAR_COMPARISON(operator));
+    default:
+      return deopt(errMsgs.UNSUPPORTED_CSS_VAR_OPERATOR(operator));
+  }
+}
+
+export function evaluateCssTokenCall(
+  calleeName: ?string,
+  args: $ReadOnlyArray<mixed>,
+): CssTokenEvaluationResult {
+  const cssArgIndex = args.findIndex((arg) => isCssVarOrCalc(arg));
+  if (calleeName == null || cssArgIndex === -1) {
+    return unhandled;
+  }
+
+  if (calleeName === 'Number' && cssArgIndex === 0 && args.length > 0) {
+    return value(args[0]);
+  }
+
+  if (calleeName === 'String') {
+    return unhandled;
+  }
+
+  return deopt(errMsgs.UNSUPPORTED_CSS_VAR_FUNCTION(calleeName));
+}
+
+export function evaluateCssTokenObjectKey(
+  key: mixed,
+): CssTokenEvaluationResult {
+  if (typeof key === 'string' && key.startsWith('calc(')) {
+    return deopt(errMsgs.INVALID_CALC_KEY);
+  }
+  return unhandled;
+}
diff --git a/packages/@stylexjs/babel-plugin/src/utils/evaluate-path.js b/packages/@stylexjs/babel-plugin/src/utils/evaluate-path.js
index e17cf2ff8..8e466065d 100644
--- a/packages/@stylexjs/babel-plugin/src/utils/evaluate-path.js
+++ b/packages/@stylexjs/babel-plugin/src/utils/evaluate-path.js
@@ -28,7 +28,16 @@ import traverse from '@babel/traverse';
 import * as t from '@babel/types';
 import StateManager from './state-manager';
 import { utils } from '../shared';
+import type { EvaluationErrorKind } from './evaluation-errors';
 import * as errMsgs from './evaluation-errors';
+import {
+  type CssTokenEvaluationResult,
+  evaluateCssTokenBinary,
+  evaluateCssTokenCall,
+  evaluateCssTokenConcat,
+  evaluateCssTokenObjectKey,
+  evaluateCssTokenUnary,
+} from './css-calc';
 import fs from 'node:fs';
 
 // This file contains Babels metainterpreter that can evaluate static code.
@@ -141,6 +150,7 @@ type State = {
   confident: boolean,
   deoptPath: NodePath<> | null,
   deoptReason?: string,
+  deoptReasonKind?: EvaluationErrorKind,
   seen: Map<t.Node, Result>,
   addedImports: Set<string>,
   functions: FunctionConfig,
@@ -155,6 +165,7 @@ type Result =
   | {
       resolved: false,
       reason: string,
+      reasonKind?: EvaluationErrorKind,
     };
 
 type VarGroupProxyOptions = {
@@ -240,11 +251,68 @@ export function createVarGroupProxy({
 /**
  * Deopts the evaluation
  */
-function deopt(path: NodePath<>, state: State, reason: string): void {
+function deopt(
+  path: NodePath<>,
+  state: State,
+  reason: string,
+  reasonKind?: EvaluationErrorKind,
+): void {
   if (!state.confident) return;
   state.deoptPath = path;
   state.confident = false;
   state.deoptReason = reason;
+  state.deoptReasonKind = reasonKind;
+}
+
+function applyCssTokenEvaluation(
+  result: CssTokenEvaluationResult,
+  path: NodePath<>,
+  state: State,
+): mixed {
+  if (result.type === 'value') {
+    return result.value;
+  }
+  if (result.type === 'deopt') {
+    return deopt(path, state, result.reason, errMsgs.CSS_TOKEN_ERROR);
+  }
+  return undefined;
+}
+
+type EvaluationDeopt = {
+  +deopt?: null | NodePath<>,
+  +reason?: string,
+  +reasonKind?: EvaluationErrorKind,
+  ...
+};
+
+function deoptFromEvaluation(result: EvaluationDeopt, state: State): void {
+  if (result.deopt != null) {
+    deopt(
+      result.deopt,
+      state,
+      result.reason ?? 'unknown error',
+      result.reasonKind,
+    );
+  }
+}
+
+type StateDeopt = {
+  +deoptReason?: string,
+  +deoptReasonKind?: EvaluationErrorKind,
+  ...
+};
+
+function deoptFromState(
+  path: NodePath<>,
+  state: State,
+  deoptState: StateDeopt,
+): void {
+  deopt(
+    path,
+    state,
+    deoptState.deoptReason ?? 'unknown error',
+    deoptState.deoptReasonKind,
+  );
 }
 
 function evaluateImportedFile(
@@ -339,7 +407,7 @@ function evaluateCached(path: NodePath<>, state: State): any {
     if (existing.resolved) {
       return existing.value;
     } else {
-      deopt(path, state, existing.reason);
+      deopt(path, state, existing.reason, existing.reasonKind);
       return;
     }
   } else {
@@ -707,6 +775,10 @@ function _evaluate(path: NodePath<>, state: State): any {
 
     const arg = evaluateCached(argument, state);
     if (!state.confident) return;
+    const cssTokenResult = evaluateCssTokenUnary(path.node.operator, arg);
+    if (cssTokenResult.type !== 'unhandled') {
+      return applyCssTokenEvaluation(cssTokenResult, path, state);
+    }
     switch (path.node.operator) {
       case '!':
         return !arg;
@@ -739,8 +811,7 @@ function _evaluate(path: NodePath<>, state: State): any {
       if (elemValue.confident) {
         arr.push(elemValue.value);
       } else {
-        elemValue.deopt &&
-          deopt(elemValue.deopt, state, elemValue.reason ?? 'unknown error');
+        deoptFromEvaluation(elemValue, state);
         return;
       }
     }
@@ -759,7 +830,7 @@ function _evaluate(path: NodePath<>, state: State): any {
       if (prop.isSpreadElement()) {
         const spreadExpression = evaluateCached(prop.get('argument'), state);
         if (!state.confident) {
-          return deopt(prop, state, state.deoptReason ?? 'unknown error');
+          return deoptFromState(prop, state, state);
         }
         // $FlowFixMe[unsafe-object-assign]
         Object.assign(obj, spreadExpression);
@@ -769,24 +840,22 @@ function _evaluate(path: NodePath<>, state: State): any {
         const keyPath: NodePath<t.ObjectProperty['key']> = prop.get('key');
         let key: string | number | boolean;
         if (prop.node.computed) {
-          const {
-            confident,
-            deopt: resultDeopt,
-            reason: deoptReason,
-            value,
-          } = evaluate(
+          const result = evaluate(
             keyPath,
             state.traversalState,
             state.functions,
             state.seen,
           );
 
-          if (!confident) {
-            resultDeopt &&
-              deopt(resultDeopt, state, deoptReason ?? 'unknown error');
+          if (!result.confident) {
+            deoptFromEvaluation(result, state);
             return;
           }
-          key = value;
+          const cssTokenResult = evaluateCssTokenObjectKey(result.value);
+          if (cssTokenResult.type !== 'unhandled') {
+            return applyCssTokenEvaluation(cssTokenResult, keyPath, state);
+          }
+          key = result.value;
         } else if (keyPath.isIdentifier()) {
           key = keyPath.node.name;
         } else {
@@ -802,8 +871,7 @@ function _evaluate(path: NodePath<>, state: State): any {
           state.seen,
         );
         if (!value.confident) {
-          value.deopt &&
-            deopt(value.deopt, state, value.reason ?? 'unknown error');
+          deoptFromEvaluation(value, state);
           return;
         }
         value = value.value;
@@ -838,11 +906,11 @@ function _evaluate(path: NodePath<>, state: State): any {
           return left || right;
         }
         if (!leftConfident) {
-          deopt(leftPath, state, stateForLeft.deoptReason ?? 'unknown error');
+          deoptFromState(leftPath, state, stateForLeft);
           return;
         }
         if (!rightConfident) {
-          deopt(rightPath, state, stateForRight.deoptReason ?? 'unknown error');
+          deoptFromState(rightPath, state, stateForRight);
           return;
         }
 
@@ -854,11 +922,11 @@ function _evaluate(path: NodePath<>, state: State): any {
           return left && right;
         }
         if (!leftConfident) {
-          deopt(leftPath, state, stateForLeft.deoptReason ?? 'unknown error');
+          deoptFromState(leftPath, state, stateForLeft);
           return;
         }
         if (!rightConfident) {
-          deopt(rightPath, state, stateForRight.deoptReason ?? 'unknown error');
+          deoptFromState(rightPath, state, stateForRight);
           return;
         }
 
@@ -870,11 +938,11 @@ function _evaluate(path: NodePath<>, state: State): any {
           return left ?? right;
         }
         if (!leftConfident) {
-          deopt(leftPath, state, stateForLeft.deoptReason ?? 'unknown error');
+          deoptFromState(leftPath, state, stateForLeft);
           return;
         }
         if (!rightConfident) {
-          deopt(rightPath, state, stateForRight.deoptReason ?? 'unknown error');
+          deoptFromState(rightPath, state, stateForRight);
           return;
         }
 
@@ -892,6 +960,15 @@ function _evaluate(path: NodePath<>, state: State): any {
     const right = evaluateCached(path.get('right'), state);
     if (!state.confident) return;
 
+    const cssTokenResult = evaluateCssTokenBinary(
+      path.node.operator,
+      left,
+      right,
+    );
+    if (cssTokenResult.type !== 'unhandled') {
+      return applyCssTokenEvaluation(cssTokenResult, path, state);
+    }
+
     switch (path.node.operator) {
       case '-':
         return left - right;
@@ -946,6 +1023,7 @@ function _evaluate(path: NodePath<>, state: State): any {
     const callee = path.get('callee');
     let context;
     let func;
+    let globalCalleeName: null | string = null;
 
     // Number(1);
     if (
@@ -953,6 +1031,7 @@ function _evaluate(path: NodePath<>, state: State): any {
       !path.scope.getBinding(callee.node.name) &&
       isValidCallee(callee.node.name)
     ) {
+      globalCalleeName = callee.node.name;
       func = global[callee.node.name];
     } else if (
       callee.isIdentifier() &&
@@ -978,6 +1057,7 @@ function _evaluate(path: NodePath<>, state: State): any {
           isValidCallee(object.node.name) &&
           !isInvalidMethod(property.node.name)
         ) {
+          globalCalleeName = `${object.node.name}.${property.node.name}`;
           context = global[object.node.name];
           // @ts-expect-error property may not exist in context object
           func = context[property.node.name];
@@ -1043,6 +1123,11 @@ function _evaluate(path: NodePath<>, state: State): any {
           );
         if (!state.confident) return;
 
+        const cssTokenResult = evaluateCssTokenCall(globalCalleeName, args);
+        if (cssTokenResult.type !== 'unhandled') {
+          return applyCssTokenEvaluation(cssTokenResult, path, state);
+        }
+
         if (func.fn) {
           return func.fn.apply(context, args);
         } else {
@@ -1063,6 +1148,15 @@ function evaluateQuasis(
 ) {
   let str = '';
 
+  const append = (nextValue: mixed, nextPath: NodePath<>): void => {
+    const result = evaluateCssTokenConcat(str, nextValue);
+    if (result.type === 'deopt') {
+      deopt(nextPath, state, result.reason, errMsgs.CSS_TOKEN_ERROR);
+    } else if (result.type === 'value') {
+      str = String(result.value);
+    }
+  };
+
   let i = 0;
   const exprs: $ReadOnlyArray<NodePath<>> = path.isTemplateLiteral()
     ? path.get('expressions')
@@ -1081,11 +1175,16 @@ function evaluateQuasis(
     if (!state.confident) break;
 
     // add on element
-    str += raw ? elem.value.raw : elem.value.cooked;
+    append(raw ? elem.value.raw : elem.value.cooked, path);
+    if (!state.confident) break;
 
     // add on interpolated expression if it's present
     const expr = exprs[i++];
-    if (expr) str += String(evaluateCached(expr, state));
+    if (expr) {
+      const exprValue = evaluateCached(expr, state);
+      if (!state.confident) break;
+      append(exprValue, expr);
+    }
   }
 
   if (!state.confident) return;
@@ -1127,6 +1226,7 @@ export function evaluate(
   value: any,
   deopt?: null | NodePath<>,
   reason?: string,
+  reasonKind?: EvaluationErrorKind,
 }> {
   const addedImports = importsForState.get(traversalState) ?? new Set();
   importsForState.set(traversalState, addedImports);
@@ -1146,6 +1246,7 @@ export function evaluate(
     confident: state.confident,
     deopt: state.deoptPath,
     reason: state.deoptReason,
+    reasonKind: state.deoptReasonKind,
     value: value,
   };
 }
diff --git a/packages/@stylexjs/babel-plugin/src/utils/evaluation-errors.js b/packages/@stylexjs/babel-plugin/src/utils/evaluation-errors.js
index b5040d97f..e898f8e59 100644
--- a/packages/@stylexjs/babel-plugin/src/utils/evaluation-errors.js
+++ b/packages/@stylexjs/babel-plugin/src/utils/evaluation-errors.js
@@ -52,6 +52,42 @@ export const UNDEFINED_CONST = 'Referenced constant is not defined.';
 export const UNSUPPORTED_OPERATOR = (op: string): string =>
   `Unsupported operator: ${op}\n\n`;
 
+export type EvaluationErrorKind = 'css-token';
+
+export const CSS_TOKEN_ERROR: EvaluationErrorKind = 'css-token';
+
+export const UNSUPPORTED_CSS_VAR_OPERATOR = (op: string): string =>
+  `The "${op}" operator cannot be applied to a StyleX variable or constant.
+Only +, -, * and / are supported and compile to a CSS calc() expression.\n\n`;
+
+export const UNSUPPORTED_CSS_VAR_COMPARISON = (op: string): string =>
+  `A StyleX variable or constant cannot be compared with "${op}" at compile time.
+Its value is a CSS variable reference that is only resolved in the browser.
+Branch on a plain JavaScript value instead. (Comparing against null or
+undefined is allowed.)\n\n`;
+
+export const UNSUPPORTED_CSS_VAR_FUNCTION = (fnName: string): string =>
+  `The "${fnName}" function cannot be applied to a StyleX variable or constant at compile time.
+Its value is a CSS variable reference that is only resolved in the browser.
+Use CSS calc() arithmetic directly instead.\n\n`;
+
+export const INVALID_CALC_KEY =
+  'Arithmetic on a StyleX variable or constant cannot be used as a style property key.\n\n';
+
+export const INVALID_CALC_OPERAND = (op: string): string =>
+  `Arithmetic ("${op}") on a StyleX variable or constant requires the other operand
+to be a number, a numeric string with a CSS unit (e.g. '10px'), or another
+variable or constant, so it can compile to a CSS calc() expression.\n\n`;
+
+export const INVALID_CSS_VAR_CONCAT = `Joining a StyleX variable or constant directly to other text with "+" would
+produce invalid CSS. For arithmetic, use numbers or other variables or
+constants (compiles to a CSS calc() expression). For a list of values,
+include an explicit separator, e.g. 'solid ' + token.\n\n`;
+
+export function isCssTokenErrorKind(reasonKind: ?EvaluationErrorKind): boolean {
+  return reasonKind === CSS_TOKEN_ERROR;
+}
+
 export const OBJECT_METHOD = 'Unsupported object method.\n\n';
 
 export const UNSUPPORTED_EXPRESSION = (type: string): string =>
diff --git a/packages/@stylexjs/babel-plugin/src/visitors/parse-stylex-create-arg.js b/packages/@stylexjs/babel-plugin/src/visitors/parse-stylex-create-arg.js
index 7ae710d97..790e47517 100644
--- a/packages/@stylexjs/babel-plugin/src/visitors/parse-stylex-create-arg.js
+++ b/packages/@stylexjs/babel-plugin/src/visitors/parse-stylex-create-arg.js
@@ -10,10 +10,13 @@
 /* eslint-disable no-unused-vars */
 import type { NodePath } from '@babel/traverse';
 import type { FunctionConfig } from '../utils/evaluate-path';
+import type { EvaluationErrorKind } from '../utils/evaluation-errors';
 
 import * as t from '@babel/types';
 import StateManager from '../utils/state-manager';
 import { evaluate } from '../utils/evaluate-path';
+import { isCssTokenErrorKind } from '../utils/evaluation-errors';
+import { evaluateCssTokenObjectKey } from '../utils/css-calc';
 import { create, utils } from '../shared';
 import { messages } from '../shared';
 import {
@@ -47,6 +50,7 @@ export function evaluateStyleXCreateArg(
   value: any,
   deopt?: null | NodePath<>,
   reason?: string,
+  reasonKind?: EvaluationErrorKind,
   fns?: DynamicFns,
 }> {
   if (!path.isObjectExpression()) {
@@ -63,7 +67,13 @@ export function evaluateStyleXCreateArg(
     const objPropPath: NodePath<t.ObjectProperty> = prop;
     const keyResult = evaluateObjKey(objPropPath, traversalState, functions);
     if (!keyResult.confident) {
-      return { confident: false, deopt: keyResult.deopt, value: null };
+      return {
+        confident: false,
+        deopt: keyResult.deopt,
+        reason: keyResult.reason,
+        reasonKind: keyResult.reasonKind,
+        value: null,
+      };
     }
     const key = keyResult.value;
 
@@ -105,8 +115,8 @@ export function evaluateStyleXCreateArg(
     );
 
     if (!evalResult.confident) {
-      const { confident, value: v, deopt } = evalResult;
-      return { confident, value: v, deopt };
+      const { confident, value: v, deopt, reason, reasonKind } = evalResult;
+      return { confident, value: v, deopt, reason, reasonKind };
     }
     const { value: v, inlineStyles } = evalResult;
     value[key] = v;
@@ -126,6 +136,7 @@ function evaluatePartialObjectRecursively(
   value: any,
   deopt?: null | NodePath<>,
   reason?: string,
+  reasonKind?: EvaluationErrorKind,
   inlineStyles?: $ReadOnly<TInlineStyles>,
 }> {
   const obj: { [string]: mixed } = {};
@@ -149,7 +160,13 @@ function evaluatePartialObjectRecursively(
     if (prop.isObjectProperty()) {
       const keyResult = evaluateObjKey(prop, traversalState, functions);
       if (!keyResult.confident) {
-        return { confident: false, deopt: keyResult.deopt, value: null };
+        return {
+          confident: false,
+          deopt: keyResult.deopt,
+          reason: keyResult.reason,
+          reasonKind: keyResult.reasonKind,
+          value: null,
+        };
       }
       let key = keyResult.value;
 
@@ -172,7 +189,13 @@ function evaluatePartialObjectRecursively(
           [...keyPath, key],
         );
         if (!result.confident) {
-          return { confident: false, deopt: result.deopt, value: null };
+          return {
+            confident: false,
+            deopt: result.deopt,
+            reason: result.reason,
+            reasonKind: result.reasonKind,
+            value: null,
+          };
         }
         obj[key] = result.value;
         // $FlowFixMe[unsafe-object-assign]
@@ -180,6 +203,16 @@ function evaluatePartialObjectRecursively(
       } else {
         const result = evaluate(valuePath, traversalState, functions);
         if (!result.confident) {
+          // A misused token reference (unsupported operator or operand) is a
+          // hard error in static styles; erroring here too keeps dynamic
+          // styles from silently degrading to runtime evaluation against the
+          // literal 'var(--hash)' string.
+          if (isCssTokenErrorKind(result.reasonKind)) {
+            throw (result.deopt ?? valuePath).buildCodeFrameError(
+              result.reason ?? 'unknown error',
+              SyntaxError,
+            );
+          }
           const fullKeyPath = [...keyPath, key];
           const varName =
             '--x-' +
@@ -257,7 +290,12 @@ function evaluatePartialObjectRecursively(
 
 type KeyResult =
   | { confident: true, value: string }
-  | { confident: false, deopt?: null | NodePath<> };
+  | {
+      confident: false,
+      deopt?: null | NodePath<>,
+      reason?: string,
+      reasonKind?: EvaluationErrorKind,
+    };
 
 function evaluateObjKey(
   prop: NodePath<t.ObjectProperty>,
@@ -269,7 +307,16 @@ function evaluateObjKey(
   if ((prop.node as t.ObjectProperty).computed) {
     const result = evaluate(keyPath, traversalState, functions);
     if (!result.confident) {
-      return { confident: false, deopt: result.deopt };
+      return {
+        confident: false,
+        deopt: result.deopt,
+        reason: result.reason,
+        reasonKind: result.reasonKind,
+      };
+    }
+    const keyEvaluation = evaluateCssTokenObjectKey(result.value);
+    if (keyEvaluation.type === 'deopt') {
+      throw keyPath.buildCodeFrameError(keyEvaluation.reason, SyntaxError);
     }
     key = result.value;
   } else if (keyPath.isIdentifier()) {
diff --git a/packages/@stylexjs/babel-plugin/src/visitors/stylex-create-theme-nested.js b/packages/@stylexjs/babel-plugin/src/visitors/stylex-create-theme-nested.js
index e044ff58f..e881e21da 100644
--- a/packages/@stylexjs/babel-plugin/src/visitors/stylex-create-theme-nested.js
+++ b/packages/@stylexjs/babel-plugin/src/visitors/stylex-create-theme-nested.js
@@ -19,7 +19,12 @@ import {
 import { convertObjectToAST } from '../utils/js-to-ast';
 import { evaluate } from '../utils/evaluate-path';
 import path from 'node:path';
-import { isCallTo, validateDefineCall, buildEvalConfig } from './visitor-utils';
+import {
+  isCallTo,
+  validateDefineCall,
+  buildEvalConfig,
+  evaluationError,
+} from './visitor-utils';
 
 /// Transforms `stylex.unstable_createThemeNested` calls.
 /// Validates, evaluates both arguments, delegates to the shared
@@ -61,11 +66,18 @@ export default function transformStyleXCreateThemeNested(
   const secondArg = args[1];
 
   // Evaluate first arg (the defineVarsNested result) without eval config
-  const { confident: confident1, value: variables } = evaluate(firstArg, state);
+  const {
+    confident: confident1,
+    value: variables,
+    reason: reason1,
+    deopt: deopt1,
+  } = evaluate(firstArg, state);
   if (!confident1) {
-    throw callExpressionPath.buildCodeFrameError(
+    throw evaluationError(
+      deopt1,
+      reason1,
+      callExpressionPath,
       messages.nonStaticValue('unstable_createThemeNested'),
-      SyntaxError,
     );
   }
 
@@ -87,15 +99,18 @@ export default function transformStyleXCreateThemeNested(
     otherInjectedCSSRules,
   );
 
-  const { confident: confident2, value: overrides } = evaluate(
-    secondArg,
-    state,
-    { identifiers, memberExpressions },
-  );
+  const {
+    confident: confident2,
+    value: overrides,
+    reason: reason2,
+    deopt: deopt2,
+  } = evaluate(secondArg, state, { identifiers, memberExpressions });
   if (!confident2) {
-    throw callExpressionPath.buildCodeFrameError(
+    throw evaluationError(
+      deopt2,
+      reason2,
+      callExpressionPath,
       messages.nonStaticValue('unstable_createThemeNested'),
-      SyntaxError,
     );
   }
   if (typeof overrides !== 'object' || overrides == null) {
diff --git a/packages/@stylexjs/babel-plugin/src/visitors/stylex-create-theme.js b/packages/@stylexjs/babel-plugin/src/visitors/stylex-create-theme.js
index e6504eb0f..f0f125976 100644
--- a/packages/@stylexjs/babel-plugin/src/visitors/stylex-create-theme.js
+++ b/packages/@stylexjs/babel-plugin/src/visitors/stylex-create-theme.js
@@ -22,6 +22,7 @@ import {
 } from '../shared';
 import { convertObjectToAST } from '../utils/js-to-ast';
 import { evaluate } from '../utils/evaluate-path';
+import { evaluationError } from './visitor-utils';
 import path from 'node:path';
 
 /// This function looks for `stylex.createTheme` calls and transforms them.
@@ -68,14 +69,18 @@ export default function transformStyleXCreateTheme(
     const firstArg = args[0];
     const secondArg = args[1];
 
-    const { confident: confident1, value: variables } = evaluate(
-      firstArg,
-      state,
-    );
+    const {
+      confident: confident1,
+      value: variables,
+      reason: reason1,
+      deopt: deopt1,
+    } = evaluate(firstArg, state);
     if (!confident1) {
-      throw callExpressionPath.buildCodeFrameError(
+      throw evaluationError(
+        deopt1,
+        reason1,
+        callExpressionPath,
         messages.nonStaticValue('createTheme'),
-        SyntaxError,
       );
     }
 
@@ -143,18 +148,21 @@ export default function transformStyleXCreateTheme(
 
     state.applyStylexEnv(identifiers);
 
-    const { confident: confident2, value: overrides } = evaluate(
-      secondArg,
-      state,
-      {
-        identifiers,
-        memberExpressions,
-      },
-    );
+    const {
+      confident: confident2,
+      value: overrides,
+      reason: reason2,
+      deopt: deopt2,
+    } = evaluate(secondArg, state, {
+      identifiers,
+      memberExpressions,
+    });
     if (!confident2) {
-      throw callExpressionPath.buildCodeFrameError(
+      throw evaluationError(
+        deopt2,
+        reason2,
+        callExpressionPath,
         messages.nonStaticValue('createTheme'),
-        SyntaxError,
       );
     }
     if (typeof overrides !== 'object' || overrides == null) {
diff --git a/packages/@stylexjs/babel-plugin/src/visitors/stylex-create.js b/packages/@stylexjs/babel-plugin/src/visitors/stylex-create.js
index 549c781e5..50dbda9c2 100644
--- a/packages/@stylexjs/babel-plugin/src/visitors/stylex-create.js
+++ b/packages/@stylexjs/babel-plugin/src/visitors/stylex-create.js
@@ -29,6 +29,7 @@ import {
 import { convertObjectToAST } from '../utils/js-to-ast';
 import { messages } from '../shared';
 import { evaluateStyleXCreateArg } from './parse-stylex-create-arg';
+import { evaluationError } from './visitor-utils';
 import flatMapExpandedShorthands from '../shared/preprocess-rules';
 import { hoistExpression, pathReplaceHoisted } from '../utils/ast-helpers';
 
@@ -217,9 +218,11 @@ export default function transformStyleXCreate(
     );
 
     if (!confident) {
-      throw (deopt ?? path).buildCodeFrameError(
-        reason ?? messages.nonStaticValue('create'),
-        SyntaxError,
+      throw evaluationError(
+        deopt,
+        reason,
+        path,
+        messages.nonStaticValue('create'),
       );
     }
     const plainObject = value;
diff --git a/packages/@stylexjs/babel-plugin/src/visitors/stylex-define-consts-nested.js b/packages/@stylexjs/babel-plugin/src/visitors/stylex-define-consts-nested.js
index 3f9bceb1f..4340cd8e3 100644
--- a/packages/@stylexjs/babel-plugin/src/visitors/stylex-define-consts-nested.js
+++ b/packages/@stylexjs/babel-plugin/src/visitors/stylex-define-consts-nested.js
@@ -19,7 +19,7 @@ import {
 } from '../shared';
 import { convertObjectToAST } from '../utils/js-to-ast';
 import StateManager from '../utils/state-manager';
-import { isCallTo, validateDefineCall } from './visitor-utils';
+import { isCallTo, validateDefineCall, evaluationError } from './visitor-utils';
 
 /// Transforms `stylex.unstable_defineConstsNested` calls.
 /// Validates, evaluates the argument statically (with imports disabled),
@@ -61,11 +61,17 @@ export default function transformStyleXDefineConstsNested(
   };
   state.applyStylexEnv(evaluatePathFnConfig.identifiers);
 
-  const { confident, value } = evaluate(firstArg, state, evaluatePathFnConfig);
+  const { confident, value, reason, deopt } = evaluate(
+    firstArg,
+    state,
+    evaluatePathFnConfig,
+  );
   if (!confident) {
-    throw callExpressionPath.buildCodeFrameError(
+    throw evaluationError(
+      deopt,
+      reason,
+      callExpressionPath,
       messages.nonStaticValue('unstable_defineConstsNested'),
-      SyntaxError,
     );
   }
   if (typeof value !== 'object' || value == null) {
diff --git a/packages/@stylexjs/babel-plugin/src/visitors/stylex-define-consts.js b/packages/@stylexjs/babel-plugin/src/visitors/stylex-define-consts.js
index 84c2eea66..47c2d3da9 100644
--- a/packages/@stylexjs/babel-plugin/src/visitors/stylex-define-consts.js
+++ b/packages/@stylexjs/babel-plugin/src/visitors/stylex-define-consts.js
@@ -16,6 +16,7 @@ import { utils, defineConsts as styleXDefineConsts, messages } from '../shared';
 import { convertObjectToAST } from '../utils/js-to-ast';
 import StateManager from '../utils/state-manager';
 import { isVariableNamedExported } from '../utils/ast-helpers';
+import { evaluationError } from './visitor-utils';
 
 /// This function looks for `stylex.defineConsts` calls and transforms them.
 /// 1. It finds and validates the first argument to `stylex.defineConsts`.
@@ -58,15 +59,17 @@ export default function transformStyleXDefineConsts(
     };
     state.applyStylexEnv(evaluatePathFnConfig.identifiers);
 
-    const { confident, value } = evaluate(
+    const { confident, value, reason, deopt } = evaluate(
       firstArg,
       state,
       evaluatePathFnConfig,
     );
     if (!confident) {
-      throw callExpressionPath.buildCodeFrameError(
+      throw evaluationError(
+        deopt,
+        reason,
+        callExpressionPath,
         messages.nonStaticValue('defineConsts'),
-        SyntaxError,
       );
     }
     if (typeof value !== 'object' || value == null) {
diff --git a/packages/@stylexjs/babel-plugin/src/visitors/stylex-define-vars-nested.js b/packages/@stylexjs/babel-plugin/src/visitors/stylex-define-vars-nested.js
index aeb0c3874..8ec8508d6 100644
--- a/packages/@stylexjs/babel-plugin/src/visitors/stylex-define-vars-nested.js
+++ b/packages/@stylexjs/babel-plugin/src/visitors/stylex-define-vars-nested.js
@@ -19,7 +19,12 @@ import {
 } from '../shared';
 import { convertObjectToAST } from '../utils/js-to-ast';
 import { evaluate } from '../utils/evaluate-path';
-import { isCallTo, validateDefineCall, buildEvalConfig } from './visitor-utils';
+import {
+  isCallTo,
+  validateDefineCall,
+  buildEvalConfig,
+  evaluationError,
+} from './visitor-utils';
 
 /// Transforms `stylex.unstable_defineVarsNested` calls.
 /// Validates, evaluates the argument statically, delegates to the shared
@@ -59,14 +64,16 @@ export default function transformStyleXDefineVarsNested(
     otherInjectedCSSRules,
   );
 
-  const { confident, value } = evaluate(firstArg, state, {
+  const { confident, value, reason, deopt } = evaluate(firstArg, state, {
     identifiers,
     memberExpressions,
   });
   if (!confident) {
-    throw callExpressionPath.buildCodeFrameError(
+    throw evaluationError(
+      deopt,
+      reason,
+      callExpressionPath,
       messages.nonStaticValue('unstable_defineVarsNested'),
-      SyntaxError,
     );
   }
   if (typeof value !== 'object' || value == null) {
diff --git a/packages/@stylexjs/babel-plugin/src/visitors/stylex-define-vars.js b/packages/@stylexjs/babel-plugin/src/visitors/stylex-define-vars.js
index 2fa630339..6f626cb8d 100644
--- a/packages/@stylexjs/babel-plugin/src/visitors/stylex-define-vars.js
+++ b/packages/@stylexjs/babel-plugin/src/visitors/stylex-define-vars.js
@@ -26,6 +26,7 @@ import { isCSSType } from '../shared/types';
 import { convertObjectToAST } from '../utils/js-to-ast';
 import { createVarGroupProxy, evaluate } from '../utils/evaluate-path';
 import { isVariableNamedExported } from '../utils/ast-helpers';
+import { evaluationError } from './visitor-utils';
 
 class DefineVarsValueError extends Error {}
 
@@ -171,14 +172,16 @@ export default function transformStyleXDefineVars(
       },
     });
 
-    const { confident, value } = evaluate(firstArg, state, {
+    const { confident, value, reason, deopt } = evaluate(firstArg, state, {
       identifiers,
       memberExpressions,
     });
     if (!confident) {
-      throw callExpressionPath.buildCodeFrameError(
+      throw evaluationError(
+        deopt,
+        reason,
+        callExpressionPath,
         messages.nonStaticValue('defineVars'),
-        SyntaxError,
       );
     }
     if (typeof value !== 'object' || value == null) {
@@ -348,8 +351,14 @@ function evaluateDefineVarsFunction(
   let result;
   try {
     result = fn();
-  } catch {
-    throw new DefineVarsValueError(messages.nonStaticValue('defineVars'));
+  } catch (error) {
+    // Evaluation failures inside function values carry the evaluator's
+    // deopt reason in the error message — preserve it.
+    throw new DefineVarsValueError(
+      error instanceof Error && error.message !== ''
+        ? error.message
+        : messages.nonStaticValue('defineVars'),
+    );
   } finally {
     dependencyState.setCurrentDependencies(prevDependencies);
   }
diff --git a/packages/@stylexjs/babel-plugin/src/visitors/stylex-keyframes.js b/packages/@stylexjs/babel-plugin/src/visitors/stylex-keyframes.js
index ec88a72f3..894b6c164 100644
--- a/packages/@stylexjs/babel-plugin/src/visitors/stylex-keyframes.js
+++ b/packages/@stylexjs/babel-plugin/src/visitors/stylex-keyframes.js
@@ -14,6 +14,7 @@ import * as t from '@babel/types';
 import StateManager from '../utils/state-manager';
 import { keyframes as stylexKeyframes, messages } from '../shared';
 import { evaluate } from '../utils/evaluate-path';
+import { evaluationError } from './visitor-utils';
 import { firstThatWorks as stylexFirstThatWorks } from '../shared';
 
 /// This function looks for `stylex.keyframes` calls and transforms them.
@@ -83,14 +84,16 @@ export default function transformStyleXKeyframes(
     });
     state.applyStylexEnv(identifiers);
 
-    const { confident, value } = evaluate(firstArg, state, {
+    const { confident, value, reason, deopt } = evaluate(firstArg, state, {
       identifiers,
       memberExpressions,
     });
     if (!confident) {
-      throw path.buildCodeFrameError(
+      throw evaluationError(
+        deopt,
+        reason,
+        path,
         messages.nonStaticValue('keyframes'),
-        SyntaxError,
       );
     }
     const plainObject = value;
diff --git a/packages/@stylexjs/babel-plugin/src/visitors/stylex-position-try.js b/packages/@stylexjs/babel-plugin/src/visitors/stylex-position-try.js
index 0a4c1ac56..a6487ee78 100644
--- a/packages/@stylexjs/babel-plugin/src/visitors/stylex-position-try.js
+++ b/packages/@stylexjs/babel-plugin/src/visitors/stylex-position-try.js
@@ -14,6 +14,7 @@ import * as t from '@babel/types';
 import StateManager from '../utils/state-manager';
 import styleXPositionTry from '../shared/stylex-position-try';
 import { evaluate } from '../utils/evaluate-path';
+import { evaluationError } from './visitor-utils';
 import { firstThatWorks as stylexFirstThatWorks } from '../shared';
 import * as messages from '../shared/messages';
 
@@ -78,14 +79,16 @@ export default function transformStyleXPositionTry(
     });
     state.applyStylexEnv(identifiers);
 
-    const { confident, value } = evaluate(firstArgPath, state, {
+    const { confident, value, reason, deopt } = evaluate(firstArgPath, state, {
       identifiers,
       memberExpressions,
     });
     if (!confident) {
-      throw callExpressionPath.buildCodeFrameError(
+      throw evaluationError(
+        deopt,
+        reason,
+        callExpressionPath,
         messages.nonStaticValue('positionTry'),
-        SyntaxError,
       );
     }
     const plainObject = value;
diff --git a/packages/@stylexjs/babel-plugin/src/visitors/stylex-view-transition-class.js b/packages/@stylexjs/babel-plugin/src/visitors/stylex-view-transition-class.js
index 10d9c904a..aa03b0f22 100644
--- a/packages/@stylexjs/babel-plugin/src/visitors/stylex-view-transition-class.js
+++ b/packages/@stylexjs/babel-plugin/src/visitors/stylex-view-transition-class.js
@@ -14,6 +14,7 @@ import * as t from '@babel/types';
 import StateManager from '../utils/state-manager';
 import * as messages from '../shared/messages';
 import { evaluate } from '../utils/evaluate-path';
+import { evaluationError } from './visitor-utils';
 import {
   firstThatWorks as stylexFirstThatWorks,
   keyframes as stylexKeyframes,
@@ -104,14 +105,16 @@ export default function transformStyleXViewTransitionClass(
     });
     state.applyStylexEnv(identifiers);
 
-    const { confident, value } = evaluate(firstArgPath, state, {
+    const { confident, value, reason, deopt } = evaluate(firstArgPath, state, {
       identifiers,
       memberExpressions,
     });
     if (!confident) {
-      throw callExpressionPath.buildCodeFrameError(
+      throw evaluationError(
+        deopt,
+        reason,
+        callExpressionPath,
         messages.nonStaticValue('viewTransitionClass'),
-        SyntaxError,
       );
     }
 
diff --git a/packages/@stylexjs/babel-plugin/src/visitors/visitor-utils.js b/packages/@stylexjs/babel-plugin/src/visitors/visitor-utils.js
index 914177262..488f00c7c 100644
--- a/packages/@stylexjs/babel-plugin/src/visitors/visitor-utils.js
+++ b/packages/@stylexjs/babel-plugin/src/visitors/visitor-utils.js
@@ -6,12 +6,11 @@
  *
  * @flow strict
  *
- * Shared visitor helpers for the unstable_defineVarsNested / unstable_defineConstsNested /
- * unstable_createThemeNested visitors. These extract common patterns (call detection,
- * validation, eval config setup) to avoid duplication across the 3 nested visitors.
- *
- * NOTE: These helpers only serve the NEW nested visitors. The existing flat visitors
- * (stylex-define-vars.js, stylex-define-consts.js, stylex-create-theme.js) are untouched.
+ * Shared visitor helpers. `isCallTo`, `validateDefineCall`, and
+ * `buildEvalConfig` extract common patterns across the 3 nested visitors
+ * (unstable_defineVarsNested / unstable_defineConstsNested /
+ * unstable_createThemeNested); `evaluationError` is shared by all visitors
+ * that evaluate their arguments statically.
  */
 
 import type { NodePath } from '@babel/traverse';
@@ -28,6 +27,23 @@ import {
 } from '../shared';
 import { isVariableNamedExported } from '../utils/ast-helpers';
 
+/**
+ * Builds the error to throw when a StyleX API argument fails static
+ * evaluation: prefers the evaluator's specific deopt reason and location,
+ * falling back to the generic message at the API call site.
+ */
+export function evaluationError(
+  deopt: ?NodePath<>,
+  reason: ?string,
+  fallbackPath: NodePath<>,
+  fallbackMessage: string,
+): Error {
+  return (deopt ?? fallbackPath).buildCodeFrameError(
+    reason ?? fallbackMessage,
+    SyntaxError,
+  );
+}
+
 /**
  * Detects if a CallExpression matches a StyleX API call.
  * Handles both import patterns:
diff --git a/packages/@stylexjs/stylex/__tests__/inject-test.js b/packages/@stylexjs/stylex/__tests__/inject-test.js
index 618f4f94f..726f4dcac 100644
--- a/packages/@stylexjs/stylex/__tests__/inject-test.js
+++ b/packages/@stylexjs/stylex/__tests__/inject-test.js
@@ -106,6 +106,42 @@ describe('inject', () => {
       );
     });
 
+    test('substitutes constants inside calc() expressions', () => {
+      inject({ ltr: '', priority: 0, constKey: 'xcalca1', constVal: 26 });
+      inject({ ltr: '', priority: 0, constKey: 'xcalcb2', constVal: 14 });
+
+      const cssText =
+        '.calc { z-index: calc(var(--xcalca1) + var(--xcalcb2)) }';
+      const result = inject({ ltr: cssText, priority: 1000 });
+
+      expect(result).toMatchInlineSnapshot(
+        '".calc:not(#\\#){ z-index: calc(26 + 14) }"',
+      );
+    });
+
+    test('substitutes unit constants inside calc() expressions', () => {
+      inject({ ltr: '', priority: 0, constKey: 'xcalcpx1', constVal: '16px' });
+
+      const cssText = '.calcpx { padding: calc(var(--xcalcpx1) * 2) }';
+      const result = inject({ ltr: cssText, priority: 1000 });
+
+      expect(result).toMatchInlineSnapshot(
+        '".calcpx:not(#\\#){ padding: calc(16px * 2) }"',
+      );
+    });
+
+    test('leaves unresolved var() inside calc() intact', () => {
+      inject({ ltr: '', priority: 0, constKey: 'xcalcc3', constVal: 26 });
+
+      const cssText =
+        '.calcvar { margin: calc(var(--xcalcc3) * var(--xunresolved)) }';
+      const result = inject({ ltr: cssText, priority: 1000 });
+
+      expect(result).toMatchInlineSnapshot(
+        '".calcvar:not(#\\#){ margin: calc(26 * var(--xunresolved)) }"',
+      );
+    });
+
     test('leaves unreferenced constants unchanged in CSS', () => {
       inject({ ltr: '', priority: 0, constKey: 'xunused', constVal: 'purple' });