Skip to content

test(preset): solve the generated CSS with @csstools/css-calc - #10

Merged
nekomeowww merged 1 commit into
mainfrom
test/preset-css-calc
Oct 27, 2026
Merged

nekomeowww merged 1 commit into
mainfrom
test/preset-css-calc

Conversation

@nekomeowww

@nekomeowww nekomeowww commented Oct 27, 2026 •

Copy link
Copy Markdown
Member

Summary

The v2 test in shared.fitted.test.ts checks that the CSS emitted by the preset computes the same lightness, chroma and hue drift as fittedOklch. Its evaluator used to translate CSS into JavaScript (calc( → (, cos( → Math.cos(, …) and run it through new Function. That checked our own translation more than CSS.

It now substitutes var() references, then solves the math functions with @csstools/css-calc, the CSS math engine behind postcss-preset-env. It covers calc(), cos(), sin(), max() and friends with CSS semantics.

  • Dev dependency of the preset only (via the catalog). Nothing changes for users.
  • Lockfile: only the 3 @csstools/* packages are added. pnpm also wanted to dedupe unrelated packages; that was left out.

Test plan

  • pnpm install --frozen-lockfile, pnpm lint, pnpm typecheck, pnpm build, pnpm test:run (26 tests).
  • Mutation check: swapping cos / sin in the preset's CSS generator makes the comparison test fail. Restored afterwards.

🤖 Generated with Claude Code

Base automatically changed from feat/fitted-model to main October 27, 2026 21:39
The v2 test evaluated the preflight by translating CSS into JavaScript
and running it through `new Function`. It now substitutes `var()` and
lets @csstools/css-calc (the CSS math engine of postcss-preset-env)
solve `calc()`, `cos()`, `sin()` and `max()`, so the comparison with
`fittedOklch` checks CSS semantics rather than our own translation.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@nekomeowww
nekomeowww force-pushed the test/preset-css-calc branch from 1d4421b to a35a77e Compare October 27, 2026 21:40
@netlify

netlify Bot commented Oct 27, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for proj-airi-chromatic ready!

Name Link
🔨 Latest commit a35a77e
🔍 Latest deploy log https://app.netlify.com/projects/proj-airi-chromatic/deploys/6ae11a3c2b1499c63775d5eb
😎 Deploy Preview https://deploy-preview-10--proj-airi-chromatic.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@nekomeowww
nekomeowww merged commit d0bb10e into main Oct 27, 2026
5 of 6 checks passed
@nekomeowww
nekomeowww deleted the test/preset-css-calc branch October 27, 2026 21:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant