@csstools/css-calc 3.3.0: solve CSS math expressions with calc

Clean-room public code sample — generation instructions

Write a brand-new, minimal, self-contained code sample in this clean-room directory.
Do not copy, paraphrase, or reference any existing project source. Work only from this spec.

A csx.json manifest scaffold already exists. Do not recreate it from memory. Preserve its case.goal, packages and symbols; fill its empty case.contract with exact assertions and correct its environment, commands and verifierAdapter for the files you generate.

Goal: solve CSS math expressions with calc
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/%40csstools/css-calc@3.3.0
Demonstrate these symbols/APIs:
  - calc

Rules:
  - One focused purpose; the smallest project that proves the goal.
  - Include a contract test (test/contract.*) that runs OFFLINE and exits 0 exactly when the goal behavior works.
  - Pin every dependency with a lockfile so resolution is reproducible.
  - No secrets, credentials, or tokens. No real URLs (only example.com or localhost). No absolute paths.
  - No personal names, emails, company names, or project identifiers of any kind.
  - No binaries and no generated output (node_modules, dist, target, venv, .git, .env).
  - Keep it under 200 files and 256KB packed.

{"case":{"caseId":"case:sha256:cd81dc3b649585915e8a839b0792a9d4bd8d3a89a9f4f7a035572d7d2748c69d","contract":["calc evaluates basic arithmetic operations (addition, subtraction, multiplication, division) with units","calc evaluates unitless numbers and operator precedence in math expressions","calc evaluates comparison math functions including min, max, and clamp","calc handles nested calc and math expressions","calc converts compatible units to canonical units when toCanonicalUnits is enabled","calc respects precision configuration options for rounding calculations","calc resolves custom identifiers and constants provided via globals option","calc reports parse errors via onParseError callback when expression cannot be solved"],"goal":"solve CSS math expressions with calc","kind":"HOW","packages":["pkg:npm/%40csstools/css-calc@3.3.0"],"schemaVersion":1,"symbols":["calc"]},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","distro":"ubuntu","ecosystem":"npm","libc":"glibc","libcVersion":"2.39","os":"linux","osVersionBucket":"24","packageManager":"npm","schemaVersion":1},"license":"MIT-0","packages":["pkg:npm/%40csstools/css-calc@3.3.0"],"schemaVersion":1,"subject":"pkg:npm/%40csstools/css-calc@3.3.0","symbols":["calc"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-css-calc",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-css-calc",
      "version": "1.0.0",
      "license": "MIT-0",
      "dependencies": {
        "@csstools/css-calc": "3.3.0"
      }
    },
    "node_modules/@csstools/css-calc": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.3.0.tgz",
      "integrity": "sha512-c5ihYsPkdG6JCkU2zTMm4+k6r7RXuGxtWYhu5DHMIiF1FHzrfmHL5so11AoFpUv/tu61xfcmT4AmKoFfMPoqdQ==",
      "funding": [
        {
          "type": "github",
          "url": "https://github.com/sponsors/csstools"
        },
        {
          "type": "opencollective",
          "url": "https://opencollective.com/csstools"
        }
      ],
      "license": "MIT",
      "engines": {
        "node": ">=20.19.0"
      },
      "peerDependencies": {
        "@csstools/css-parser-algorithms": "^4.0.0",
        "@csstools/css-tokenizer": "^4.0.0"
      }
    },
    "node_modules/@csstools/css-parser-algorithms": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
      "funding": [
        {
          "type": "github",
          "url": "https://github.com/sponsors/csstools"
        },
        {
          "type": "opencollective",
          "url": "https://opencollective.com/csstools"
        }
      ],
      "license": "MIT",
      "peer": true,
      "engines": {
        "node": ">=20.19.0"
      },
      "peerDependencies": {
        "@csstools/css-tokenizer": "^4.0.0"
      }
    },
    "node_modules/@csstools/css-tokenizer": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
      "funding": [
        {
          "type": "github",
          "url": "https://github.com/sponsors/csstools"
        },
        {
          "type": "opencollective",
          "url": "https://opencollective.com/csstools"
        }
      ],
      "license": "MIT",
      "peer": true,
      "engines": {
        "node": ">=20.19.0"
      }
    }
  }
}

{
  "name": "sample-css-calc",
  "version": "1.0.0",
  "type": "module",
  "private": true,
  "license": "MIT-0",
  "scripts": {
    "test": "node test/contract.mjs"
  },
  "dependencies": {
    "@csstools/css-calc": "3.3.0"
  }
}

{
  "schemaVersion": 1,
  "goal": "solve CSS math expressions with calc",
  "kind": "HOW",
  "packages": [
    "pkg:npm/%40csstools/css-calc@3.3.0"
  ],
  "symbols": [
    "calc"
  ]
}

import { calc, calcFromComponentValues, mathFunctionNames, ParseError, ParseErrorMessage } from '@csstools/css-calc';

/**
 * Solve a CSS math expression.
 * @param {string} expression CSS calc expression string
 * @param {import('@csstools/css-calc').conversionOptions} [options] Conversion options
 * @returns {string} Solved CSS value
 */
export function solveCalc(expression, options) {
  return calc(expression, options);
}

export { calc, calcFromComponentValues, mathFunctionNames, ParseError, ParseErrorMessage };
export default calc;

import assert from 'node:assert/strict';
import { calc, solveCalc, mathFunctionNames, ParseError, ParseErrorMessage } from '../src/index.mjs';

// 1. calc evaluates basic arithmetic operations (addition, subtraction, multiplication, division) with units
{
  assert.equal(calc('calc(100px + 50px)'), '150px');
  assert.equal(calc('calc(200px - 80px)'), '120px');
  assert.equal(calc('calc(20px * 3)'), '60px');
  assert.equal(calc('calc(100px / 4)'), '25px');
  assert.equal(solveCalc('calc(10rem + 5rem)'), '15rem');
}

// 2. calc evaluates unitless numbers and operator precedence in math expressions
{
  assert.equal(calc('calc(10 * 5)'), '50');
  assert.equal(calc('calc(100 / 4)'), '25');
  assert.equal(calc('calc(1 + 2 * 3)'), '7');
  assert.equal(calc('calc((1 + 2) * 3)'), '9');
}

// 3. calc evaluates comparison math functions including min, max, and clamp
{
  assert.equal(calc('min(10px, 20px)'), '10px');
  assert.equal(calc('max(10px, 20px)'), '20px');
  assert.equal(calc('clamp(10px, 15px, 20px)'), '15px');
  assert.equal(calc('clamp(10px, 5px, 20px)'), '10px');
  assert.equal(calc('clamp(10px, 25px, 20px)'), '20px');
}

// 4. calc handles nested calc and math expressions
{
  assert.equal(calc('calc(calc(10px + 20px) * 2)'), '60px');
  assert.equal(calc('calc(min(100px, 200px) + max(10px, 20px))'), '120px');
}

// 5. calc converts compatible units to canonical units when toCanonicalUnits is enabled
{
  // 1in = 96px, 100px + 96px = 196px
  assert.equal(calc('calc(100px + 1in)', { toCanonicalUnits: true }), '196px');
}

// 6. calc respects precision configuration options for rounding calculations
{
  assert.equal(calc('calc(10px / 3)', { precision: 2 }), '3.33px');
  assert.equal(calc('calc(100px / 6)', { precision: 3 }), '16.667px');
}

// 7. calc resolves custom identifiers and constants provided via globals option
{
  const globals = new Map([
    ['--base-size', '16px'],
    ['--multiplier', '2']
  ]);
  assert.equal(calc('calc(--base-size * --multiplier)', { globals }), '32px');
  assert.equal(calc('calc(e * 2)', { precision: 4 }), '5.4366');
}

// 8. calc reports parse errors via onParseError callback when expression cannot be solved
{
  const errors = [];
  const res = calc('calc(10px + 5)', {
    onParseError: (err) => {
      errors.push(err);
    }
  });
  assert.equal(res, 'calc(10px + 5)');
  assert.equal(errors.length, 1);
  assert.ok(errors[0] instanceof ParseError);
  assert.equal(errors[0].message, ParseErrorMessage.UnexpectedAdditionOfDimensionOrPercentageWithNumber);
}

console.log('Contract assertions passed.');